第二十二章：性能优化边界 —— 省电，但别过度改装

1 分钟 243 字第 44 / 962 个阅读单元

React 初学者最容易掉进的坑之一，是“看到 useMemo、useCallback、memo 就到处加”。

现代 React 的真实原则更像：

text

先把组件写对
再找真正慢的地方
最后才做有证据的优化

tsx

const Panel = React.memo(function Panel({ temp }) {
  return <div>{temp}°C</div>;
});

tsx

const totalBill = useMemo(() => {
  return rooms.reduce((sum, room) => sum + room.cost, 0);
}, [rooms]);

tsx

const handleSave = useCallback(() => {
  console.log('save');
}, []);

React 生态现在的一个重要方向，是把一部分“本来手写 memo 的活”交给编译器自动做。

最重要的优化顺序：