在 React 中，function component 和 class component 相比較求妹，function component 是沒有生命周期的
我們可以用 useEffect 來代替在 class component 中研乒，一些有關(guān)生命周期的操作
我們用一個例子來說明 useEffect 的一些用法和作用
首先有一個 Example 組件汹忠，組件里面有一個 button，當(dāng)點擊 button 的時候雹熬，可以進行計數(shù)
在這個組件里面還有兩個 link宽菜，Index 和 List
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => { setCount(count + 1) }}>click me</button>
<Router>
<ul>
<li><Link to="/">Index</Link></li>
<li><Link to="/list/">Link</Link></li>
</ul>
<Route path="/" component={Index} exact></Route>
<Route path="/list/" component={List} exact></Route>
</Router>
</div>
)
}
export default Example;
function Index() {
return (
<p>this is Index</p>
)
}
function List() {
return (
<p>this is List</p>
)
}
現(xiàn)在頁面上是這樣子的
現(xiàn)在給 Index 和 list 分別加上 useEffect
function Index() {
useEffect(() => {
console.log("this is Index");
})
return (
<p>this is Index</p>
)
}
function List() {
useEffect(() => {
console.log("this is Link");
})
return (
<p>this is List</p>
)
}
當(dāng)頁面第一次渲染的時候
點擊 Link
可以看出此時 useEffect 有類似 componentDidMount 的作用
現(xiàn)在點擊兩次 button
可以看到 “this is Link” 又多打印了兩次，可以看出 useEffect 有類似 componentDidUpdate 的作用
注意：
- React 首次渲染和之后的每次渲染都會調(diào)用一遍
useEffect函數(shù)竿报，而componentDidMount表示首次渲染铅乡，componentDidUpdate表示更新導(dǎo)致的重新渲染 -
uesEffect中定義的函數(shù)的執(zhí)行不會阻礙瀏覽器更新視圖，也就是說這些函數(shù)是異步執(zhí)行的烈菌，但是componentDidMount和componentDidUpdate中的代碼都是同步執(zhí)行的
現(xiàn)在阵幸，我們給 useEffect 加上一個 return 函數(shù)
function Index() {
useEffect(() => {
console.log("this is Index");
return () => {
console.log("you have leaved Index");
}
})
return (
<p>this is Index</p>
)
}
function List() {
useEffect(() => {
console.log("this is Link");
return () => {
console.log("you have leaved Link");
}
})
return (
<p>this is List</p>
)
}
當(dāng)初次渲染，然后點擊 Link 的時候
再切換回 Index
可以看到在組件 unmount 的時候芽世， useEffect 里面的 return 函數(shù)被觸發(fā)了
所以 useEffect 也可以實現(xiàn) componentWillUnmount 的功能
但是挚赊！
當(dāng)我們點擊 button 的時候
可以看到 useEffect 里面的 return 也執(zhí)行了
但是我們不想讓它執(zhí)行，只是實現(xiàn) componentWillUnmount 的功能
這時候可以設(shè)置 useEffect 的第二個參數(shù)
function Index() {
useEffect(() => {
console.log("this is Index");
return () => {
console.log("you have leaved Index");
}
}, [])
return (
<p>this is Index</p>
)
}
這時候點擊 button
切換
關(guān)于 useEffect 的第二個參數(shù)
我們現(xiàn)在給 Example 加一個 useEffect
useEffect(()=>{
console.log(`useEffect=>You clicked ${count} times`)
return ()=>{
console.log('====================')
}
},[count])
第一次渲染的時候
點擊 button 的時候
總結(jié)：
- 當(dāng)沒有
return的時候- 第二個參數(shù)是副效應(yīng)函數(shù)的依賴項捂襟，只有該變量發(fā)生變化的時候咬腕，副效應(yīng)函數(shù)才執(zhí)行
- 如果第二個參數(shù)是一個空數(shù)組，表明副效應(yīng)參數(shù)沒有任何依賴項葬荷，所以涨共，副效應(yīng)函數(shù)這時只會在組件加載進 DOM 后執(zhí)行一次
- 當(dāng)有
return的時候，return函數(shù)部分- 如果沒有第二個參數(shù)宠漩，state 發(fā)生變化举反，組件 unmount 的時候會執(zhí)行；
- 如果第二個參數(shù)是一個空數(shù)組扒吁，那么
return部分和componentWillUnmount效果是一樣的 - 如果有依賴項火鼻，依賴項發(fā)生變化的時候，雕崩，
useEffect第一個參數(shù)部分都會執(zhí)行魁索，并且return函數(shù)先執(zhí)行
