性能优化

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <Child />          {/* 没有任何 props，照样重渲染 */}
    </div>
  );
}

const [n, setN] = useState(0);
setN(0);    // 值没变，不会重渲染

const Row = React.memo(function Row({ item, onSelect }: RowProps) {
  return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
});

type Props = Record<string, unknown>;
 
// React.memo 内部用的比较函数（简化版，真实实现在 shallowEqual.js）
function shallowEqual(a: Props, b: Props): boolean {
  if (Object.is(a, b)) return true;
 
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) return false;
 
  for (const key of keysA) {
    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
    // 注意：只比一层，属性值本身是对象时只比引用
    if (!Object.is(a[key], b[key])) return false;
  }
  return true;
}
 
let renderCount = 0;
let lastProps: Props | null = null;
 
// 模拟一个被 React.memo 包裹的组件
function memoComponent(label: string, props: Props): void {
  if (lastProps !== null && shallowEqual(lastProps, props)) {
    console.log(label + " -> 跳过渲染");
    return;
  }
  lastProps = props;
  renderCount++;
  console.log(label + " -> 重新渲染（第 " + renderCount + " 次）");
}
 
const stableUser = { id: 1, name: "Ada" };
const stableHandler = function (): void {};
 
console.log("场景 A：所有 props 引用稳定");
memoComponent("A1", { user: stableUser, onClick: stableHandler, count: 1 });
memoComponent("A2", { user: stableUser, onClick: stableHandler, count: 1 });
 
console.log("场景 B：内联对象字面量（父组件每次渲染新建）");
memoComponent("B1", { user: { id: 1, name: "Ada" }, count: 1 });
memoComponent("B2", { user: { id: 1, name: "Ada" }, count: 1 });
 
console.log("场景 C：内联箭头函数");
memoComponent("C1", { onClick: function () {}, count: 1 });
memoComponent("C2", { onClick: function () {}, count: 1 });
 
console.log("场景 D：只是原始值变了");
memoComponent("D1", { user: stableUser, count: 1 });
memoComponent("D2", { user: stableUser, count: 2 });
 
console.log("场景 E：props 数量变了");
memoComponent("E1", { user: stableUser });
memoComponent("E2", { user: stableUser, extra: true });
 
console.log("总渲染次数: " + renderCount);
console.log("结论：内联对象与内联函数会让 memo 完全失效");

// 这四种写法都会让 MemoChild 的 memo 完全失效
<MemoChild style={{ color: "red" }} />               {/* 内联对象 */}
<MemoChild items={data.filter((d) => d.ok)} />       {/* 每次新数组 */}
<MemoChild onClick={() => doSomething(id)} />        {/* 内联函数 */}
<MemoChild render={() => <span>hi</span>} />         {/* 内联 JSX */}

const style = useMemo(() => ({ color: "red" }), []);
const items = useMemo(() => data.filter((d) => d.ok), [data]);
const onClick = useCallback(() => doSomething(id), [id]);

const Chart = React.memo(
  function Chart({ data, config }: Props) { /* ... */ },
  (prev, next) => prev.data.version === next.data.version
);

// 不好：输入框的 state 在顶层，每打一个字整棵树都重渲染
function Page() {
  const [query, setQuery] = useState("");
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <HugeStaticTree />
      <Results query={query} />
    </>
  );
}
 
// 好：把 state 和用到它的部分一起下沉
function Page() {
  return (
    <>
      <SearchArea />         {/* query 状态在这里面 */}
      <HugeStaticTree />     {/* 完全不受影响 */}
    </>
  );
}

// 不好：Counter 每次渲染，HugeTree 都跟着渲染
function Counter() {
  const [n, setN] = useState(0);
  return (
    <div onClick={() => setN(n + 1)}>
      {n}
      <HugeTree />
    </div>
  );
}
 
// 好：HugeTree 的元素在外面创建，Counter 重渲染时它的引用没变
function Counter({ children }: { children: React.ReactNode }) {
  const [n, setN] = useState(0);
  return (
    <div onClick={() => setN(n + 1)}>
      {n}
      {children}
    </div>
  );
}
 
// 使用
<Counter>
  <HugeTree />
</Counter>

// 不好：一个大组件，任何一个 state 变化都要重算全部
function Dashboard() {
  const [filter, setFilter] = useState("");
  const [selected, setSelected] = useState(null);
  const [expanded, setExpanded] = useState(false);
  // 300 行 JSX
}

import { Profiler } from "react";
 
<Profiler
  id="TodoList"
  onRender={(id, phase, actualDuration, baseDuration) => {
    // actualDuration: 本次渲染实际耗时
    // baseDuration: 不用任何 memo 的话理论耗时
    if (actualDuration > 16) {
      console.warn(id + " 渲染耗时 " + actualDuration.toFixed(1) + "ms");
    }
  }}
>
  <TodoList />
</Profiler>

useEffect(() => {
  let ticking = false;
  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      setScrollY(window.scrollY);
      ticking = false;
    });
  }
  window.addEventListener("scroll", onScroll, { passive: true });
  return () => window.removeEventListener("scroll", onScroll);
}, []);

const MessageItem = React.memo(function MessageItem({ msg, onReply }: Props) {
  /* ... */
});
 
function MessageList({ messages }: { messages: Msg[] }) {
  // 必须稳定，否则上面的 memo 全废
  const onReply = useCallback((id: string) => { /* ... */ }, []);
 
  return (
    <ul>
      {messages.map((m) => (
        <MessageItem key={m.id} msg={m} onReply={onReply} />
      ))}
    </ul>
  );
}