React-hooks中的useEffect使用步驟
useEffect 永遠是在 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.基礎使用
使用步驟
- 導入
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 = `點擊了${count}次`;
});
return (
<div>
<button onClick={() => setCount(count + 1)}>點擊{count}次</button>
</div>
)
}3.依賴項控制
副作用執(zhí)行時機
1.默認狀態(tài)(無依賴項)
上邊的示例中，組件初始化時先觸發(fā)一次(console出內(nèi)容)，之后每次點擊按鈕，都會觸發(fā) 副作用。
useEffect 可執(zhí)行多次。
2.依賴項 為空
useEffect 函數(shù)還可以接收第二個參數(shù)，作為該副作用的依賴項，當?shù)诙€參數(shù) 傳入一個空數(shù)組[] 時，表明只有 組件初始化的時候執(zhí)行一次：
咱們對上邊的案例做下 微調(diào)
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("觸發(fā)副作用");
document.title = `點擊了${count}次`;
}, []); // 注意這里，傳入 []
return (
<div>
<button onClick={() => setCount(count + 1)}>點擊{count}次</button>
</div>
)
}
可以看到當點擊按鈕時，title 不再改變。
3.依賴特定項
當依賴項數(shù)組中傳入值時，那么該副作用會在 組件初始化的時候執(zhí)行一次，依賴的特定項變化時會再次執(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>當前次數(shù)：{count}</p>
<p><button onClick={() => setCount(count + 1)}>累計</button></p>
<p><button onClick={() => setName("杜甫")}>改名{name}</button></p>
</>
)
}如上，當我們點擊 “累計” 按鈕時，會console內(nèi)容，title也會改變，但是我們點擊 “改名”時，不會發(fā)生變化，就是因為我們在依賴項數(shù)組中傳入了 “count” 而沒有 “name”。
4.注意事項
只要在 useEffect 回調(diào)函數(shù)中用到的數(shù)據(jù)狀態(tài)就應該出現(xiàn)在依賴項數(shù)組中聲明，否則可能會有bug。
5.清除副作用
在組件被銷毀時，如果有些副作用操作需要被清理，比如常見的定時器等，可通過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 一個回調(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)}>點擊</button>
</div>
</div>
)
}6.發(fā)送網(wǎng)絡請求
不可以直接在 useEffect 的回調(diào)函數(shù)外層直接包裹await，因為異步會導致清理函數(shù)無法立即返回
?錯誤示例：
useEffect(async () => {
const res = await getData('url');
console.log(res);
})可在 useEffect 中定義一個請求數(shù)據(jù)方法，調(diào)用。
正確示例：
useEffect(() => {
async function initData() {
const res = await getData('url');
console.log(res);
}
initData()
}, []) // 僅組件初始化時調(diào)用到此這篇關(guān)于React-hooks中的useEffect的文章就介紹到這了,更多相關(guān)React-hooks useEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React.forwardRef的API中ref必須指向dom元素而不是React組件，通過一段示例代碼給大家介紹了React forwardRef使用方法及注意點還有一些特殊情況分析，感興趣的朋友跟隨小編一起看看吧2021-06-06
react-router?v6實現(xiàn)權(quán)限管理+自動替換頁面標題的案例
這篇文章主要介紹了react-router?v6實現(xiàn)權(quán)限管理+自動替換頁面標題,這次項目是有三種權(quán)限，分別是用戶，商家以及管理員，這次寫的權(quán)限管理是高級權(quán)限能訪問低級權(quán)限的所有頁面，但是低級權(quán)限不能訪問高級權(quán)限的頁面，需要的朋友可以參考下2023-05-05
React 中的事件，是對原生事件的封裝，叫做合成事件。這篇文章主要通過幾個簡單的示例為大家詳細介紹一下React中的合成事件，感興趣的可以了解一下2023-02-02
React如何使用sortablejs實現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實現(xiàn)拖拽排序問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在現(xiàn)代單頁應用（SPA）中,路由管理是至關(guān)重要的一部分,它不僅決定了用戶如何在頁面間切換,還直接影響到整個應用的性能和用戶體驗,這些看似不起眼的問題,往往會導致功能錯亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽路由變化,需要的朋友可以參考下2025-01-01
react中使用redux-persist做持久化儲存的過程記錄
這篇文章主要介紹了react中使用redux-persist做持久化儲存的相關(guān)資料,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了ReactRouterV6如何獲取當前路由參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
解決React報錯You provided a `checked` prop&n
這篇文章主要為大家介紹了React報錯You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
詳解React setState數(shù)據(jù)更新機制
這篇文章主要介紹了React setState數(shù)據(jù)更新機制的相關(guān)資料，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04
React中使用async validator進行表單驗證的實例代碼
react上進行表單驗證是很繁瑣的，在這里使用async-validator處理起來就變的很方便了，接下來通過本文給大家介紹React中使用async validator進行表單驗證的方法,需要的朋友可以參考下2018-08-08