AI 对话

多模态 · SSE 流式 · Markdown · 代码高亮

4 条消息~576 tokens

请写一段 React Hook 的代码示例

15:58

好的，这是一个 React Hook 的示例：

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

export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const doubled = count * 2;

  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);

  useEffect(() => {
    console.log('Counter mounted with value:', count);
  }, []);

  return { count, doubled, increment, decrement };
}

这个 Hook 封装了一个计数器逻辑，支持递增、递减，并提供了一个派生值 doubled。你可以继续问我关于这段代码的问题。

15:58

能详细解释一下这段代码吗？

15:59

好的，我来逐行解释这段代码：

useState(initial) — 创建一个响应式状态 count，初始值由参数传入，默认为 0
const doubled = count * 2 — 这是一个派生值，每次 count 变化时组件重渲染，doubled 会自动重新计算
useCallback — 包裹 increment 和 decrement，确保函数引用稳定
useEffect(fn, []) — 空依赖数组意味着只在挂载时执行一次

这种把状态逻辑抽成自定义 Hook 的模式叫 逻辑复用，是 React Hooks 最核心的设计理念。

15:59

···