useEffect Hook 概述
- 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合
useEffect Hook 特点
- 可以设置依赖, 只有依赖发生变化的时候才执行可以设置依赖, 只有依赖发生变化的时候才执行
示例演示代码如下：
import React, {useState, useEffect} from 'react'; function Home() { const [nameState, setNameState] = useState('Jonathan_Lee'); const [ageState, setAgeState] = useState(0); useEffect(() => { // componentDidMount // componentDidUpdate console.log('组件被挂载或者组件更新完成'); return () => { // componentWillUnmount console.log('组件即将被卸载'); } }); return ( <div> <p>{nameState}</p> <button onClick={() => { setNameState('yangbuyiya') }}>修改 </button> <p>{ageState}</p> <button onClick={() => { setAgeState(ageState + 1) }}>增加 </button> <button onClick={() => { setAgeState(ageState - 1) }}>减少 </button> <hr/> </div> ) } export default function App() { const [isShowState, setIsShowState] = useState(true); return ( <div> {isShowState && <Home/>} <button onClick={() => { setIsShowState(!isShowState) }}>切换Home组件 </button> </div> ) }
定义了一个 App 组件，然后在当中用一个按钮来控制 Home 的显示与隐藏，然后呢，点击 Home 组件不同的按钮观察一下生命周期输出到控制台的信息即可。
useEffect Hook 对比类组件生命周期方法的优势：
- 易于拆分
例如在之前的类组件的生命周期方法，在组件被挂载的时候要做一些其它的事情，就需要全部写在一个方法当中但是用了 useEffect Hook 就可以完美的解决该问题示例如下：
import React, {useState, useEffect} from 'react'; function Home() { const [nameState, setNameState] = useState('Jonathan_Lee'); const [ageState, setAgeState] = useState(0); useEffect(() => { // 组件被挂载 console.log('修改DOM'); }); useEffect(() => { // 组件被挂载 console.log('注册监听'); return () => { console.log('移出监听'); } }); useEffect(() => { console.log('发送网络请求'); }); return ( <div> <p>{nameState}</p> <button onClick={() => { setNameState('yangbuyiya') }}>修改 </button> <p>{ageState}</p> <button onClick={() => { setAgeState(ageState + 1) }}>增加 </button> <button onClick={() => { setAgeState(ageState - 1) }}>减少 </button> <hr/> </div> ) } export default function App() { const [isShowState, setIsShowState] = useState(true); return ( <div> {isShowState && <Home/>} <button onClick={() => { setIsShowState(!isShowState) }}>切换Home组件 </button> </div> ) }
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
