React.memo阻止组件重渲染失效 复选框状态重置问题排查

你遇到的问题是两个错误叠加导致的，React.memo 不生效是表层性能问题，复选框状态重置是核心逻辑写法错误：

1. React.memo 失效原因
   React.memo 默认对props做浅比较，如果你每次渲染都给子组件传入新的引用类型值，memo会直接判定props变更，触发重渲染。你的代码里每次渲染都执行Array.from(new Map(Object.entries(...)))生成全新的数组、Map实例，传给子组件的obj每次都是新引用；同时列表循环没有加唯一稳定的key，React diff时会默认重建所有列表项，memo完全无法拦截。
2. 复选框状态重置的核心错误
   你在CreateCheckBoxComponent的组件顶层直接调用setChecked，等于每次组件渲染时，不管用户当前操作的选中状态是什么，都会强行把状态重置为defaultValue对应的初始值，这是违反React组件编写规则的写法——状态更新逻辑不能直接写在组件渲染函数的顶层，会直接导致状态覆盖、渲染死循环等问题。

1. 优先修复复选框组件的状态逻辑 #

defaultValue只应该作为状态的初始值，仅在组件首次挂载时生效，不要在每次渲染时重复设置状态。修正后的代码如下：

import { useState, useCallback } from 'react';

function CreateCheckBoxComponent({ obj, onValueChange }) {
  // 仅组件首次挂载时，用defaultValue初始化选中状态，后续渲染不会重置
  const [checked, setChecked] = useState(parseInt(obj.defaultValue) !== 5);

  const handleChange = useCallback((e) => {
    const newChecked = e.target.checked;
    setChecked(newChecked);
    // 如需同步状态到父组件，调用传入的回调
    onValueChange?.(obj.idVar, newChecked);
  }, [obj.idVar, onValueChange]);

  return(
    <FormCheck
      label={obj.simbolName} 
      name={obj.idVar}
      type="checkbox"
      checked={checked}
      onChange={handleChange}
      sm={10}
    />                 
  );
}

2. 修复引用不稳定问题，让React.memo正常生效 #

用useMemo缓存静态配置转换结果，避免每次渲染生成新的数组/对象引用；列表循环添加唯一稳定的key，移除无意义的立即执行函数（IIFE）和空Fragment，减少不必要的渲染开销。
修正后的父组件代码：

import { useMemo } from 'react';

function MyComponent() {
  // 缓存配置转换结果，仅当json本身变更时才重新计算
  const formConfigList = useMemo(() => {
    return Array.from(new Map(Object.entries(json)));
  }, [json]);
    
  return(
    <div className="row"> 
      {formConfigList.map((data) => (
        // 用配置项的唯一标识作为key，禁止用数组索引当key
        <CreateItem key={data[0]} obj={data} />
      ))}
    </div>
  );
}

修正后的CreateDiv组件：

const CreateDiv = React.memo((props) => {
  console.log("CreateDiv 渲染");
  // 缓存内部遍历的配置列表
  const itemList = useMemo(() => {
    return Array.from(new Map(Object.entries(props.obj[1])));
  }, [props.obj]);

  return (
    <form name="myForm" onSubmit={formSubmit}>
      <div className="row">
        {itemList.map((data) => (
          <div className="col-sm-2" key={data[0]}>
            <CreateItem obj={data[1]} />
          </div>
        ))}
      </div>
    </form>
  ); 
});

3. 补充注意事项 #

• 如果CreateItem组件也需要拦截非必要重渲染，同样用React.memo包裹即可，注意如果给组件传递回调函数，必须用useCallback包裹保证引用稳定，否则memo依然会失效
• 不要把性能优化的希望全部寄托在React.memo上，优先保证组件逻辑写法正确，再针对确实有性能问题的组件做缓存优化
• 所有列表渲染必须使用业务层面的唯一稳定值作为key，错误的key会导致React diff时错误销毁重建组件，不仅性能差还会引发状态丢失、交互异常等问题

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