快捷導(dǎo)航

React中Hooks邏輯復(fù)用的實(shí)現(xiàn)

更新時(shí)間：2026年03月22日 15:55:58 作者：發(fā)現(xiàn)一只大呆瓜

在React開(kāi)發(fā)中,Hooks的出現(xiàn)徹底改變了邏輯復(fù)用的方式,本文就來(lái)介紹一下Hooks邏輯復(fù)用的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在 React 開(kāi)發(fā)中，Hooks 的出現(xiàn)徹底改變了邏輯復(fù)用的方式。它讓我們能夠?qū)?fù)雜的、可復(fù)用的邏輯從 UI 組件中抽離，實(shí)現(xiàn)真正的“關(guān)注點(diǎn)分離”。本文將分享 Hooks 的核心原則，并提供 4 個(gè)在真實(shí)業(yè)務(wù)場(chǎng)景中封裝的實(shí)戰(zhàn)案例。

一、 Hooks 核心

1. 概念理解

Hooks 本質(zhì)上是將組件間共享的邏輯抽離并封裝成的特殊函數(shù)。

2. 使用“紅線(xiàn)”：規(guī)則與原理

命名規(guī)范：必須以 use 開(kāi)頭（如 useChat），這不僅是約定，也是靜態(tài)檢查工具（ESLint）識(shí)別 Hook 的依據(jù)。
調(diào)用位置：嚴(yán)禁在循環(huán)、條件判斷或嵌套函數(shù)中調(diào)用 Hook。

底層原理： React 內(nèi)部并不是通過(guò)“變量名”來(lái)記錄 Hook 狀態(tài)的，而是通過(guò)鏈表。每次渲染時(shí)，React 嚴(yán)格依賴(lài) Hook 的調(diào)用順序來(lái)查找對(duì)應(yīng)的狀態(tài)。

注意：如果在 if 語(yǔ)句中調(diào)用 Hook，一旦條件不成立導(dǎo)致某次渲染跳過(guò)了該 Hook，整個(gè)鏈表的指針就會(huì)錯(cuò)位，導(dǎo)致?tīng)顟B(tài)讀取異常。

二、實(shí)戰(zhàn)：自定義 Hooks 封裝

1. AI 場(chǎng)景：消息點(diǎn)贊/點(diǎn)踩邏輯 (useChatEvaluate)

在 AI 對(duì)話(huà)系統(tǒng)中，消息評(píng)價(jià)是通用功能。我們需要處理：狀態(tài)切換（點(diǎn)贊 -> 取消點(diǎn)贊）、單選邏輯、以及異步接口調(diào)用。

import React, { useState } from 'react';

// 模擬接口
const public_evaluateMessage = async (params: any) => ({ data: true });

type EvaluateType = "GOOD" | "BAD" | "NONE";

export const useChatEvaluate = (initialType: EvaluateType = "NONE") => {
  const [ratingType, setRatingType] = useState<EvaluateType>(initialType);

  const evaluateMessage = async (contentId: number, type: "GOOD" | "BAD") => {
    let newEvaluateType: EvaluateType;

    // 邏輯：如果點(diǎn)擊已選中的類(lèi)型，則取消選中(NONE)；否則切換到新類(lèi)型
    if (type === "GOOD") {
      newEvaluateType = ratingType === "GOOD" ? "NONE" : "GOOD";
    } else {
      newEvaluateType = ratingType === "BAD" ? "NONE" : "BAD";
    }

    try {
      const res = await public_evaluateMessage({
        contentId,
        ratingType: newEvaluateType,
        content: "",
      });

      if (res.data === true) {
        setRatingType(newEvaluateType);
      }
    } catch (error) {
      console.error("評(píng)價(jià)失敗:", error);
    }
  };

  return { ratingType, evaluateMessage };
};

// 使用示例
const ChatMessage: React.FC<{ id: number }> = ({ id }) => {
  const { ratingType, evaluateMessage } = useChatEvaluate();
  return (
    <button onClick={() => evaluateMessage(id, "GOOD")}>
      {ratingType === "GOOD" ? "?? 已點(diǎn)贊" : "?? 點(diǎn)贊"}
    </button>
  );
};

2. 響應(yīng)式布局：屏幕尺寸監(jiān)聽(tīng) (useMediaSize)

在響應(yīng)式系統(tǒng)中，封裝一個(gè)能根據(jù)窗口寬度自動(dòng)切換“設(shè)備類(lèi)型”的 Hook，可以極大地簡(jiǎn)化響應(yīng)式開(kāi)發(fā)。

import { useState, useEffect, useMemo } from 'react';

export enum MediaType {
  mobile = 'mobile',
  tablet = 'tablet',
  pc = 'pc',
}

const useMediaSize = (): MediaType => {
  const [width, setWidth] = useState<number>(globalThis.innerWidth);

  useEffect(() => {
    const handleWindowResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleWindowResize);
    // 記得清理事件監(jiān)聽(tīng)
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  // 使用 useMemo 避免每次渲染都重新運(yùn)行計(jì)算邏輯
  const media = useMemo(() => {
    if (width <= 640) return MediaType.mobile;
    if (width <= 768) return MediaType.tablet;
    return MediaType.pc;
  }, [width]);

  return media;
};

export default useMediaSize;

3. 性能優(yōu)化：防抖與節(jié)流 Hook

A. 防抖 Hook (useDebounce)

常用于搜索框，防止用戶(hù)快速輸入時(shí)頻繁觸發(fā)請(qǐng)求。

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 關(guān)鍵：在下一次 useEffect 執(zhí)行前清理上一次的定時(shí)器
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

B. 節(jié)流 Hook (useThrottle)

常用于滾動(dòng)加載、窗口縮放，確保在規(guī)定時(shí)間內(nèi)只執(zhí)行一次。

import { useState, useEffect, useRef } from 'react';

function useThrottle<T>(value: T, delay: number): T {
  const [throttledValue, setThrottledValue] = useState<T>(value);
  const lastExecuted = useRef<number>(Date.now());

  useEffect(() => {
    const now = Date.now();
    const remainingTime = delay - (now - lastExecuted.current);

    if (remainingTime <= 0) {
      // 立即執(zhí)行
      setThrottledValue(value);
      lastExecuted.current = now;
    } else {
      // 設(shè)置定時(shí)器處理剩余時(shí)間
      const timer = setTimeout(() => {
        setThrottledValue(value);
        lastExecuted.current = Date.now();
      }, remainingTime);

      return () => clearTimeout(timer);
    }
  }, [value, delay]);

  return throttledValue;
}

export default useThrottle;

三、總結(jié)：封裝自定義 Hook 的心法

抽離狀態(tài)而非僅邏輯：如果一段邏輯只涉及純函數(shù)計(jì)算，不需要 Hook；只有涉及 useState 或 useEffect 等狀態(tài)管理時(shí)，才有必要封裝 Hook。
保持純凈：自定義 Hook 應(yīng)該只關(guān)心邏輯，而不應(yīng)該直接操作 DOM。
TS 類(lèi)型保護(hù)：利用泛型 <T> 增強(qiáng) Hook 的兼容性，讓它能適配各種數(shù)據(jù)類(lèi)型。

到此這篇關(guān)于React中Hooks邏輯復(fù)用的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React中Hooks邏輯復(fù)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: