React-Hooks使用之useEffect

今天来聊一聊useEffect的基本使用叭~~

useEffect() 相当于代替了类式中的两个生命周期函数：componentDidMount和componentDidUpdate（这两个生命周期不会的宝子们得先看看react基础哦），表示组件第一次进入页面渲染 和 更新时都会执行，具体看如下代码：

const EffectStudy = () => {
  //计数器
    const [ count , setCount ] = useState(0);
    useEffect(()=>{
        console.log(`useEffect：点击${count} 次`)
    })
  return (
    <div>
      <p>数值：{count} </p>
      <button onClick={()=>{setCount(count+1)}}>点击+1</button>
    </div>
  );
};

控制台输出的结果：

当我页面计数器增加进行更新时，就会再次进行调用

ok，这是最基本的使用，useEffect还有第二个参数，是一个数组，形式就是useEffect(()=>{},[ ])
来看看案例叭：

function Main () {
  useEffect(() => {
    console.log("进入到Main页面....");
  })
  return <h3>Main页面</h3>
}
function Details () {
  useEffect(() => {
  console.log("进入到Details页面...");
  })
  return <h3>Details</h3>
}
/**
   UseEffect副作用函数
 * 
 */
const EffectStudy = () => {
  //计数器
    const [ count , setCount ] = useState(0);
    useEffect(()=>{
        console.log(`useEffect：点击${count} 次`)
    })
  
  
  return (
    <div>
      <p style={{margin:"30px"}}>数值：{count} </p>
      <button style={{ marginLeft: "30px" }} onClick={() => { setCount(count + 1) }}>点击+1</button>
      <p>--------------------------------------------------------------------------------------</p>

      <Router>
        <ul>
          <li><Link to='/'>点击进入Mian</Link></li>
          <li><Link to='/details/'>点击进入Details</Link></li>
        </ul>
        <Routes>
             <Route path='/' exact element={<Main/>}/>
        <Route path='/details' element={<Details/>}/>
     </Routes>

      </Router>
    </div>
  );
};

控制台结果：

我们知道useEffect() 是第一次渲染和更新时都会执行，所以在我点击计数器时，Details页面也会进行更新重新执行，那么如何在组件结束后进行卸载释放呢，就像原来类式组件的componentWillUnmount 生命周期函数功能一样，这就需要用到useEffect的第二个参数咯：

当第二个参数为空时：

我们给这两个 路由组件的副作用都加上一个空的数组，
路由不在该组件时，就不会重新渲染不会执行，看控制台：

我们可以看到，在我由调到一个路由后，再次点击计数器，页面重新渲染时不会再导致该路由界面重新渲染。也就是说此时的路由界面只会执行一次。

当第二个参数不为空时：
以计数器为例，给计数器的useEffect加上第二个参数：
第二个参数为空数组：

控制台：

只有第一次渲染时打印了，后面计数器增加并没有打印

那我们再来看看第二个参数非空时：

控制台：

我们可以看到第二个参数绑定了当前计数器的状态，所以计数器每次状态更新，都会导致useEffect重新执行。

简单的说就是useEffect的第二个参数为空数组，则只会在界面渲染一次。而第二个参数绑定了组件中的某个状态，则该状态若更新则会带动useEffect再次执行，跟第二个参数保持联动性。

另外，补充一下useEffect是异步执行的，所以在它内部定义的函数并不会阻碍页面执行哦，所以这一点又跟类式的两个生命周期函数不一样。

今天的分享就到此结束啦，你看懂了嘛。
知识点要多练才能变成自己的哦~
欢迎各位大佬留言指正。