什么是 ahooks？

ahooks 是一個 React Hooks 庫，提供了大量實用的自定義 hooks，幫助開發者更高效地構建 React 應用。其中開發調試類 hooks 是 ahooks 的一個重要分類，專門用于開發調試階段，幫助開發者追蹤組件更新和副作用執行。

安裝 ahooks

npm install ahooks

開發調試類 hooks 詳解

useTrackedEffect – 追蹤副作用

useTrackedEffect?用于追蹤副作用的執行，幫助調試依賴項變化。

import React, { useState } from "react";
import { useTrackedEffect } from "ahooks";
import { Card, Button, Input } from "antd";const UseTrackedEffectExample = () => {const [count, setCount] = useState(0);const [name, setName] = useState("張三");useTrackedEffect((changes) => {console.log("副作用執行，變化詳情:", changes);console.log("當前值 - count:", count, "name:", name);},[count, name],{onTrack: (changes) => {console.log("追蹤到變化:", changes);},});return (<Card title="useTrackedEffect 追蹤副作用"><div style={{ marginBottom: 16 }}><p><strong>計數:</strong> {count}</p><p><strong>姓名:</strong> {name}</p><p style={{ fontSize: "12px", color: "#666" }}>查看控制臺了解副作用執行和依賴項變化</p></div><div style={{ marginBottom: 16 }}><Inputvalue={name}onChange={(e) => setName(e.target.value)}placeholder="輸入姓名"style={{ marginBottom: 8 }}/></div><div><Button onClick={() => setCount(count + 1)} style={{ marginRight: 8 }}>增加計數</Button><Button onClick={() => setName("李四")}>改變姓名</Button></div></Card>);
};

useWhyDidYouUpdate – 組件更新原因

useWhyDidYouUpdate?用于追蹤組件重新渲染的原因，幫助優化性能。

import React, { useState, memo } from "react";
import { useWhyDidYouUpdate } from "ahooks";
import { Card, Button } from "antd";// 使用 memo 包裝組件以便追蹤更新
const ExpensiveComponent = memo(({ count, name, onUpdate }) => {// 追蹤組件更新原因useWhyDidYouUpdate("ExpensiveComponent", { count, name, onUpdate });return (<div style={{ padding: 16, backgroundColor: "#f0f0f0", borderRadius: 4 }}><p><strong>計數:</strong> {count}</p><p><strong>姓名:</strong> {name}</p><Button onClick={onUpdate}>更新</Button></div>);
});const UseWhyDidYouUpdateExample = () => {const [count, setCount] = useState(0);const [name, setName] = useState("張三");const [parentCount, setParentCount] = useState(0);const handleUpdate = () => {console.log("子組件更新按鈕被點擊");};return (<Card title="useWhyDidYouUpdate 組件更新原因"><div style={{ marginBottom: 16 }}><p><strong>父組件計數:</strong> {parentCount}</p><p style={{ fontSize: "12px", color: "#666" }}>查看控制臺了解子組件重新渲染的原因</p></div><div style={{ marginBottom: 16 }}><ExpensiveComponent count={count} name={name} onUpdate={handleUpdate} /></div><div><Button onClick={() => setCount(count + 1)} style={{ marginRight: 8 }}>改變子組件計數</Button><Button onClick={() => setName("李四")} style={{ marginRight: 8 }}>改變子組件姓名</Button><Button onClick={() => setParentCount(parentCount + 1)}>改變父組件計數（不影響子組件）</Button></div></Card>);
};

開發調試 hooks 組合使用示例

import React, { useState, memo } from "react";
import { useTrackedEffect, useWhyDidYouUpdate } from "ahooks";
import { Card, Button, Input } from "antd";// 使用 memo 包裝的組件
const DebugComponent = memo(({ data, onDataChange }) => {// 追蹤組件更新原因useWhyDidYouUpdate("DebugComponent", { data, onDataChange });// 追蹤副作用執行useTrackedEffect((changes) => {console.log("DebugComponent 副作用執行:", changes);},[data],{onTrack: (changes) => {console.log("DebugComponent 追蹤變化:", changes);},});return (<div style={{ padding: 16, backgroundColor: "#f6ffed", borderRadius: 4 }}><p><strong>數據:</strong> {JSON.stringify(data)}</p><Button onClick={() => onDataChange({ ...data, count: data.count + 1 })}>更新數據</Button></div>);
});const DevToolsExample = () => {const [data, setData] = useState({ count: 0, name: "初始值" });const [parentState, setParentState] = useState(0);// 追蹤父組件副作用useTrackedEffect((changes) => {console.log("父組件副作用執行:", changes);},[data, parentState],{onTrack: (changes) => {console.log("父組件追蹤變化:", changes);},});return (<Card title="開發調試 hooks 組合使用"><div style={{ marginBottom: 16 }}><p><strong>父組件狀態:</strong> {parentState}</p><p style={{ fontSize: "12px", color: "#666" }}>打開控制臺查看詳細的調試信息</p></div><div style={{ marginBottom: 16 }}><DebugComponent data={data} onDataChange={setData} /></div><div><ButtononClick={() => setData({ ...data, name: "新名稱" })}style={{ marginRight: 8 }}>改變數據名稱</Button><ButtononClick={() => setParentState(parentState + 1)}style={{ marginRight: 8 }}>改變父組件狀態</Button><Button onClick={() => setData({ count: 0, name: "重置" })}>重置數據</Button></div></Card>);
};

開發調試類 hooks 速查表

Hook 名稱	用途	描述
useTrackedEffect	追蹤副作用	追蹤副作用的執行和依賴項變化
useWhyDidYouUpdate	組件更新原因	追蹤組件重新渲染的原因，幫助性能優化

?React強大且靈活hooks庫——ahooks入門實踐之開發調試類hook（dev）詳解 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿動態資訊