hooks之UseEffect使用小结

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

官方解释如上，多了不说，让我们在function中执行副作用来实现生命周期。

code1

React.useEffect(() => {
    console.log('useEffectInfo');
  }, []);

以上操作等价于componentDidMount，切记第二个参数为空。 因此componentDidMount时会打印出 useEffectInfo。

code2

React.useEffect(() => {
    console.log('useEffectInfo');
  });

如果第二个参数不传递任何参数，等价于componentDidMount和componentDidUpdate。 因此componentDidMount和componentDidUpdate时会打印出useEffectInfo。

code3

基于code1，改进如下

  const destory = () => {
    console.log('destoryInfo');
  };

  React.useEffect(() => {
    console.log('useEffectInfo');
    return destory;
  }, []);

如果想在componentWillUnmont时执行某些操作，则将该操作设为React.useEffect的第一个参数的返回值。 如代码所示，当componentDidMount时会打印出useEffectInfo， 当componentWillUnmont时会打印出destoryInfo。

code4

基于code2，改进如下：

  const destory = () => {
    console.log('destoryInfo');
  };

  React.useEffect(() => {
    console.log('useEffectInfo');
    // 强制render，导致无限render
    return destory;
  });

先执行componentDidMount，即打印出useEffectInfo，由于强制render不断执行componentDidUpdate，所以会循环不断打印 destoryInfo 然后打印useEffectInfo。此方法没人用，仅做实验使用。

code5

  React.useEffect(() => {
    console.log('useEffectInfo');
  }, [param]);

如上代码，componentDidMount时会打印出useEffectInfo，后续根据param的改变而导致的componentDidUpdate时，依然会打印出useEffectInfo。

code6

在code5基础上修改如下

  const destory = () => {
    console.log('destoryInfo');
  };

  React.useEffect(() => {
    console.log('useEffectInfo');
    return destory;
  }, [param]);

如上代码，componentDidMount时会打印出useEffectInfo。当param变更时，触发componentDidUpdate，但此时会先执行destory方法中的内容，即打印出destoryInfo，然后再执行useEffect，打印出useEffectInfo。

因此，以后可根据以上五种情况灵活使用UseEffect。Try it!