react常用hook的實現(xiàn)示例
引言??
自 React 16.8 起，Hook 的引入徹底改變了函數(shù)組件的開發(fā)方式。Hook 讓函數(shù)組件擁有了管理狀態(tài)、處理副作用、訪問上下文等能力，大大提高了代碼的可復用性和可讀性。
一、useState—— 管理組件狀態(tài)的基礎
useState 是最常用的 Hook，用于在函數(shù)組件中聲明狀態(tài)變量。
用法示例：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 初始值為0
return (
<button onClick={() => setCount(count + 1)}>
點擊次數(shù)：{count}
</button>
);
}
特點：
- 每次調(diào)用
setCount都會觸發(fā)組件重新渲染。 useState可以接收一個函數(shù)作為初始值（惰性初始化）。
二、useEffect—— 副作用處理器
useEffect 用于處理副作用，例如：數(shù)據(jù)獲取、事件監(jiān)聽、DOM 操作等。
用法示例：
import { useEffect } from 'react';
function Timer() {
useEffect(() => {
const id = setInterval(() => {
console.log('tick');
}, 1000);
return () => clearInterval(id); // 清理定時器
}, []); // 僅在組件掛載時執(zhí)行一次
}
特點：
- 第一個參數(shù)是副作用函數(shù)。
- 第二個參數(shù)是依賴數(shù)組，控制副作用的執(zhí)行時機。
- 返回函數(shù)用于清理資源。
注意
在 React 18 及更高版本中，useEffect 在開發(fā)模式下會故意執(zhí)行兩次。
- 主要原因
嚴格模式(Strict Mode)的影響：React 18 在開發(fā)模式下默認啟用嚴格模式，嚴格模式下會故意掛載、卸載、再重新掛載組件，目的是幫助開發(fā)者發(fā)現(xiàn)副作用中的錯誤，模擬用戶行為（如快速切換頁面），確保組件的副作用能夠正確處理清理和重新設置。
- 具體表現(xiàn)
useEffect(() => {
console.log("Effect ran"); // 在開發(fā)模式下會打印兩次
return () => {
console.log("Cleanup"); // 也會執(zhí)行兩次
};
}, []);
三、useRef—— 引用 DOM 或保存可變值
useRef 用于獲取 DOM 元素的引用，或在組件間保存一個不會觸發(fā)重新渲染的變量。
用法示例：
import { useRef } from 'react';
function InputFocus() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus(); // 直接操作 DOM
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>聚焦輸入框</button>
</>
);
}
特點：
ref.current可以持久保存任意值。- 常用于處理定時器、緩存值等不需觸發(fā)更新的場景。
四、useContext—— 跨組件共享狀態(tài)
配合 React 的 Context API，useContext 可讓你在任意子組件中訪問全局數(shù)據(jù)。
用法示例：
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext); // 獲取上下文值
return <button className={theme}>主題按鈕</button>;
}
特點：
- 避免多層 props 傳遞。
useContext會訂閱 context 變化，自動更新。
五、useMemo—— 緩存計算結(jié)果
useMemo 用于緩存耗時計算，避免不必要的重復運算。
用法示例：
import { useMemo } from 'react';
function ExpensiveComponent({ input }) {
const result = useMemo(() => {
return expensiveCalculation(input);
}, [input]);
return <div>{result}</div>;
}
特點：
- 只有依賴項發(fā)生變化時才會重新計算。
- 用于優(yōu)化性能，但請勿濫用。
六、useCallback—— 緩存函數(shù)引用
useCallback 返回一個記憶化的函數(shù)引用，用于避免子組件重復渲染。
用法示例：
import { useCallback } from 'react';
function Parent() {
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
return <Child onClick={handleClick} />;
}
特點：
- 與
useMemo類似，但用于緩存函數(shù)。 - 在需要傳遞穩(wěn)定函數(shù)引用時使用（如依賴項、子組件 props）。
七、useReducer—— 更復雜的狀態(tài)邏輯管理
useReducer 更適合處理狀態(tài)變化邏輯復雜或狀態(tài)結(jié)構(gòu)較大的情況。
用法示例：
import { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<button onClick={() => dispatch({ type: 'increment' })}>
{state.count}
</button>
);
}
八、總結(jié)
- 使用
useState管理簡單狀態(tài)，useReducer管理復雜狀態(tài)。 - 使用
useEffect時確保清理副作用，避免內(nèi)存泄漏。 - 使用
useMemo和useCallback僅在性能瓶頸時啟用。 - 將重復邏輯封裝成自定義 Hook 提高復用性。
結(jié)語??
React Hook 為函數(shù)組件帶來了強大的功能和靈活性。掌握這些常用 Hook，不僅可以簡化代碼結(jié)構(gòu)，還能提升應用的性能與可維護性。
到此這篇關(guān)于react常用hook的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)react常用hook內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用React+SpringBoot開發(fā)一個協(xié)同編輯的表格文檔實現(xiàn)步驟
隨著云計算和團隊協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡單的開發(fā)一個協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了react組件實例屬性state,有狀態(tài)state的組件稱作復雜組件,沒有狀態(tài)的組件稱為簡單組件，狀態(tài)里存儲數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動頁面的展示，本文結(jié)合實例代碼給大家詳細講解，需要的朋友可以參考下2023-02-02
詳解react-native WebView 返回處理(非回調(diào)方法可解決)
這篇文章主要介紹了詳解react-native WebView 返回處理(非回調(diào)方法可解決)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了React組件設計過程之仿抖音訂單組件的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
淺談react-router HashRouter和BrowserRouter的使用
本篇文章主要介紹了淺談react-router HashRouter和BrowserRouter的使用，具有一定的參考價值，有興趣的可以了解一下2017-12-12
這篇文章主要為大家介紹了React組件實例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
解決React報錯You provided a `checked` prop&n
這篇文章主要為大家介紹了React報錯You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React?Hooks的useState、useRef使用小結(jié)
React Hooks 是 React 16.8 版本引入的新特性，useState和useRef是兩個常用的Hooks，本文主要介紹了React?Hooks的useState、useRef使用，感興趣的可以了解一下2024-01-01
Hook是 React 16.8 的新增特性，它可以讓你在不編寫class的情況下使用state以及其他的React特性，這篇文章主要介紹了react中Hooks的理解和用法,需要的朋友可以參考下2023-05-05
react實現(xiàn)antd線上主題動態(tài)切換功能
這篇文章主要介紹了react實現(xiàn)antd線上主題動態(tài)切換功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08