你不知道的Effect hook

迷南。 2022-09-08 15:50 57阅读 0赞

> 第一遍学hook的时候，只是匆匆带过了几种hook的使用，也用useState、useEffect写了一个小demo  
> 但是在看项目代码的时候，发现了effecthook之前没学到的东西，遂回头再学一次，加深理解并记录下来。

## 1、定义 ##

Effect Hook 可以让你在函数组件中执行副作用操作，数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。

## 2、使用 ##

### 2.1 初次理解 ###

effect hook 一定程度上充当了在函数组件中生命周期的作用，官方文档都让我们把 useEffect 想象成 componentDidMount， componentDidUpdate，componentWillUnmount 三个生命周期的结合体。

（这也造成了我对effect hook理解的误区，具体后面会有介绍。）

官网给出的例子是这样使用effect hook的

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5LqR55qE5LqR_size_20_color_FFFFFF_t_70_g_se_x_16]  
用来取代如下的class组件生命周期  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5LqR55qE5LqR_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
很容易得出结论：effect hook 在挂载（初始化）和每次更新时都会调用，正好代替了componentDidMount， componentDidUpdate两个过程。  
（最初的我也是这样理解的，单纯的以为useEffect只能这么用）

但在第二次学习effect hook时，我才知道useEffect的第二个参数：

### 2.2 二次学习的补充——3种使用场景 ###

##### a、挂载和更新时调用 #####

当useEffect没有第二个参数时,组件的初始化和更新都会执行。（也就是官网给的例子）

useEffect(() => { 
         console.log('hello world')
      });

##### b、仅挂载时调用： #####

useEffect的第二个参数为一个空数组，初始化调用一次之后不再执行，相当于componentDidMount。（ \[ \]依赖数组中为空，也就是数组中的值不会变，也就是永不更新）

useEffect(() => { 
        console.log('hello world')
      }, [])

##### c、仅更新特定数据时调用： #####

可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组。只有参数数组中的值更新了，才进行调用。

useEffect(
      () => { 
        const subscription = props.source.subscribe();
        return () => { 
          subscription.unsubscribe();
        };
      },[props.source],);

## 3、分类 ##

官网给出的分类是：需要清除的effect 和 无需清除的effect

useEffect 的执行代码中可以返回一个函数，在每一次新的 render 进行前或者组件 unmount 之时，都会执行此函数，进行清理工作。

### 3.1 需要清除的effect ###

用return一个函数的方式代替 componentWillUnmount 生命周期

useEffect(() => { 
        function handleStatusChange(status) { 
          setIsOnline(status.isOnline);
        }
    
        ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
      //unmount要做的事，清除操作
        return () => { 
          ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
        };
      });

### 3.2 无需清除的effect ###

无需清除的effect则和2中例子一致，不需return返回值。

## 4、总结 ##

*  每次初始化的时候必定执行一次。
 *  如果返回了函数，那么在下一次 render 之前或组件 unmount 之前必定会运行一次返回函数的代码。
 *  如果指定了依赖数组，且不为空，则当数组里的每个元素发生变化时，都会重新运行一次。
 *  如果数组为空，则只在第一次 render 时执行一次，如果有返回值，则同 3。
 *  如果在 useEffect 中更新了 state，且没有指定依赖数组，或 state 存在于依赖数组中，就会造成死循环。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5LqR55qE5LqR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/4e97bd331d7a48b08e78d9e48135c165.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5LqR55qE5LqR_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/949cf35bce694254951f4b7db5639ea7.png