React中避免未变更子组件重复渲染的异常问题排查

核心问题 #

你碰到的列表项消失、值被覆盖的问题，主要是三个关键错误导致的：

• 用index作为列表项的key：React靠key识别列表元素的唯一性，当新增、删除列表项时，用index做key会让React错误复用旧组件，再加上React.memo的缓存逻辑，直接引发状态混乱。
• 状态更新没用到函数式写法：直接依赖当前的texts状态更新，会因为闭包陷阱捕获旧的state值，批量操作时就会出现状态异常。
• onChange函数没做缓存：父组件每次渲染都会生成新的onChange函数，导致React.memo误以为子组件props变化，既失去优化效果，还可能加剧组件复用的问题。

具体修复步骤 #

1. 给每个列表项加唯一id #

修改新增逻辑，给每个文本项分配唯一标识（这里用时间戳示例，也可以用uuid库生成更可靠的id）：

const addText = () => {
  setTexts(prevTexts => [
    ...prevTexts,
    { id: Date.now(), value: "" } // 用唯一id替代index
  ]);
};

2. 用函数式更新状态 #

更新单个文本时，基于前一次的state计算新状态，避开闭包陷阱：

const handleChange = useCallback((id, newValue) => {
  setTexts(prevTexts => 
    prevTexts.map(item => 
      item.id === id ? { ...item, value: newValue } : item
    )
  );
}, []);

3. 用useCallback缓存onChange函数 #

保证子组件拿到的onChange函数是稳定的，让React.memo能正确判断是否需要重渲染：

// 父组件中用useCallback包裹handleChange，依赖项为空数组保证函数稳定
const handleChange = useCallback((id, newValue) => {
  setTexts(prevTexts => 
    prevTexts.map(item => 
      item.id === id ? { ...item, value: newValue } : item
    )
  );
}, []);

4. 调整列表项的key和props传递 #

把列表项的key改成item.id，同时传递id和value给子组件：

{texts.map((item) => (
  <Child
    key={item.id} // 用唯一id作为key
    id={item.id}
    value={item.value}
    onChange={handleChange}
  />
))}

5. 子组件适配修改 #

子组件触发onChange时，把id和新值一起传回去：

const Child = React.memo(({ id, value, onChange }) => {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(id, e.target.value)}
    />
  );
});

这样修改后，React能准确识别每个列表项的身份，不会再错误复用组件，同时React.memo能正常发挥作用，只有props变化的子组件才会重渲染，既解决了性能问题，也修复了状态异常的bug。

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