目錄
- 什么是 useEffect ?
- 1 ： useEffect 中 觸發(fā)更新
- 2 ： 用法2 重復的 useEffect
- 3 ：依賴值觸發(fā)回調
- 4 ：useEffect 的返回值
- 結束啦
什么是 useEffect ?
官方解釋 ： useEffect 是一個 React Hook，它允許你將組件與外部系統同步。
什么意思 ？ 個人理解就是 它能根據不同的依賴值或者返回值，在不同的時機進行執(zhí)行。
我們先來說說 第一種用法
1 ： useEffect 中 觸發(fā)更新
示例1 ： 當我們在組件創(chuàng)建的過程，自動執(zhí)行某些操作的時候 ， 那我們可以在函數式組件中這樣
錯誤示例
import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
initData()
})
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}
如果你這種用 useEffect 你會發(fā)現 什么問題 ？
當我們組件 渲染完成去執(zhí)行 useEffect 調用 initData 函數 函數通過 setCount 設置值觸發(fā)更新，一旦更新 useEffect 又會在渲染的最后執(zhí)行，這樣就照成了 死循環(huán)
所以 你應該這樣寫 ,傳入 useEffect 第二個參數 空數組，代表組件渲染過程中只執(zhí)行一次
正確示例
import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
initData()
}, [])
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}
2 ： 用法2 重復的 useEffect
示例2 ： 當我們在組件渲染的過程中 ，如果你寫了多個useEffect 它會怎么做 ？
import { useEffect, useState } from 'react';
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('111');
})
useEffect(() => {
console.log('222');
})
return (<div> {count} </div>)
}
export default Effect
想當然 ， 它不會覆蓋前面的 useEffect ，會根據你的 編寫順序進行收集，然后循環(huán)執(zhí)行(當然這只是我的猜測，暫時還沒看react源碼)
3 ：依賴值觸發(fā)回調
當你想去依賴某些變量的時候去觸發(fā)回調函數，你可以這樣。
import { useEffect, useState } from 'react';
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('count發(fā)生了變化最新值為' + count);
}, [count])
return (<div>
<div>
{count}
</div>
<button onClick={() => setCount(count + 1)}>加1</button>
</div>)
}
export default Effect
當你的第二個參數是數組，并且是依賴項，組件初次渲染也會執(zhí)行，這是為什么呢 ？
解答 ： 如果從 react useState Hook 來說，也就是 react 將你傳入的 默認值 給你重新賦值了，所以發(fā)生了變化，因此 useEffect 發(fā)生了更新
4 ：useEffect 的返回值
當useEffect 傳入的 回調函數有返回值時并且為一個 函數的時候，它會怎么做？
import { useEffect, useState } from 'react';
const Room = () => {
useEffect(() => {
console.log("子組件渲染完成")
return () => {
console.log("子組件useeffect 回調函數執(zhí)行")
}
}, [])
return (<div>
這是我的房間 ， 大家一起來玩呀
</div>)
}
function Effect() {
const [show, setShow] = useState(true)
return (<div>
<div>
{show && <Room></Room>}
</div>
<button onClick={() => setShow(!show)}>加1</button>
</div>)
}
export default Effect
解答 ： useEffect函數 的返回值 如果是函數時 它會在組件銷毀的時候自動回調該函數，你可以在該函數中做一些清理操作，等等
結束啦
好了，最后到這次本章了解的知識就到此結束了，如果有哪里寫的不對的地方或者有更好的使用方式，歡迎大家在評論區(qū)留言！
到此這篇關于React中的useEffect四種用法分享的文章就介紹到這了,更多相關React useEffect用法內容請搜索技圈網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持技圈網！