开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
前言
今天来学React中Hook特性最重要的函数之一：useEffect()，它可以看作类组件中生命周期钩子函数的一个集合，即componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数。
useEffect
useEffect(() => {
console.log("Hello,Effect")
});
上面的useEffect例子会在dom元素被更新的时候调用，当useEffect被调用时能都读取到最新的state值，这是React所保证的，以便我们在某些情况下能够解决setState异步设置所带来的问题。
返回副作用
useEffect还提供了一个清除副作用的返回值可选项，以便我们可以在组件被卸载或者state发生改变时自定义清除函数，例如下面的例子：
import React, {useEffect, useState} from 'react';
import ReactDOM from 'react-dom/client';
function Demo() {
const [flag, setFlag] = useState( false );
useEffect( () => {
console.log( "开始执行" );
return () => {
console.log( "清除函数" );
}
})
return (
<div onClick={()=>{setFlag(true)}}>
DEMO
</div>
);
}
let root = ReactDOM.createRoot(
document.getElementById( "root" )
);
root.render( <Demo/> )
当我们点击时，flag的值发生了改变，组件开始重新加载，返回函数就会被执行。
第二个参数deps
那如果我们只想useEffect只执行一次或者只有某个state改变才执行可以吗？答案也是可以滴，useEffect方法提供了第二个参数deps,来判断是否需要让方法执行，我们直接看下面的例子代码：
useEffect(()=>{
console.log( "只执行一次" );
},[]) // 当我们传入[]时，这就告诉 React该useEffect不依赖于组件中的任何值，因此它永远都不需要重复执行。
useEffect(()=>{
console.log( "当flag改变时才会执行useEffect" );
},flag) // 当我们传入flag时，这就告诉 React该useEffect依赖于flag这个state，因此当flag发生改变时就会执行方法。
重复定义
useEffect支持通过重复定义来进行逻辑代码的分离，同时保证根据函数的声明顺序来依次进行调用，例如下面的代码：
useEffect( () => {
console.log( "开始执行1" );
} )
useEffect( () => {
console.log( "开始执行2" );
} )
useEffect( () => {
console.log( "开始执行3" );
} )
// 开始执行1
// 开始执行2
// 开始执行3
执行后控制台就会根据方法声明顺序来进行对应输出
