React中的useEffect四種用法分享

目錄什么是 useEffect ?1 ： useEffect 中 觸發更新2 ： 用法2 重復的 useEffect3 ：依賴值觸發回調4 ：useEffect 的返回值結束啦什么是 useEffect ?

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

什么意思 ？ 個人理解就是 它能根據不同的依賴值或者返回值，在不同的時機進行執行。

我們先來說說 第一種用法

1 ： useEffect 中 觸發更新

示例1 ： 當我們在組件創建的過程，自動執行某些操作的時候 ， 那我們可以在函數式組件中這樣

錯誤示例

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

如果你這種用 useEffect 你會發現 什么問題 ？

當我們組件 渲染完成去執行 useEffect 調用 initData 函數 函數通過 setCount 設置值觸發更新，一旦更新 useEffect 又會在渲染的最后執行，這樣就照成了 死循環

所以 你應該這樣寫 ,傳入 useEffect 第二個參數 空數組，代表組件渲染過程中只執行一次

正確示例

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 ，會根據你的 編寫順序進行收集，然后循環執行(當然這只是我的猜測，暫時還沒看react源碼)

3 ：依賴值觸發回調

當你想去依賴某些變量的時候去觸發回調函數，你可以這樣。

import { useEffect, useState } from 'react';function Effect() { const [count, setCount] = useState(0) useEffect(() => { console.log('count發生了變化最新值為' + count); }, [count]) return (<div> <div> {count} </div> <button onClick={() => setCount(count + 1)}>加1</button> </div>)}export default Effect

當你的第二個參數是數組，并且是依賴項，組件初次渲染也會執行，這是為什么呢 ？

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

4 ：useEffect 的返回值

當useEffect 傳入的 回調函數有返回值時并且為一個 函數的時候，它會怎么做？

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

結束啦

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

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