React 中 Effect Hook不同参数的使用规则

useEffect函数

// 第一个参数是一个回调函数
// 第二个参数是一个可选数组
function useEffect(effect: EffectCallback, deps?: DependencyList): void;

不同的参数和返回

1. 不传参数

  // 会每次 render 后都执行
  React.useEffect(() => {
      console.log("类似于类组件中的 componentDidMoount 和 componentDidUpdate");
  });

2. 空数组

  // 传入第二个参数，如果每次 render 后比较数组的值没变化，则不会在执行
  React.useEffect(() => {
      console.log("类似于类组件中的 componentDidMount");
  }, []);

2. 一个或多个值的数组

  // 传入第二个参数，只有一个值，比较该值有变化就执行;
  // 传入第二个参数，有2个值的数组，会比较每一个值，有一个不相等就执行;
  React.useEffect(() => {
      console.log("类似于类组件中的componentDidUpdate");
  }, [state, props]);

3. 返回一个函数

  // 返回时传递一个函数进行卸载，在组件卸载时候调用;
  React.useEffect(() => {
      console.log("类似于类组价中componentWillUnmout");
  }, [state, props]);

总结

useEffect Hook 相当于类组件中 componentDidMount，componentDidUpdate，componentWillUnmount这三个函数的组合，通过传入不同的参数和返回一个函数达到类组件中生命周期函数的效果。