react-高阶组件

React JSX语法

什么是React JSX

JS和JSX的区别

React使用JSX的有点

• JSX执行更快，因为它在编译为JavaScript代码后进行优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率。
• JSX语法中一定要有一个定义元素包裹，否则编译报错，程序不能运行。

React JSX 中使用JS表达式

React JSX 中实现列表渲染

语法：再JSX中可以使用原生的JS中的map方法遍历渲染列表。

const List = [
  {id:"01",name:"vue2"},
  {id:"02",name:"React"},
  {id:"03",name:"eachers"},
  {id:"04",name:"vue3"},
]
function Home(){
  return(
    <div>
      {/* map循环那个结构，return那个结构，*/}
      {/* 注意，循环列表时加上一个独一无二的值key  */}
      <ul>
        {List.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}
export default Home

React JSX 中实现条件渲染

一条使用逻辑与，多条使用三元运算符

const isLogin = true
function Home(){
  return(
    <div>
      {/* 逻辑与 */}
      {isLogin && <span>this is span</span>}
      {/* 三元运算符 */}
      {isLogin ? <span>jack</span>:<span>loading...</span>}
    </div>
  )
}
export default Home

React JSX 复杂情况条件渲染

解决方案，自定义函数和自定义语句

const articalType = 1 //0 1 2
// 定义核心函数，根据文章类型返回不同的JSX模板
function getArticleTem(){
  if(articalType === 0){
    return <div>我是无图文章</div>
  }else if(articalType===1){
    return <div>我是单图模式</div>
  }else{
    return <div>我是三图模式</div>
  }
}
function Home(){
  return(
    <div>
      {/* 通过调用函数渲染不同的模板 */}
      {getArticleTem()}
    </div>
  )
}
export default Home

React JSX事件绑定

1.点击触发并且拿到参数e

function Home(){
  const handleClik = (e)=>{
    console.log("button被点击了",e)
  }
  return(
    <div>
     <button onClick={handleClik}>click me</button>
    </div>
  )
}
export default Home

2. 传递自定义参数 事件绑定的位置该找成箭头函数的写法， 在执行click实际处理业务函数的时候传递实参。

function Home(){
  //传递自定义参数
  const handleClik = (name)=>{
    console.log("button被点击了",name)
  }
  return(
    <div>
     <button onClick={()=>handleClik("jack")}>click me</button>
    </div>
  )
}
export default Home

3. 同时传递事件对象和自定义参数，在事件绑定的位置传递实参e和自定义参数，handleClick中生命形参，注意顺序对应。

function Home(){
  //既要传递自定义参数，而且还要传递事件对象e
  const handleClik = (name,e)=>{
    console.log("button被点击了",name,e)
  }
  return(
    <div>
     <button onClick={(e)=>handleClik("jack",e)}>click me</button>
    </div>
  )
}
export default Home

React中的组件

一个简单组件例子

function Home(){
  return(
    <div>
      {/* 自闭和 */}
      <Button />
      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}
function Button(){
  // 组件内部逻辑
  return <button>click me</button>
}
export default Home

也可以将组件写成箭头函数形式。

完结~