引言??

自 React 16.8 起，Hook 的引入徹底改變了函數(shù)組件的開發(fā)方式。Hook 讓函數(shù)組件擁有了管理狀態(tài)、處理副作用、訪問上下文等能力，大大提高了代碼的可復(fù)用性和可讀性。

一、useState—— 管理組件狀態(tài)的基礎(chǔ)

useState 是最常用的 Hook，用于在函數(shù)組件中聲明狀態(tài)變量。

用法示例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值為0

  return (
    <button onClick={() => setCount(count + 1)}>
      點(diǎn)擊次數(shù)：{count}
    </button>
  );
}

特點(diǎn)：

• 每次調(diào)用 setCount 都會(huì)觸發(fā)組件重新渲染。
• useState 可以接收一個(gè)函數(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); // 清理定時(shí)器
  }, []); // 僅在組件掛載時(shí)執(zhí)行一次
}

特點(diǎn)：

• 第一個(gè)參數(shù)是副作用函數(shù)。
• 第二個(gè)參數(shù)是依賴數(shù)組，控制副作用的執(zhí)行時(shí)機(jī)。
• 返回函數(shù)用于清理資源。

注意

在 React 18 及更高版本中，useEffect 在開發(fā)模式下會(huì)故意執(zhí)行兩次。

• 主要原因

嚴(yán)格模式(Strict Mode)的影響：React 18 在開發(fā)模式下默認(rèn)啟用嚴(yán)格模式，嚴(yán)格模式下會(huì)故意掛載、卸載、再重新掛載組件，目的是幫助開發(fā)者發(fā)現(xiàn)副作用中的錯(cuò)誤，模擬用戶行為（如快速切換頁面），確保組件的副作用能夠正確處理清理和重新設(shè)置。

• 具體表現(xiàn)

useEffect(() => {
  console.log("Effect ran"); // 在開發(fā)模式下會(huì)打印兩次
  
  return () => {
    console.log("Cleanup"); // 也會(huì)執(zhí)行兩次
  };
}, []);

三、useRef—— 引用 DOM 或保存可變值

useRef 用于獲取 DOM 元素的引用，或在組件間保存一個(gè)不會(huì)觸發(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>
    </>
  );
}

特點(diǎn)：

• ref.current 可以持久保存任意值。
• 常用于處理定時(shí)器、緩存值等不需觸發(fā)更新的場景。

四、useContext—— 跨組件共享狀態(tài)

配合 React 的 Context API，useContext 可讓你在任意子組件中訪問全局?jǐn)?shù)據(jù)。

用法示例：

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext); // 獲取上下文值
  return <button className={theme}>主題按鈕</button>;
}

特點(diǎn)：

• 避免多層 props 傳遞。
• useContext 會(huì)訂閱 context 變化，自動(dòng)更新。

五、useMemo—— 緩存計(jì)算結(jié)果

useMemo 用于緩存耗時(shí)計(jì)算，避免不必要的重復(fù)運(yùn)算。

用法示例：

import { useMemo } from 'react';

function ExpensiveComponent({ input }) {
  const result = useMemo(() => {
    return expensiveCalculation(input);
  }, [input]);

  return <div>{result}</div>;
}

特點(diǎn)：

• 只有依賴項(xiàng)發(fā)生變化時(shí)才會(huì)重新計(jì)算。
• 用于優(yōu)化性能，但請勿濫用。

六、useCallback—— 緩存函數(shù)引用

useCallback 返回一個(gè)記憶化的函數(shù)引用，用于避免子組件重復(fù)渲染。

用法示例：

import { useCallback } from 'react';

function Parent() {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <Child onClick={handleClick} />;
}

特點(diǎn)：

• 與 useMemo 類似，但用于緩存函數(shù)。
• 在需要傳遞穩(wěn)定函數(shù)引用時(shí)使用（如依賴項(xiàng)、子組件 props）。

七、useReducer—— 更復(fù)雜的狀態(tài)邏輯管理

useReducer 更適合處理狀態(tài)變化邏輯復(fù)雜或狀態(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 管理復(fù)雜狀態(tài)。
• 使用 useEffect 時(shí)確保清理副作用，避免內(nèi)存泄漏。
• 使用 useMemo 和 useCallback 僅在性能瓶頸時(shí)啟用。
• 將重復(fù)邏輯封裝成自定義 Hook 提高復(fù)用性。

結(jié)語??

React Hook 為函數(shù)組件帶來了強(qiáng)大的功能和靈活性。掌握這些常用 Hook，不僅可以簡化代碼結(jié)構(gòu)，還能提升應(yīng)用的性能與可維護(hù)性。

到此這篇關(guān)于react常用hook的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)react常用hook內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論