React状态更新触发全组件重渲染导致表单卡顿如何解决？

问题根本原因 #

React的默认渲染规则没有内置的“变更智能判断”逻辑：只要父组件触发重渲染，所有未做性能优化的子组件会无条件同步重渲染，和子组件自身使用的props是否变化没有关系。
你的代码刚好踩中了所有导致全量重渲染的触发点：

• 全量表单状态被存在顶层App组件的单个data对象中，任意输入框修改值调用setData时，都会生成全新的对象引用，直接触发App组件重渲染
• 给所有表单子组件都传递了完整的data对象和setData方法，哪怕某个子组件完全没用到当前修改的字段，只要父组件重渲染，它就会跟着重跑
• 不管是Context API还是Prop Drilling，只要传递的是整个state对象，都逃不开这个逻辑——Context本身没有内置细粒度更新能力，只要Provider的value引用变化，所有消费该Context的组件都会强制重渲染，和Prop Drilling的表现完全一致。

你之前尝试的onBlur时再同步全局状态的方案，本质是靠降低全局状态更新频率减少重渲染次数，没有从渲染机制层面解决问题，自然会带来代码冗余的问题。

现有代码的额外隐患 #

除了核心的状态传递粒度问题，代码里还有两个会击穿常规性能优化的写法：

• 直接在JSX里写数组字面量作为fieldName属性，每次父组件渲染都会生成新的数组引用，哪怕给子组件加了memo，也会被判定为props变更触发重渲染
• 事件处理函数每次渲染都会生成新的引用，同样会导致memo优化失效
• 子组件接收全量data对象，哪怕只用到其中2-3个字段，也会因为整个data的引用变化被判定为需要重渲染

可行解决方案 #

按照改造成本和最终效果，分两类方案可选：

方案1：零依赖快速修复 #

不需要引入第三方库，只需要调整状态传递粒度加基础组件优化即可解决问题：

1. 拆分props粒度：永远不要给子组件传整个state对象，只传当前子组件实际用到的字段和方法
2. 稳定引用：把固定的字段配置数组提到组件作用域外部，用useCallback包装状态更新方法，避免每次渲染生成新的引用
3. 子组件memo化：用React.memo包裹所有表单子组件，只有当组件实际接收的props发生变化时才触发重渲染

改造示例：
首先把固定字段配置提到App组件外部，避免重复生成引用：

// 组件外部定义，引用全局唯一
const LIST_PROFILE_FIELDS = ["firstName", "lastName", "gender", "dateOfBirth", "nationalCode", "mobileNum"];
const ORG_RULING_FIELDS = ["organizationalRuling", "startOrder", "endOrder"];
const BANK_INFO_FIELDS = ["cardNum1", "bankName1", "cardNum2", "bankName2"];

在App组件内封装稳定的更新方法，拆分传给子组件的props：

function App() {
  const [data, setData] = useState({
    // 原有初始化数据保持不变
    firstName: "",
    lastName: "",
    // ...其余字段
  });

  // useCallback包裹后，updateField的引用永远不会变
  const updateField = useCallback((fieldName, value) => {
    setData(prev => ({
      ...prev,
      [fieldName]: value.trim()
    }))
  }, [])

  return (
    <>
      {/* 只传ListProfile实际用到的字段，不传全量data */}
      <ListProfile
        firstName={data.firstName}
        lastName={data.lastName}
        gender={data.gender}
        dateOfBirth={data.dateOfBirth}
        nationalCode={data.nationalCode}
        mobileNum={data.mobileNum}
        updateField={updateField}
      />
      <OrganizationalRuling
        organizationalRuling={data.organizationalRuling}
        startOrder={data.startOrder}
        endOrder={data.endOrder}
        updateField={updateField}
      />
      <BankInfo
        cardNum1={data.cardNum1}
        bankName1={data.bankName1}
        cardNum2={data.cardNum2}
        bankName2={data.bankName2}
        updateField={updateField}
      />
      {/* 其余子组件按相同逻辑传参 */}
    </>
  )
}

子组件用React.memo包裹，避免无关重渲染：

const ListProfile = React.memo(({ firstName, lastName, gender, dateOfBirth, nationalCode, mobileNum, updateField }) => {
  return (
    <>
      <TextField
        sx={{ width: "300px", margin: "10px 0" }}
        label="First Name"
        variant="outlined"
        value={firstName}
        onChange={(e) => updateField("firstName", e.target.value)}
      />
      {/* 其余输入项按相同逻辑绑定 */}
    </>
  )
})

这个方案改造成本低，足够解决你当前的卡顿问题，但如果表单字段持续增加，手动拆分props、写绑定逻辑的工作量会线性上涨。

方案2：表单场景长期最优方案 #

大表单场景不要自己手写全局状态管理，直接用专门为表单设计的状态库，底层已经实现了字段级的细粒度更新，输入框绑定的字段变化时才会触发当前组件重渲染，其余组件完全不受影响，不需要你手动处理memo、引用稳定性、props拆分这些问题，代码量反而比手写状态更少。
目前性能和易用性表现最好的是react-hook-form，基础用法示例：

import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      gender: "",
      // 其余默认值和你之前的data配置完全一致
    }
  });

  const onSubmit = (formValues) => {
    // 提交时可拿到全量表单值
    console.log(formValues);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ListProfile register={register} />
      <OrganizationalRuling register={register} />
      <BankInfo register={register} />
      {/* 其余子组件 */}
      <button type="submit">提交</button>
    </form>
  )
}

// 子组件不需要做任何memo优化，天然只有自身绑定的字段变化时才重渲染
const ListProfile = ({ register }) => {
  return (
    <TextField
      sx={{ width: "300px", margin: "10px 0" }}
      label="First Name"
      variant="outlined"
      {...register("firstName")}
    />
    // 其余输入项同理绑定
  )
}

这种方案下，你不需要写任何onBlur的临时状态逻辑，输入全程流畅无卡顿，后续做表单校验、重置、联动逻辑的成本也远低于手写状态。

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