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

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

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

我們先來說說 第一種用法

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

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

錯誤示例

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

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

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

所以 你應(yīng)該這樣寫 ,傳入 useEffect 第二個參數(shù) 空數(shù)組，代表組件渲染過程中只執(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)我們在組件渲染的過程中 ，如果你寫了多個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

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

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

當(dāng)你想去依賴某些變量的時候去觸發(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)你的第二個參數(shù)是數(shù)組，并且是依賴項(xiàng)，組件初次渲染也會執(zhí)行，這是為什么呢 ？

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

4 ：useEffect 的返回值

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

import { useEffect, useState } from 'react';const Room = () => { useEffect(() => { console.log('子組件渲染完成') return () => { console.log('子組件useeffect 回調(diào)函數(shù)執(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函數(shù) 的返回值 如果是函數(shù)時 它會在組件銷毀的時候自動回調(diào)該函數(shù)，你可以在該函數(shù)中做一些清理操作，等等

結(jié)束啦

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

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