useCallback

function useCallback<T extends (...args: any[]) => any>(
  callback: T,
  dependencies: DependencyList
): T

// 泛型 T 是被缓存函数的类型
// callback 是要缓存的函数
// dependencies 是依赖数组,只有数组中的值变化时才重新创建函数

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

interface PostProps {
  id: number;
  title: string;
  onLike: (id: number) => void;
}

// ✅ 子组件使用 React.memo 优化
const Post = memo(function Post({ id, title, onLike }: PostProps) {
  console.log(`Post ${id} 渲染`); // 观察渲染次数
  return (
    <div className="p-4 border rounded mb-2">
      <h3 className="font-semibold">{title}</h3>
      <button
        onClick={() => onLike(id)}
        className="px-3 py-1 bg-blue-500 text-white rounded"
      >
        点赞
      </button>
    </div>
  );
});

export function PostList({ posts }: { posts: Array<{ id: number; title: string }> }) {
  const [likeCount, setLikeCount] = useState(0);

  // ✅ 使用 useCallback 稳定函数引用
  const handleLike = useCallback((id: number) => {
    setLikeCount(c => c + 1);
  }, []); // 空依赖,函数永不改变

  return (
    <div className="p-6">
      <p className="mb-4">总点赞数: {likeCount}</p>

      {/* 这个按钮会导致 PostList 重新渲染,但 Post 不会重新渲染 */}
      <button
        onClick={() => setLikeCount(likeCount + 1)}
        className="px-4 py-2 mb-4 bg-gray-200 rounded"
      >
        计数: {likeCount}
      </button>

      <div>
        {posts.map(post => (
          <Post
            key={post.id}
            {...post}
            onLike={handleLike} // ✅ 稳定引用,Post 不会重新渲染
          />
        ))}
      </div>
    </div>
  );
}

import { useCallback, useState } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserListProps {
  users: User[];
  onSelect: (userId: string) => void;
}

export function UserList({ users, onSelect }: UserListProps) {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  // ✅ 缓存选择函数,避免每次渲染都创建新函数
  const handleSelect = useCallback((userId: string) => {
    setSelectedId(userId);
    onSelect(userId); // 调用父组件传入的回调
  }, [onSelect]); // onSelect 依赖变化时才重新创建

  return (
    <div className="p-6">
      <ul className="space-y-2">
        {users.map(user => (
          <li
            key={user.id}
            onClick={() => handleSelect(user.id)}
            className={`p-3 border rounded cursor-pointer ${
              selectedId === user.id
                ? 'bg-blue-100 border-blue-500'
                : 'bg-white hover:bg-gray-50'
            }`}
          >
            <p className="font-semibold">{user.name}</p>
            <p className="text-sm text-gray-600">{user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

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

interface ChatMessage {
  id: string;
  content: string;
  timestamp: number;
}

export function ChatRoom({ roomId }: { roomId: string }) {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [isConnected, setIsConnected] = useState(false);

  // ✅ 使用 useCallback 缓存消息处理函数
  const handleMessage = useCallback((message: ChatMessage) => {
    setMessages(prev => [...prev, message]);
  }, []);

  // ✅ 使用 useCallback 缓存连接状态更新函数
  const handleConnectionChange = useCallback((connected: boolean) => {
    setIsConnected(connected);
  }, []);

  // ✅ handleMessage 是稳定依赖,effect 不会频繁重新建立
  useEffect(() => {
    console.log('建立 WebSocket 连接...');

    // 模拟 WebSocket 连接
    const ws = {
      send: (data: any) => console.log('发送:', data),
      close: () => console.log('关闭连接'),
      onmessage: (handler: (msg: any) => void) => {
        // 模拟接收消息
        handler({ content: '新消息', id: '1', timestamp: Date.now() });
      },
      onopen: () => handleConnectionChange(true),
      onclose: () => handleConnectionChange(false),
    };

    ws.onmessage(handleMessage);

    return () => {
      ws.close();
    };
  }, [roomId, handleMessage, handleConnectionChange]);

  return (
    <div className="p-6">
      <div className="mb-4">
        状态: {isConnected ? '已连接' : '未连接'}
      </div>
      <ul className="space-y-2">
        {messages.map(msg => (
          <li key={msg.id} className="p-2 bg-gray-100 rounded">
            {msg.content}
          </li>
        ))}
      </ul>
    </div>
  );
}

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

// ❌ 问题:依赖数组很长
function FormWithoutReducer({ user, preferences }: {
  user: { id: string; name: string };
  preferences: { theme: string; language: string };
}) {
  const [status, setStatus] = useState('idle');

  const handleSubmit = useCallback(() => {
    // 使用多个外部变量
    console.log('提交用户:', user.id, user.name);
    console.log('主题:', preferences.theme);
    console.log('语言:', preferences.language);

    setStatus('submitting');
    // 提交逻辑...
  }, [user, preferences, status]); // ❌ 很多依赖,容易变化

  return <button onClick={handleSubmit}>提交</button>;
}

// ✅ 方案 1: 使用函数式更新减少依赖
function FormWithFunctionalUpdate({ userId }: { userId: string }) {
  const [status, setStatus] = useState('idle');

  const handleSubmit = useCallback(() => {
    // ✅ 使用函数式更新,不依赖外部状态
    setStatus(prev => {
      console.log('提交用户:', userId);
      console.log('当前状态:', prev);
      return 'submitting';
    });
  }, [userId]); // ✅ 只依赖 userId

  return <button onClick={handleSubmit}>提交</button>;
}

// ✅ 方案 2: 使用 useReducer 消除依赖
type FormState = { status: 'idle' | 'submitting' | 'success' | 'error' };
type FormAction = { type: 'SUBMIT' } | { type: 'RESET' };

function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case 'SUBMIT':
      return { status: 'submitting' };
    case 'RESET':
      return { status: 'idle' };
    default:
      return state;
  }
}

function FormWithReducer({ user, preferences }: {
  user: { id: string; name: string };
  preferences: { theme: string; language: string };
}) {
  const [state, dispatch] = useReducer(formReducer, { status: 'idle' });

  // ✅ dispatch 引用永远稳定,无依赖!
  const handleSubmit = useCallback(() => {
    console.log('提交用户:', user.id);
    console.log('主题:', preferences.theme);
    dispatch({ type: 'SUBMIT' });
  }, [user, preferences]); // 仍然需要 user 和 preferences

  // 更好的方案:将 user 和 preferences 放入 reducer state
  return <button onClick={handleSubmit}>提交</button>;
}