深度理解并使用react的useEffect()

秒速五厘米 2022-11-16 05:58 160阅读 0赞

## 深度理解并使用react的useEffect() ##

useEffect()是React 16.8 的新增特性，它的出现是为了弥补只能在react中的类组件中使用的的生命周期函数：componentDidMount、componentDidUpdate、componentWillUnmount（和vue中的mounted、destoryed生命周期函数有异曲同工之妙，其实都是相通的）。  
下面这段代码是直接从react文档中拷贝过来的，写的是在类组件中当我们想在文档更新时和在组件消失时执行一些逻辑时，是有相关生命周期函数来执行这些操作的。

class Example extends React.Component { 
      constructor(props) { 
        super(props);
        this.state = { 
          count: 0
        };
      }
    
      componentDidMount() { 
        document.title = `You clicked ${ this.state.count} times`;
      }
      componentDidUpdate() { 
        document.title = `You clicked ${ this.state.count} times`;
      }
    
      render() { 
        return (
          <div>
            <p>You clicked { this.state.count} times</p>
            <button onClick={ () => this.setState({  count: this.state.count + 1 })}>
              Click me
            </button>
          </div>
        );
      }
    }

如果在函数组件中就可以通过useEffect()来执行这样的逻辑。

**useEffect的用法：**

接受两个参数：

*  第一个参数为你想执行的函数
 *  第二个参数为一个数组 \[a\]，意思是只有当数据a更新时才会执行前面的函数。如果数组为空，则只会在第一次文档更新时执行前面的函数，之后就不会再执行。
 *  当你想在组件被卸载得时候执行一些逻辑，就可以在useEffect函数里面返回一个清除函数。这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。上面代码的cleanup名字可以自行取，不是固定的名字。