React Hook

￡神魔★判官ぃ 2021-09-02 05:49 338阅读 0赞

--------------------

## Hook简介 ##

1.  Hook专门用于增强函数组件的功能（Hook在类组件中是不能使用的），使之理论上可以成为类组件的替代品
2.  官方强调：没有必要更改已经完成的类组件，官方目前没有计划取消类组件，只是鼓励使用函数组件
3.  Hook（钩子）本质上是一个函数（命名上总以use开头），该函数可以挂载任何功能
4.  Hook的种类：useState、useEffect、useContext、useReducer、自定义Hook

## state Hook ##

1.  state Hook是一个在函数组件中使用的函数（useSatte）,用于在函数组件中使用状态
2.  useState函数

*  函数有一个参数，这个参数的值表示状态的默认值
 *  函数的返回值是一个数组，该数组一定包含两项：当前状态的值、改变状态的函数

1.  一个函数组件中可以有多个状态，这种做法非常有利于横向切分关注点
2.  useState原理

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70_pic_center]

1.  注意细节
    
    1.  useSatte最好写在函数的起始位置，便于阅读
    2.  useState严禁出现在代码块（循环、判断）中
    3.  useSate返回的函数（第二项），引用不变（节约内存空间）
    4.  使用函数改变数据，若数据和之前的数据完全相等（会使用Object.is比较）,不会导致重新渲染，以达到优化效率的目的
    5.  使用函数改变数据，传入的值不会和原来的数据合并，而是直接替换
    6.  如果要实现强制刷新组件：
    
     *  类组件：使用this.forceUpdate()强制刷新
     *  函数组件：使用一个空对象的useState
    
    1.  如果某些状态之间没有必然的联系，应该分化为不同的状态，而不要合并成一个对象
    2.  和类组件一样，函数组件中改变状态可能是异步的（在DOM事件中，状态改变后不会立即更改，而是等事件运行完之后一起改变），多个状态变化会合并并以提高效率，此时，不能信任之前的状态，而应该使用回调函数的方式改变状态。

## effect Hook ##

### effect Hook：用于在函数组件中处理副作用 ###

### 副作用 ###

1.  ajax请求
2.  计时器
3.  其它异步操作
4.  更改真实Dom对象
5.  本地存储
6.  其它会对外部产生影响的操作

### useEffect函数，该函数接受一个函数作为参数，接受的函数就是需要进行副作用操作的函数 ###

### 注意细节 ###

1.  副作用函数运行的时间点，是在页面完成真实的UI渲染之后。因为副作用的执行是异步的，并且不会阻塞浏览器
    
    1.  与类组件中componentDidMount和componentDidUpdata的区别：
    
     *  componentDidMount和componentDidUpdata，更改了真实Dom，但是用户还没有看到UI就更新，是同步的
     *  useEffect中的副作用函数，更改了真实Dom，并且用户已经看到了UI更新后再执行副作用函数，是异步的
2.  每个函数组件中，可以多次使用useEffect,但不要放入判断或者循环等代码块中
3.  useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫清理函数
    
    1.  该函数运行时间点，在每次运行副作用函数之前
    2.  组件首次渲染不会执行
    3.  组件被销毁是一定执行
4.  useEffect函数，可以传递第二个参数
    
    1.  第二个参数是一个数组，数组中记录该副作用的依赖数据
    2.  当组件重新渲染后，只有依赖数据与上一次不一样时，才会执行副作用
    3.  当传递了依赖数据后，如果数据没有发生变化((例只传一个空数组)：
    
     *  副作用函数仅在第一次渲染后执行
     *  清理函数仅在卸载组件后运行
5.  副作用函数中，如果使用了函数上下文中的变量，则由于闭包的影响，会导致副作用函数中变量不会实时变化
6.  副作用函数在每次注册时，会覆盖掉之前的副作用函数，因此，尽量保持副作用函数稳定，否则控制起来会比较复杂

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/92f7dcc231da4e169cf603b8efce968d.png