React强大且灵活hooks库——ahooks入门实践之开发调试类hook（dev）详解

什么是 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 }}>
        <Input
          value={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>
        <Button
          onClick={() => setData({ ...data, name: "新名称" })}
          style={{ marginRight: 8 }}
        >
          改变数据名称
        </Button>
        <Button
          onClick={() => setParentState(parentState + 1)}
          style={{ marginRight: 8 }}
        >
          改变父组件状态
        </Button>
        <Button onClick={() => setData({ count: 0, name: "重置" })}>
          重置数据
        </Button>
      </div>
    </Card>
  );
};

开发调试类 hooks 速查表

Hook 名称	用途	描述
useTrackedEffect	追踪副作用	追踪副作用的执行和依赖项变化
useWhyDidYouUpdate	组件更新原因	追踪组件重新渲染的原因，帮助性能优化