React

函数组件

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 ()=>{ //模拟组件将要卸载 }

},[])