为什么你的 React 组件在偷偷重新渲染

每一个 useMemo 背后，都可能藏着一个偷偷重算的组件。它不报错，只是安静地多跑了几次。

现象

组件在没有任何 props 变化时，依然触发了 render。控制台里没有报错，性能面板里却多出一排渲染记录。

// 这段代码能跑，但没人知道为什么
const value = useMemo(() => heavy(), []);

机制

useMemo 的依赖数组是空 []，按理说只会算一次。但它的引用在父组件每次重渲染时都变了——不是值变了，是父组件把一个新的函数当作 props 传了下来。

结论

本文没有结论。 修好它的方法有一百种，但为什么它会这样，可能只有写它的那个人知道。

如果哪天它不能跑了，也别动它。