目錄什么是 useEffect ?1 ： useEffect 中 觸發(fā)更新2 ： 用法2 重復(fù)的 useEffect3 ：依賴值觸發(fā)回調(diào)4 ：useEffect 的返回值結(jié)束啦什么是 useEffect ?

官方解釋 ： useEffect 是一個(gè) React Hook，它允許你將組件與外部系統(tǒng)同步。

什么意思 ？ 個(gè)人理解就是 它能根據(jù)不同的依賴值或者返回值，在不同的時(shí)機(jī)進(jìn)行執(zhí)行。

我們先來(lái)說(shuō)說(shuō) 第一種用法

1 ： useEffect 中 觸發(fā)更新

示例1 ： 當(dāng)我們?cè)诮M件創(chuàng)建的過(guò)程，自動(dòng)執(zhí)行某些操作的時(shí)候 ， 那我們可以在函數(shù)式組件中這樣

錯(cuò)誤示例

import { useEffect } from 'react'function App () {const [ count , setCount] = useState(0)useEffect(()=> { initData()})const initData = () => { setCount(count + 1)}return ( <div> {count} </div> )}

如果你這種用 useEffect 你會(huì)發(fā)現(xiàn) 什么問(wèn)題 ？

當(dāng)我們組件 渲染完成去執(zhí)行 useEffect 調(diào)用 initData 函數(shù) 函數(shù)通過(guò) setCount 設(shè)置值觸發(fā)更新，一旦更新 useEffect 又會(huì)在渲染的最后執(zhí)行，這樣就照成了 死循環(huán)

所以 你應(yīng)該這樣寫(xiě) ,傳入 useEffect 第二個(gè)參數(shù) 空數(shù)組，代表組件渲染過(guò)程中只執(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 重復(fù)的 useEffect

示例2 ： 當(dāng)我們?cè)诮M件渲染的過(guò)程中 ，如果你寫(xiě)了多個(gè)useEffect 它會(huì)怎么做 ？

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

想當(dāng)然 ， 它不會(huì)覆蓋前面的 useEffect ，會(huì)根據(jù)你的 編寫(xiě)順序進(jìn)行收集，然后循環(huán)執(zhí)行(當(dāng)然這只是我的猜測(cè)，暫時(shí)還沒(méi)看react源碼)

3 ：依賴值觸發(fā)回調(diào)

當(dāng)你想去依賴某些變量的時(shí)候去觸發(fā)回調(diào)函數(shù)，你可以這樣。

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

當(dāng)你的第二個(gè)參數(shù)是數(shù)組，并且是依賴項(xiàng)，組件初次渲染也會(huì)執(zhí)行，這是為什么呢 ？

解答 ： 如果從 react useState Hook 來(lái)說(shuō)，也就是 react 將你傳入的 默認(rèn)值 給你重新賦值了，所以發(fā)生了變化，因此 useEffect 發(fā)生了更新

4 ：useEffect 的返回值

當(dāng)useEffect 傳入的 回調(diào)函數(shù)有返回值時(shí)并且為一個(gè) 函數(shù)的時(shí)候，它會(huì)怎么做？

import { useEffect, useState } from 'react';const Room = () => { useEffect(() => { console.log('子組件渲染完成') return () => { console.log('子組件useeffect 回調(diào)函數(shù)執(zhí)行') } }, []) return (<div> 這是我的房間 ， 大家一起來(lái)玩呀 </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函數(shù) 的返回值 如果是函數(shù)時(shí) 它會(huì)在組件銷毀的時(shí)候自動(dòng)回調(diào)該函數(shù)，你可以在該函數(shù)中做一些清理操作，等等

結(jié)束啦

好了，最后到這次本章了解的知識(shí)就到此結(jié)束了，如果有哪里寫(xiě)的不對(duì)的地方或者有更好的使用方式，歡迎大家在評(píng)論區(qū)留言！

到此這篇關(guān)于React中的useEffect四種用法分享的文章就介紹到這了,更多相關(guān)React useEffect用法內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！