useMemo 与 useCallback：何时真正需要？

1 === 1;            // true：原始值，比值
"abc" === "abc";    // true：原始值，比值

{ name: "Tom" } === { name: "Tom" };  // false：两个不同的对象！
[1, 2] === [1, 2];                    // false：两个不同的数组！

const a = { name: "Tom" };
const b = a;        // b 和 a 指向同一个对象
a === b;            // true：同一个引用

import { useEffect, useState } from "react";

function FilterList({ keyword }: { keyword: string }) {
  const [items] = useState(["ant", "bee", "cat"]);

  // 每次渲染，这都是一个新数组（新引用）
  const filtered = items.filter(i => i.includes(keyword));

  useEffect(() => {
    console.log("effect 执行了");
  }, [filtered]); // 😱 filtered 每次渲染都是新引用 → effect 每次渲染都跑

  return <ul>{filtered.map(i => <li key={i}>{i}</li>)}</ul>;
}

import { useMemo, useState } from "react";

type Row = { name: string; amount: number };

function Stats({ rows }: { rows: Row[] }) {
  const [query, setQuery] = useState("");
  const [compact, setCompact] = useState(false); // 无关的 UI 开关

  const stats = useMemo(() => {
    // 十万行：过滤 + 汇总，一次几十毫秒
    const matched = rows.filter(r => r.name.includes(query));
    return { total: matched.length, sum: matched.reduce((a, r) => a + r.amount, 0) };
  }, [rows, query]); // 只有数据源变化才重算

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <label><input type="checkbox" checked={compact}
        onChange={e => setCompact(e.target.checked)} />紧凑模式</label>
      <p>共 {stats.total} 条，合计 {stats.sum}</p>
    </>
  );
}

console.time("stats");
const stats = computeStats(rows, query);
console.timeEnd("stats");  // 控制台打印：stats: 37.4ms

import { memo, useMemo, useState } from "react";

type User = { id: number; name: string };

// 子组件：memo 化，props 浅比较相同 → 跳过重渲染
const UserRow = memo(function UserRow({ user }: { user: User }) {
  console.log("render:", user.name);
  return <li>{user.name}</li>;
});

function UserList({ users, keyword }: { users: User[]; keyword: string }) {
  const [tab, setTab] = useState("all");

  // ✅ 过滤结果被缓存：users/keyword 没变时，filtered 引用不变
  const filtered = useMemo(
    () => users.filter(u => u.name.includes(keyword)),
    [users, keyword]
  );

  return (
    <>
      <button onClick={() => setTab("fav")}>切 Tab</button>
      <ul>{filtered.map(u => <UserRow key={u.id} user={u} />)}</ul>
    </>
  );
}

// 假设外层组件作用域里有 id 和 save：

// 下面两行完全等价（deps 相同的前提下）：
const handler  = useCallback(() => save(id), [id]);
const handler2 = useMemo(() => () => save(id), [id]);

// 规律：useCallback(fn, deps) ≈ useMemo(() => fn, deps)
// 「要缓存的东西恰好是函数」时，useCallback 只是少包一层

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

type Todo = { id: number; text: string; done: boolean };

const TodoItem = memo(function TodoItem({ todo, onToggle }: {
  todo: Todo;
  onToggle: (id: number) => void;
}) {
  return <li onClick={() => onToggle(todo.id)}>{todo.text}</li>;
});

function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);

  // 不包 useCallback：每次重渲染 onToggle 都是新函数
  // → 所有 TodoItem 的 props 都「变了」→ memo 集体失效
  const onToggle = useCallback((id: number) => {
    setTodos(ts => ts.map(t => (t.id === id ? { ...t, done: !t.done } : t)));
  }, []);  // ✅ 用函数式更新、不读外部值，deps 才能是 []

  return (
    <ul>
      {todos.map(t => (
        <TodoItem key={t.id} todo={t} onToggle={onToggle} />
      ))}
    </ul>
  );
}

// ✅ 写在组件函数外面：无论渲染多少次，都是同一个引用
const FILTER_OPTIONS = ["all", "done", "todo"];

function FilterBar() {
  return <select>{FILTER_OPTIONS.map(o => <option key={o}>{o}</option>)}</select>;
}