React中常用的一些鉤子函數(shù)總結(jié)
useState
(類似Vue里面的data)
用于在函數(shù)組件中添加狀態(tài)。
返回一個包含當前狀態(tài)值和更新狀態(tài)值的數(shù)組。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
useEffect
(類似Vue里面的mounted、destroyed)
用于在函數(shù)組件中執(zhí)行副作用操作（如數(shù)據(jù)獲取、訂閱、手動DOM操作等）。
接收一個函數(shù)，該函數(shù)包含副作用邏輯，可以返回一個清理函數(shù)用于處理cleanup。
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
// Cleanup 函數(shù)（可選）
return () => {
// 清理邏輯...
};
}, []); // 依賴項為空數(shù)組表示僅在組件掛載和卸載時運行
}
依賴項
useEffect的第二個參數(shù)是一個依賴項數(shù)組，用于指定哪些變量的變化會觸發(fā) useEffect 中的副作用函數(shù)的重新執(zhí)行。這個依賴項數(shù)組的目的是幫助 Reac t優(yōu)化性能，確保副作用函數(shù)僅在依賴項發(fā)生變化時執(zhí)行，而不是在每次渲染時都執(zhí)行。
為什么需要依賴項數(shù)組？
避免重復(fù)執(zhí)行： 如果沒有依賴項數(shù)組，副作用函數(shù)會在每次組件重新渲染時都被調(diào)用，這可能導(dǎo)致不必要的性能開銷。
處理異步操作和副作用： 在 useEffect 中，我們可能會涉及異步操作、訂閱事件等副作用，而這些副作用可能與組件的狀態(tài)或?qū)傩韵嚓P(guān)。使用依賴項數(shù)組可以確保我們在副作用函數(shù)中訪問到的狀態(tài)和屬性是最新的。
依賴項數(shù)組的不同情況
空數(shù)組
如果依賴項數(shù)組為空，副作用函數(shù)僅在組件掛載和卸載時執(zhí)行，相當于類似于類組件中的componentDidMount和componentWillUnmount。
useEffect(() => {
// 在組件掛載時執(zhí)行
return () => {
// 在組件卸載時執(zhí)行
};
}, []);
有依賴項
如果依賴項數(shù)組不為空，副作用函數(shù)將在組件掛載時執(zhí)行一次，并在依賴項發(fā)生變化時執(zhí)行。
useEffect(() => {
// 在組件掛載時執(zhí)行
// 在依賴項發(fā)生變化時執(zhí)行
return () => {
// 在組件卸載時執(zhí)行
};
}, [dependency1, dependency2]);
沒有依賴項數(shù)組
如果省略依賴項數(shù)組，副作用函數(shù)將在每次組件重新渲染時都執(zhí)行，這可能導(dǎo)致性能問題和不必要的副作用。
useEffect(() => {
// 在每次組件重新渲染時執(zhí)行
return () => {
// 在每次組件重新渲染時執(zhí)行清理邏輯
};
});
注意事項
避免無限循環(huán)： 當使用依賴項數(shù)組時，確保依賴項數(shù)組中的變量不會在useEffect中被修改，否則可能導(dǎo)致無限循環(huán)。
不要濫用空依賴項數(shù)組： 雖然空依賴項數(shù)組可以確保useEffect僅在組件掛載和卸載時執(zhí)行，但在一些情況下，可能需要仔細考慮是否真的需要空依賴項數(shù)組。
useMemo
(類似Vue里面computed)
useMemo用于記憶（緩存）計算結(jié)果，并在依賴項變化時重新計算。
這有助于避免不必要的重復(fù)計算，提高性能。
import React, { useMemo } from 'react';
function ExpensiveComponent({ prop1, prop2 }) {
// 使用 useMemo 緩存計算結(jié)果
const result = useMemo(() => {
// 進行昂貴的計算或處理
return prop1 + prop2;
}, [prop1, prop2]); // 依賴項數(shù)組
return <p>Result: {result}</p>;
}
useCallback
(類似Vue里面watch)
用于緩存回調(diào)函數(shù)，避免在每次渲染時重新創(chuàng)建。
接收一個回調(diào)函數(shù)和依賴項數(shù)組，返回緩存后的回調(diào)函數(shù)。
useCallback的依賴項參數(shù)用于指定哪些變量的變化會導(dǎo)致生成新的回調(diào)函數(shù)。
import React, { useState, useCallback } from 'react';
function MemoizedComponent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
// 使用 count 進行邏輯處理
console.log(count);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<ChildComponent onClick={handleClick} />
</div>
);
}
function ChildComponent({ onClick }) {
// 使用緩存后的回調(diào)函數(shù)
return <button onClick={onClick}>Click me</button>;
}
在這個例子中，useCallback緩存了handleClick回調(diào)函數(shù)，并且指定了依賴項數(shù)組為[count]。這意味著只有當count發(fā)生變化時，handleClick才會生成新的回調(diào)函數(shù)。
依賴項
為什么需要依賴項數(shù)組？
避免不必要的重新創(chuàng)建： 如果沒有依賴項數(shù)組，每次組件重新渲染時都會生成新的回調(diào)函數(shù)，即使函數(shù)體內(nèi)的邏輯不依賴于任何變量的變化。通過指定依賴項數(shù)組，可以控制在什么情況下生成新的回調(diào)函數(shù)。
確保閉包內(nèi)的值是最新的： 如果回調(diào)函數(shù)內(nèi)部引用了某些狀態(tài)或?qū)傩?，確保依賴項數(shù)組包含這些狀態(tài)或?qū)傩裕源_保閉包內(nèi)的值是最新的。
注意事項
空依賴項數(shù)組： 與useEffect類似，如果依賴項數(shù)組為空，表示回調(diào)函數(shù)不依賴于任何外部變量，它將永遠只生成一次。
const handleClick = useCallback(() => {
// 處理點擊事件
}, []); // 空依賴項數(shù)組
謹慎處理依賴項： 確保依賴項數(shù)組中的變量是正確的，否則可能導(dǎo)致回調(diào)函數(shù)不會在預(yù)期的時候重新生成。
性能考慮： 在大型應(yīng)用中，使用useCallback可能有助于性能優(yōu)化，但不要濫用。只有在明確存在性能問題時，才應(yīng)該考慮使用useCallback。
useReducer
(Vuex 中的 mutations)
雖然 useReducer 和 mutations 有一些區(qū)別，但它們都是用于管理組件狀態(tài)的工具。
狀態(tài)管理： useReducer 用于在函數(shù)組件中管理復(fù)雜的狀態(tài)邏輯。它可以替代 useState，特別適用于處理具有復(fù)雜更新邏輯或依賴前一個狀態(tài)的狀態(tài)。
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
useContext
(類似Vue里面的Provider)
用于在函數(shù)組件中訪問上下文（context）。
上下文允許在組件樹中直接傳遞數(shù)據(jù)，而不必通過逐層傳遞 props。
useContext 使得在組件中獲取上下文數(shù)據(jù)變得非常方便。
創(chuàng)建上下文對象
首先，需要創(chuàng)建一個上下文對象，通過 React.createContext：
import React, { createContext } from 'react';
const MyContext = createContext();
這將創(chuàng)建一個包含 Provider 和 Consumer 的上下文對象。Provider 用于提供上下文數(shù)據(jù)，而 Consumer 用于消費該數(shù)據(jù)。
使用 useContext 獲取上下文數(shù)據(jù)
在組件中使用 useContext 鉤子，傳入上下文對象，即可獲取上下文數(shù)據(jù)。
import React, { useContext } from 'react';
const MyComponent = () => {
const contextValue = useContext(MyContext);
return <p>{contextValue}</p>;
};
在這個例子中，contextValue 就是從 MyContext 上下文中獲取的值。
提供上下文數(shù)據(jù)
使用 Provider 組件來提供上下文數(shù)據(jù)。Provider 接收一個 value 屬性，該屬性的值將成為整個組件樹中使用該上下文的組件能夠獲取的值。
const App = () => {
return (
<MyContext.Provider value="Hello, Context!">
<MyComponent />
</MyContext.Provider>
);
};
useRef
(類似Vue里面的ref)
用于在函數(shù)組件中獲取對 DOM 元素或自定義組件實例的引用。
import React, { useRef, useEffect } from 'react';
function MyComponent() {
// 創(chuàng)建一個 ref 對象
const myRef = useRef(null);
// 使用 ref 對象引用 DOM 元素
useEffect(() => {
myRef.current.focus();
}, []);
return <input ref={myRef} />;
}
以上就是React中常用的一些鉤子函數(shù)總結(jié)的詳細內(nèi)容，更多關(guān)于React鉤子函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
一文詳解ReactNative狀態(tài)管理redux-toolkit使用
這篇文章主要為大家介紹了ReactNative狀態(tài)管理redux-toolkit使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家詳細介紹了react實現(xiàn)動態(tài)表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
MUI是一款基于React的UI組件庫，可以方便地構(gòu)建美觀的用戶界面，使用MUI的DataTable組件和分頁器組件可以輕松實現(xiàn)用戶列表分頁功能，這篇文章使用MUI庫實現(xiàn)了用戶列表分頁功能，感興趣的同學(xué)可以參考下文2023-05-05
這篇文章主要為大家詳細介紹了React+ts實現(xiàn)二級聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
詳解React如何使用??useReducer???高階鉤子來管理狀態(tài)
useReducer是React中的一個鉤子,用于替代?useState來管理復(fù)雜的狀態(tài)邏輯,本文將詳細介紹如何在React中使用?useReducer高階鉤子來管理狀態(tài),感興趣的可以了解下2025-02-02
React ts模式使用http-proxy-middleware代理時訪問報404問題
這篇文章主要介紹了React ts模式使用http-proxy-middleware代理時訪問報404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實例分析
這篇文章主要介紹了React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程,結(jié)合具體實例形式分析了虛擬dom的基本原理與實現(xiàn)方法,需要的朋友可以參考下2023-05-05
剛好手上有一個要實現(xiàn)文字跑馬燈的react項目，然后ant-design上面沒有這個組件，于是只能自己手擼一個，文中的實現(xiàn)方法講解詳細，希望對大家有所幫助2023-01-01
react實現(xiàn)導(dǎo)航欄二級聯(lián)動
這篇文章主要為大家詳細介紹了react實現(xiàn)導(dǎo)航欄二級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了React Router6.x路由表封裝的兩種寫法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01