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ù)組？
避免重復執(zhí)行： 如果沒有依賴項數(shù)組，副作用函數(shù)會在每次組件重新渲染時都被調(diào)用，這可能導致不必要的性能開銷。
處理異步操作和副作用： 在 useEffect 中，我們可能會涉及異步操作、訂閱事件等副作用，而這些副作用可能與組件的狀態(tài)或?qū)傩韵嚓P。使用依賴項數(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í)行，這可能導致性能問題和不必要的副作用。
useEffect(() => {
// 在每次組件重新渲染時執(zhí)行
return () => {
// 在每次組件重新渲染時執(zhí)行清理邏輯
};
});
注意事項
避免無限循環(huán)： 當使用依賴項數(shù)組時，確保依賴項數(shù)組中的變量不會在useEffect中被修改，否則可能導致無限循環(huán)。
不要濫用空依賴項數(shù)組： 雖然空依賴項數(shù)組可以確保useEffect僅在組件掛載和卸載時執(zhí)行，但在一些情況下，可能需要仔細考慮是否真的需要空依賴項數(shù)組。
useMemo
(類似Vue里面computed)
useMemo用于記憶（緩存）計算結(jié)果，并在依賴項變化時重新計算。
這有助于避免不必要的重復計算，提高性能。
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ù)用于指定哪些變量的變化會導致生成新的回調(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ù)組中的變量是正確的，否則可能導致回調(diào)函數(shù)不會在預期的時候重新生成。
性能考慮： 在大型應用中，使用useCallback可能有助于性能優(yōu)化，但不要濫用。只有在明確存在性能問題時，才應該考慮使用useCallback。
useReducer
(Vuex 中的 mutations)
雖然 useReducer 和 mutations 有一些區(qū)別，但它們都是用于管理組件狀態(tài)的工具。
狀態(tài)管理： useReducer 用于在函數(shù)組件中管理復雜的狀態(tài)邏輯。它可以替代 useState，特別適用于處理具有復雜更新邏輯或依賴前一個狀態(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)容，更多關于React鉤子函數(shù)的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了React中的CSS局部引入過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了在React中this容易遇到的問題總結(jié)，文中有詳細的示例代碼，希望對大家有一定的幫助,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了React?開發(fā)中遇到的具名插槽的函數(shù)用法,文中的示例代碼講解詳細,具有一定的學習價值,有興趣的小伙伴可以了解一下2023-11-11
這篇文章主要介紹了React通過classnames庫添加類,在vue中添加class是一件非常簡單的事情，你可以通過傳入一個對象, 通過布爾值決定是否添加類，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了react中useState改變值不渲染的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了使用Jenkins部署React項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
詳解React-Native全球化多語言切換工具庫react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語言切換工具庫react-native-i18n,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了React開發(fā)進階redux saga使用原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了React Umi國際化配置方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-04-04
本文主要介紹了實現(xiàn)React服務端渲染,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01