React包含60-70个文本框的表单onChange输入卡顿如何优化？

1. 稳定事件函数引用，避免不必要的props变更 #

你当前在主组件传递handleChange时每次都调用bind()，会导致每次主组件重渲染都生成新的函数引用，子组件的props每次都会变化，完全无法做渲染阻断。

• 用useCallback包裹handleChange，确保它的引用永远稳定：

// 主组件内
const handleChange = useCallback((e) => {
  const { name, value } = e.target;
  setValues(prev => ({ ...prev, [name]: value }));
}, []); // 依赖项为空，setValues引用本身稳定，所以不需要加其他依赖

// 传递的时候不需要bind，直接传函数本身
<BlockInputBasic handleChange={handleChange} values={values.basic} />
<BlockInputTarget handleChange={handleChange} values={values.target} />

2. 拆分state结构，不要传递全量values给子组件 #

当前你把整个values对象传给所有子组件，只要任意一个字段更新，整个values对象的引用就会变化，所有子组件都会收到新的props触发重渲染。

• 把state按业务模块拆分，每个子组件只接收自己需要的字段子集：

// 主组件state按模块拆分
const [values, setValues] = useState({
  basic: {
    name: '',
    name2: '',
    // 其他BlockInputBasic需要的字段
  },
  target: {
    // BlockInputTarget需要的字段
  }
});

• 也可以直接按子组件拆分多个独立的state，比如const [basicValues, setBasicValues] = useState({})、const [targetValues, setTargetValues] = useState({})，进一步降低不同模块的更新耦合。

3. 给子组件加渲染缓存，阻断无关更新 #

用React.memo包裹所有表单子组件，只有当子组件接收的props实际发生变化时才会触发重渲染：

// 子组件定义
export default React.memo(function BlockInputBasic(props) {
  // 原有逻辑不变
});

做完前两步优化后，修改target模块的字段时，BlockInputBasic的props不会发生任何变化，就会直接跳过重渲染，减少大量不必要的Diff计算。

4. 细粒度拆分大组件 #

如果单个子组件里包含超过20个TextField，依然会出现单个字段更新导致整个子组件内所有TextField重渲染的问题，你可以：

• 继续把大的Block组件按业务字段拆成更小的子组件，每个子组件只负责3~5个字段，同样用React.memo包裹
• 或者把单个TextField封装成独立的受控组件，每个组件自己维护内部状态，只有在值变化时才更新自身，同时同步到父组件总state。

5. 可选的低改造成本方案：改用高性能表单库 #

如果不想手动做细粒度的组件拆分和状态管理，可以直接引入react-hook-form这类原生做了渲染优化的表单库，它默认基于非受控实现，只有实际更新的字段对应的组件会重渲染，60~70个表单项的场景下基本不会出现输入卡顿，适配MUI TextField的成本也很低。

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