快捷導(dǎo)航

react中的useEffect()的使用詳解

更新時間：2024年05月24日 12:03:26 作者：小劉，劉不劉

useEffect()是react中的hook函數(shù),作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項數(shù)組不同的區(qū)別,對react useEffect()使用相關(guān)知識感興趣的朋友一起看看吧

useEffect()是react中的hook函數(shù)，作用是用于創(chuàng)建由渲染本身引起的操作，而不是事件的觸發(fā)，比如Ajax請求，DOM的更改

首先useEffect()是個函數(shù)，接受兩個參數(shù)，第一個參數(shù)是一個方法，第二個參數(shù)是數(shù)組稱為依賴項數(shù)組，可以沒有。第二個參數(shù)的不同會影響第一個參數(shù)方法的使用

依賴項數(shù)組不同的區(qū)別

另外還有一種情況就是清除useEffect（）的副作用，直接在第一個參數(shù)函數(shù)里面寫一個return一個函數(shù)，就會在組件卸載的時候自動清理

import { useEffect, useState } from "react"
function Son(){
    // 開啟一個定時器
    useEffect(()=>{
       const timer=  setInterval(()=>{
            console.log("定時器");
        },1000)
        return ()=>{
            clearInterval(timer)
        }
    },[])
    return (
        <>
            <div>這是 son組件
            </div>
        </>
    )
}
function App(){
    // 1.沒有依賴項的時候 初始會觸發(fā) 組件更新會觸發(fā)
    const [count,setCount] = useState(0)
    // useEffect(()=>{
    //     console.log("副作用函數(shù)執(zhí)行與否");
    // })
      // 2.當(dāng)依賴項為空數(shù)組的時候 只會在初始時觸發(fā) 
    //   useEffect(()=>{
    //     console.log("副作用函數(shù)執(zhí)行 []");
    // },[])
    // 3.傳入特定的依賴項  初始時觸發(fā) 依賴項變化時觸發(fā)
     useEffect(()=>{
        console.log("副作用函數(shù)執(zhí)行 []");
    },[count])
    // 4.清除useEffect的副作用 通過在第一個參數(shù)函數(shù)中return一個函數(shù) 清除副作用
    // 最常用的常見就是在組件卸載時自動執(zhí)行
    const [show,setShow] = useState(true)
    return (
        <>
            <div>useEffect的使用 根據(jù)依賴項的不同</div>
            <button onClick={()=>setCount(count+1)}>{count}</button>
            <div>
                {show&&<Son/>}
                <button onClick={()=>setShow(false)}>卸載son組件</button>
            </div>
        </>
    )
}
export default App

到此這篇關(guān)于react中的useEffect()的使用的文章就介紹到這了,更多相關(guān)react useEffect()使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

使用VScode 插件debugger for chrome 調(diào)試react源碼的方法
這篇文章主要介紹了使用VScode 插件debugger for chrome 調(diào)試react源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
react高階組件添加和刪除props
這篇文章主要介紹了react高階組件添加和刪除props，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
React?Native?的動態(tài)列表方案探索詳解
這篇文章主要為大家介紹了React?Native?的動態(tài)列表方案探索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
js中自定義react數(shù)據(jù)驗證組件實例詳解
我們在做前端表單提交時，經(jīng)常會遇到要對表單中的數(shù)據(jù)進行校驗的問題。這篇文章主要介紹了js中自定義react數(shù)據(jù)驗證組件 ,需要的朋友可以參考下
2018-10-10
react自適應(yīng)布局px轉(zhuǎn)rem實現(xiàn)示例詳解
這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
詳解react實現(xiàn)插槽slot功能
本文主要介紹了詳解react實現(xiàn)插槽slot功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-09-09
React Hooks獲取數(shù)據(jù)實現(xiàn)方法介紹
這篇文章主要介紹了react hooks獲取數(shù)據(jù),文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進行綁定，實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-10-10
react實現(xiàn)復(fù)選框全選和反選組件效果
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)復(fù)選框全選和反選組件效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
React State狀態(tài)與生命周期的實現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-03-03
React Hook 監(jiān)聽localStorage更新問題
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10