为什么React在MUI v5受控TextField输入时会重渲染页面所有组件？

问题结论 #

这是React的默认正常行为，不是Material UI v5的框架Bug。
React默认渲染规则为：当某个组件的状态发生更新时，会递归重渲染该组件下所有的子节点树，无论子节点是否依赖该更新的状态。你当前所有组件都定义在同一个顶层父组件内，受控TextField的状态绑定在顶层父组件，每次输入触发状态更新，自然会带动所有组件重渲染；而Material UI组件内置的样式计算逻辑会占用一定的渲染资源，大量组件同时重渲染就会出现输入卡顿的现象。

优化方案 #

1. 组件拆分+React.memo包裹 #

将不依赖受控TextField输入状态的组件（比如非受控TextField、Typography、Breadcrumb、IconButton等）拆分为独立的子组件，并用React.memo包裹子组件。被React.memo包裹的组件只有在自身props发生浅比较变化时才会触发重渲染，不受父组件无关状态更新的影响。

2. 状态下移 #

如果受控TextField的输入状态仅需要在自身或其少量子组件内使用，不要将状态定义在顶层父组件中，将状态下沉到受控TextField所在的最小封装组件内。这样状态更新的影响范围只会局限在这个小组件的子树内，不会触发其他无关组件重渲染。

3. 用useMemo缓存静态组件 #

如果不想做组件拆分，可以在父组件内用useMemo缓存不依赖输入状态的组件节点，示例如下：

const staticComponents = useMemo(() => {
  return (
    <>
      <Breadcrumb />
      <Typography>示例文本</Typography>
      {/* 其他非受控TextField、IconButton等静态组件 */}
    </>
  )
}, [])

父组件渲染时直接引用staticComponents即可，这些缓存的节点不会因为父组件状态更新而重新渲染。

内容的提问来源于stack exchange，提问作者PICKAB00