React中useEffect的使用

RSS
405 阅读2分钟

首先介绍两个概念，纯函数和副作用函数。

纯函数（ Pure Function ）：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，这样的函数被称为纯函数。 副作用函数（ Side effect Function ）：如果一个函数在运行的过程中，除了返回函数值，还对主调用函数产生附加的影响，这样的函数被称为副作用函数。 useEffect 就是在 React 更新 DOM 之后运行一些额外的代码，也就是执行副作用操作，比如请求数据，设置订阅以及手动更改 React 组件中的 DOM 等。

什么是useEffect?

useEffect是指让函数型组件拥有处理副作用的能力，类似生命周期函数。React 官方文档解释：Effect Hook 可以让你在函数组件中执行副作用操作。

useEffect的使用

根据传参个数和传参类型，useEffect(effect) 的执行次数和执行结果是不同的。 （1）第一个参数为一个函数：

这个函数的目的就是为了告诉 React 组件需要在渲染后执行哪些操作，这个函数会在DOM更新之后被调用，useEffect 默认在每次渲染之后都会执行。但是也可以手动控制它的执行。

（2）第二个参数（一个数组）：

当数组中的任意一项变化的时候，useEffect会被重新执行，如果传递一个空数组 [ ]，告诉 useEffect 不依赖于 state、props中的任意值，useEffect 就只会运行一次。 如果数组中有值，就会依赖于数组中的值，数组中的值只要发生改变useEffect就会执行。

 useEffect(() => {
    getChartDatas();
    console.log("date发生改变就会执行useEffect中的getChartDatas方法")
  }, [date]);

数组中可以设置多个依赖项，其中的任意一项发生变化，useEffect 都会重新执行。

  useEffect(() => {
  queryProblemList(); 
}, [questionListKey, isSearch]);//questionListKey和isSearch只要有一个值发生改变就会调用queryProblemList方法

useEffect 的执行时机

默认情况下，effect 在第一次渲染之后和每次更新之后都会执行，也可以是只有某些值发生变化之后执行，重点在于是每轮渲染结束后延迟调用（ 异步执行 ），这是 useEffect 的好处，保证执行 effect 的时候，DOM 都已经更新完毕，不会阻碍 DOM 渲染，造成视觉阻塞。

useEffect() 的用途

只要是副效应，都可以使用useEffect()引入。它的常见用途有下面几种。

1.获取数据（data fetching）

2.事件监听或订阅（setting up a subscription）

3.改变 DOM（changing the DOM）

4.输出日志（logging）

useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。

使用useEffect()时，有一点需要注意。如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。

avatar
文章
阅读
粉丝