React Hooks之useEffect

useEffect

在学习useEffec之前，我们可能需要了解一下什么是副作用

副作用

React组件有部分逻辑都可以直接编写到组件的函数体中的，像是对数组调用filter、map等方法，像是判断某个组件是否显示等。但是有一部分逻辑如果直接写在函数体中，会影响到组件的渲染，这部分会产生“副作用”的代码，是一定不能直接写在函数体中。

例如：如果直接将setState的逻辑编写到了组件之中，这样就不停的更新状态，所以在状态更新后就会导致组件不断的循环渲染，直至调用次数过多内存溢出。

基于以上，就可以深入了解一下什么是hook

钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应。 useEffect()是通用的副效应钩子 。找不到对应的钩子时，就可以用它。

Effect的作用

这个hook可以让你在函数式组件中执行副作用，例如请求数据、订阅事件、修改DOM等。它接受一个函数作为参数，这个函数会在组件渲染后执行。同时也可以传递一个数组作为第二个参数，监听哪些状态变化时才需要执行副作用，并且还将在界面初始化的时候执行。由于是数组，所以这个监听对象可以是多个。

当然这第二个参数也可以是空数组，这样就表示副作用函数没有任何依赖项，因此只会在组件首次渲染后、以及组件卸载执行一次，后面组件重新渲染时不会再执行，非常适合初始化的时候，向后端请求数据。

 // 定义一个副作用函数，用于根据props.id请求用户数据
  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${props.id}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [props.id]); // 只有当props.id变化时才执行副作用

关于Effect

如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。