React-hooks中的useEffect使用步驟
useEffect 永遠(yuǎn)是在 DOM渲染完成之后執(zhí)行
1.理解函數(shù)副作用
什么是副作用?
對于React組件來說，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動修改DOM、發(fā)送ajax請求）。
常見的副作用
- 數(shù)據(jù)請求（發(fā)送ajax）
- 手動修改 DOM
- localstorage操作
useEffect 函數(shù)的作用就是為react函數(shù)組件提供副作用
2.基礎(chǔ)使用
使用步驟
- 導(dǎo)入
useEffect函數(shù) - 調(diào)用
useEffect函數(shù)，并傳入回調(diào)函數(shù) - 在回調(diào)函數(shù)中編寫副作用處理
- 修改數(shù)據(jù)狀態(tài)
- 檢測副作用是否生效
示例代碼
import {useState, useEffect} from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("觸發(fā)副作用");
document.title = `點(diǎn)擊了${count}次`;
});
return (
<div>
<button onClick={() => setCount(count + 1)}>點(diǎn)擊{count}次</button>
</div>
)
}3.依賴項(xiàng)控制
副作用執(zhí)行時(shí)機(jī)
1.默認(rèn)狀態(tài)(無依賴項(xiàng))
上邊的示例中，組件初始化時(shí)先觸發(fā)一次(console出內(nèi)容)，之后每次點(diǎn)擊按鈕，都會觸發(fā) 副作用。
useEffect 可執(zhí)行多次。
2.依賴項(xiàng) 為空
useEffect 函數(shù)還可以接收第二個(gè)參數(shù)，作為該副作用的依賴項(xiàng)，當(dāng)?shù)诙€(gè)參數(shù) 傳入一個(gè)空數(shù)組[] 時(shí)，表明只有 組件初始化的時(shí)候執(zhí)行一次：
咱們對上邊的案例做下 微調(diào)
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("觸發(fā)副作用");
document.title = `點(diǎn)擊了${count}次`;
}, []); // 注意這里，傳入 []
return (
<div>
<button onClick={() => setCount(count + 1)}>點(diǎn)擊{count}次</button>
</div>
)
}
可以看到當(dāng)點(diǎn)擊按鈕時(shí)，title 不再改變。
3.依賴特定項(xiàng)
當(dāng)依賴項(xiàng)數(shù)組中傳入值時(shí)，那么該副作用會在 組件初始化的時(shí)候執(zhí)行一次，依賴的特定項(xiàng)變化時(shí)會再次執(zhí)行
function App() {
const [count, setCount] = useState(0);
const [name, setName] = useState('李白');
useEffect(() => {
console.log('觸發(fā)渲染')
document.title = `clicked ${count} times`;
console.log('name: ', {name});
},[count]) // 這里我們傳入 count，不傳name
return (
<>
<p>當(dāng)前次數(shù)：{count}</p>
<p><button onClick={() => setCount(count + 1)}>累計(jì)</button></p>
<p><button onClick={() => setName("杜甫")}>改名{name}</button></p>
</>
)
}如上，當(dāng)我們點(diǎn)擊 “累計(jì)” 按鈕時(shí)，會console內(nèi)容，title也會改變，但是我們點(diǎn)擊 “改名”時(shí)，不會發(fā)生變化，就是因?yàn)槲覀冊谝蕾図?xiàng)數(shù)組中傳入了 “count” 而沒有 “name”。
4.注意事項(xiàng)
只要在 useEffect 回調(diào)函數(shù)中用到的數(shù)據(jù)狀態(tài)就應(yīng)該出現(xiàn)在依賴項(xiàng)數(shù)組中聲明，否則可能會有bug。
5.清除副作用
在組件被銷毀時(shí)，如果有些副作用操作需要被清理，比如常見的定時(shí)器等，可通過useEffect return回調(diào)函數(shù) 的方式清理副作用。
語法如下：
useEffect(() => {
console.log('副作用函數(shù)執(zhí)行');
return () => {
console.log('清理副作用的函數(shù)執(zhí)行');
// 這里執(zhí)行 清理副作用的代碼
}
})
示例：
function Test() {
useEffect(() => {
let timer = setInterval(() => {
console.log('this is effect');
}, 1000)
// 這里return 一個(gè)回調(diào)函數(shù)，在函數(shù)中清除副作用
return () => {
clearInterval(timer);
}
})
return (
<div>Test</div>
)
}
function App() {
const [flag, setFlag] = useState(true);
return (
<div>
{flag ? <Test/> : null}
<div>
<button onClick={() => setFlag(!flag)}>點(diǎn)擊</button>
</div>
</div>
)
}6.發(fā)送網(wǎng)絡(luò)請求
不可以直接在 useEffect 的回調(diào)函數(shù)外層直接包裹await，因?yàn)?strong>異步會導(dǎo)致清理函數(shù)無法立即返回
?錯(cuò)誤示例：
useEffect(async () => {
const res = await getData('url');
console.log(res);
})可在 useEffect 中定義一個(gè)請求數(shù)據(jù)方法，調(diào)用。
正確示例：
useEffect(() => {
async function initData() {
const res = await getData('url');
console.log(res);
}
initData()
}, []) // 僅組件初始化時(shí)調(diào)用到此這篇關(guān)于React-hooks中的useEffect的文章就介紹到這了,更多相關(guān)React-hooks useEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
![React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent](http://img.jbzj.com/images/xgimg/bcimg0.png)
React報(bào)錯(cuò)Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報(bào)錯(cuò)Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
詳解使用React全家桶搭建一個(gè)后臺管理系統(tǒng)
本篇文章主要介紹了使用React全家桶搭建一個(gè)后臺管理系統(tǒng)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
React Native 混合開發(fā)多入口加載方式詳解
這篇文章主要介紹了React Native 混合開發(fā)多入口加載方式詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
詳解一個(gè)基于react+webpack的多頁面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁面應(yīng)用配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
使用React實(shí)現(xiàn)一個(gè)簡單的待辦事項(xiàng)列表的示例代碼
這篇文章我們將詳細(xì)講解如何建立一個(gè)這樣簡單的列表,文章通過代碼示例介紹的非常詳細(xì),對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
在Create React App中使用CSS Modules的方法示例
本文介紹了如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。2019-01-01
本文以簡潔為目標(biāo)，幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā)，通過實(shí)例代碼講解的很詳細(xì)，對React路由相關(guān)知識感興趣的朋友一起看看吧2021-05-05
Hook?是?React?16.8?的新增特性，它可以讓我們在不編寫class的情況下,?使用state以及其他的React特性(比如生命周期，這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11
使用react context 實(shí)現(xiàn)vue插槽slot功能
這篇文章主要介紹了使用react context 實(shí)現(xiàn)vue插槽slot功能，文中給大家介紹了vue的slot的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了React router基礎(chǔ)使用方法，React Router是React生態(tài)系統(tǒng)中最受歡迎的第三方庫之一，近一半的React項(xiàng)目中使用了React Router，下面就來看看如何在React項(xiàng)目中使用2023-04-04