React的组件传参、生命周期与Hooks

函数组件

• props

类组件

• props
• state
• 生命周期
• ref
• this

组件

1.函数组件

• 推荐使用函数组件
• 函数组件，只有props，不依赖state
  适应性更强，更解构，提高组件的复用性
• 视图组件
• 智能

        a.函数组件更加轻量，可以比类组件节省更多的内存和性能开销，并且更容易使用

        b.函数组件更加简单易懂，可以轻松的进行单元测试

        c.函数组件由于没有内部状态，所以无需考虑状态管理，也不存在类似生命周期函数之类的复杂操作，可以更加专注与UI的渲染

2.类组件

• state，this，有限定组件的复用

Hooks

1.useState  使用状态

• 作用：模拟状态
• 导入：import {useState} from ‘react’
• 使用：const [num，setNum] = useState(5)//num 数据，setNum更新num数据的方法，5默认值
• 调用num：{num}更新num：<button onClick={()=>setNum(num+2)}>

2.useEffect 使用副作用

•  作用：模拟生命周期

模拟挂载完毕

useEffect(()=>{
 //模拟挂载完毕
},[])

模拟某些数据数的更新
useEffect(()=>{
 //模拟num和list的挂载+更新
},[num,list])

模拟任意数据的挂载+更新
useEffect(()=>{
 //模拟任意数据的更新
})

模拟组件将要卸载
useEffect(()=>{
 return ()=>{ //模拟组件将要卸载 }
},[])