React使用JSON作为状态致组件全量重渲染，求非拆分状态优化方案

针对你遇到的JSON对象作为状态引发的全组件重渲染、输入延迟问题，不用拆分所有状态属性的话，可以试试以下几种方案：

1. 用React.memo包裹子组件 #

React组件默认会在父组件重渲染时跟着重渲染，哪怕自身props没有变化。React.memo会对组件的props做浅比较，只有当props真正改变时才触发重渲染。

比如把你的输入组件单独封装后用React.memo包裹：

const MemoizedTextField = React.memo(({ value, onChange }) => {
  // 组件逻辑
  return <TextField value={value} onChange={onChange} />;
});

// 父组件中使用
<MemoizedTextField 
  value={myState.name} 
  onChange={(e) => setMyState(prev => ({...prev, name: e.target.value}))} 
/>

这样只有当value或onChange变化时，这个输入框才会重渲染，其他属性修改不会影响它。

2. 用useMemo缓存单个状态属性 #

如果子组件依赖的是状态对象里的某个属性，可以用useMemo缓存该属性的引用，避免父组件状态更新时，子组件接收到的props引用不必要变化：

const name = useMemo(() => myState.name, [myState.name]);
const date = useMemo(() => myState.date, [myState.date]);

// 传递给子组件
<MemoizedTextField value={name} onChange={...} />
<MemoizedDatePicker value={date} onChange={...} />

配合React.memo使用，能进一步确保子组件只在对应属性变化时重渲染。

3. 使用精确状态选择器（适配状态管理库） #

如果你的项目用了Redux Toolkit、Zustand这类状态管理库，可以利用它们的选择器功能，让组件只订阅自身需要的状态片段：

• Redux Toolkit：用createSelector创建派生状态，组件通过useSelector获取时，只有当选择器返回的值变化才会重渲染。
• Zustand：直接在组件中选择需要的属性，比如const name = useStore(state => state.name)，组件只会在name变化时重渲染。

4. 优化onChange函数的引用稳定性 #

注意onChange函数如果是在父组件渲染时创建的，每次父组件重渲染都会生成新的函数引用，会导致React.memo判断props变化，触发子组件重渲染。可以用useCallback缓存onChange函数：

const handleNameChange = useCallback((e) => {
  setMyState(prev => ({...prev, name: e.target.value}));
}, []);

// 传递给子组件
<MemoizedTextField value={name} onChange={handleNameChange} />

这样handleNameChange的引用只会在依赖项变化时更新，避免不必要的子组件重渲染。

这些方案都不用把JSON状态拆成多个独立的useState，能有效减少大型表单的不必要重渲染，缓解输入延迟问题。

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