Effect 【Hook】

157 阅读2分钟

Effect Hook

Effect Hook:用于在函数组件中处理副作用

副作用:

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

函数:useEffect,该函数接收一个函数作为参数,接收的函数就是需要进行副作用操作的函数

细节

  1. 副作用函数的运行时间点,是在页面完成真实的UI渲染之后。因此它的执行是异步的,并且不会阻塞浏览器

    1. 与类组件中componentDidMount和componentDidUpdate的区别
    2. componentDidMount和componentDidUpdate,更改了真实DOM,但是用户还没有看到UI更新,同步的。
    3. useEffect中的副作用函数,更改了真实DOM,并且用户已经看到了UI更新,异步的。
  2. 每个函数组件中,可以多次使用useEffect,但不要放入判断或循环等代码块中。

  3. useEffect中的副作用函数,可以有返回值,返回值必须是一个函数,该函数叫做清理函数

    1. 该函数运行时间点,在每次运行副作用函数之前
    2. 首次渲染组件不会运行
    3. 组件被销毁时一定会运行
  4. useEffect函数,可以传递第二个参数

    1. 第二个参数是一个数组

    2. 数组中记录该副作用的依赖数据

    3. 当组件重新渲染后,只有依赖数据与上一次不一样的时,才会执行副作用

    4. 所以,当传递了依赖数据之后,如果数据没有发生变化

      1. 副作用函数仅在第一次渲染后运行
      2. 清理函数仅在卸载组件后运行
  5. 副作用函数中,如果使用了函数上下文中的变量,则由于闭包的影响,会导致副作用函数中变量不会实时变化。

  6. 副作用函数在每次注册时,会覆盖掉之前的副作用函数,因此,尽量保持副作用函数稳定,否则控制起来会比较复杂。