函数式组件--React

函数式组件

函数式组件没有this，没有生命周期，所以不能使用string ref，在16.7之前没有state，所以函数式组件也叫纯渲染组件，或者无状态组件。
本质是一个常规函数，接收一个参数props，并返回一个reactNode。
注意事项：使用函数式组件，应该尽量避免在函数中声明子函数，否则，组件每次更新时都会重新创建这个函数

HOOK

语法：const [state, setState] = useState(initialState)
实则：const [状态,修改该状态的方法] = useState(初始值)

1. 在一个函数组件中，可以使用useState定义多个状态
2. useState返回的setState方法不会进行对象合并
3. useState返回的setState方法同样是一个异步的方法
4. 在使用hooks时要保证其调用顺序，不能再 if、for、while 等语句中调用 hooks，也不能在子函数中调用。只能在react 函数的最外层调用

useEffect

副作用钩子，用来处理函数组件中的副作用，用来取代生命周期函数
常规处理副作用有以下情况：

1. 组件挂载完成之后做某事
2. 组件挂载完成及更新完成做某事
3. 组件更新完成做某事
4. 组件即将卸载做某事

useEffect(()=>{//副作用函数
      return ()=>{ // 返回函数
      }
    },[依赖参数])

挂载阶段

从上向下执行函数，如果碰到useEffect就执行，并将useEffect的副作用函数推入到队列中，当组件挂载完成之后，就执行队列中的副作用函数，并将副作用函数的返回函数，推入到一个新的队列中

更新阶段

注意：更新阶段不同于其他阶段，对应的函数是否要执行，取决于依赖参数
从上向下执行函数，如果碰到useEffect就执行，并将useEffect的副作用函数推入到队列中，在组件更新完成之后，找出之前的返回函数队列，依次准备执行，在执行之前判断useEffect的依赖参数，如果依赖参数改变就执行，否则跳过当前项去看下一项，然后再执行副作用队列，执行时同样判断依赖是否变化，来决定其是否执行，如果执行，就重新获取其对应的返回函数

卸载阶段

组件即将卸载，找到其对应的返回函数队列，依次执行

依赖参数的取值情况

1. 为空：组件的任何更新，该useEffect对应的返回函数和函数都执行
2. 为空数组：不监听组件的更新
3. 数组中有具体的依赖：对应的依赖数据有变化的时候才会执行

useRef

const ref = useRef(initialValue);

作用：

1. 用于关联虚拟DOM的实例
2. 跨组件的更新阶段进行数据传递
3. initialValue: ref的初始值
4. ref：ref 对象