react中的useEffect()的使用詳解
useEffect()是react中的hook函數(shù)，作用是用于創(chuàng)建由渲染本身引起的操作，而不是事件的觸發(fā)，比如Ajax請(qǐng)求，DOM的更改
首先useEffect()是個(gè)函數(shù)，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)方法，第二個(gè)參數(shù)是數(shù)組 稱為依賴項(xiàng)數(shù)組，可以沒(méi)有。第二個(gè)參數(shù)的不同會(huì)影響第一個(gè)參數(shù)方法的使用
依賴項(xiàng)數(shù)組不同的區(qū)別
另外還有一種情況就是清除useEffect（）的副作用，直接在第一個(gè)參數(shù)函數(shù)里面寫(xiě)一個(gè)return一個(gè)函數(shù)，就會(huì)在組件卸載的時(shí)候自動(dòng)清理
import { useEffect, useState } from "react"
function Son(){
// 開(kāi)啟一個(gè)定時(shí)器
useEffect(()=>{
const timer= setInterval(()=>{
console.log("定時(shí)器");
},1000)
return ()=>{
clearInterval(timer)
}
},[])
return (
<>
<div>這是 son組件
</div>
</>
)
}
function App(){
// 1.沒(méi)有依賴項(xiàng)的時(shí)候 初始會(huì)觸發(fā) 組件更新會(huì)觸發(fā)
const [count,setCount] = useState(0)
// useEffect(()=>{
// console.log("副作用函數(shù)執(zhí)行與否");
// })
// 2.當(dāng)依賴項(xiàng)為空數(shù)組的時(shí)候 只會(huì)在初始時(shí)觸發(fā)
// useEffect(()=>{
// console.log("副作用函數(shù)執(zhí)行 []");
// },[])
// 3.傳入特定的依賴項(xiàng) 初始時(shí)觸發(fā) 依賴項(xiàng)變化時(shí)觸發(fā)
useEffect(()=>{
console.log("副作用函數(shù)執(zhí)行 []");
},[count])
// 4.清除useEffect的副作用 通過(guò)在第一個(gè)參數(shù)函數(shù)中return一個(gè)函數(shù) 清除副作用
// 最常用的常見(jiàn)就是在組件卸載時(shí)自動(dòng)執(zhí)行
const [show,setShow] = useState(true)
return (
<>
<div>useEffect的使用 根據(jù)依賴項(xiàng)的不同</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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中useState的使用方法及注意事項(xiàng)
useState通過(guò)在函數(shù)組件里調(diào)用它來(lái)給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項(xiàng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
這篇文章主要介紹了React之PureComponent的使用作用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React如何使用錯(cuò)誤邊界(Error Boundaries)捕獲組件錯(cuò)誤
在 React 里,錯(cuò)誤邊界就像是一個(gè)“小衛(wèi)士”,專門負(fù)責(zé)在組件出現(xiàn)錯(cuò)誤時(shí)挺身而出,避免整個(gè)應(yīng)用因?yàn)橐粋€(gè)小錯(cuò)誤就崩潰掉,下面小編就來(lái)為大家介紹一下如何利用它捕獲組件錯(cuò)誤吧2025-03-03
路由管理的功能主要指的頁(yè)面跳轉(zhuǎn)、goBack、帶參數(shù)跳轉(zhuǎn)等功能,這篇文章主要給大家介紹了關(guān)于React Native自定義路由管理的相關(guān)資料,需要的朋友可以參考下2021-08-08
React Native驗(yàn)證碼倒計(jì)時(shí)工具類分享
這篇文章主要為大家分享了React Native驗(yàn)證碼倒計(jì)時(shí)工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了react實(shí)現(xiàn)電商商品列表的流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
react中的watch監(jiān)視屬性-useEffect介紹
這篇文章主要介紹了react中的watch監(jiān)視屬性-useEffect使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React通過(guò)hook實(shí)現(xiàn)封裝表格常用功能
這篇文章主要為大家詳細(xì)介紹了React通過(guò)hook封裝表格常用功能的使用,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-12-12