使用React.memo优化带输入框的长列表单项更新避免全量重渲染问题

你遇到的两个问题——memo完全没起到缓存作用、加了自定义比较后出现输入值被无规律重置——本质都是实现细节的坑，这类单条更新不触发全量重渲染的长列表需求，完全可以实现，不需要复杂的重构。

为什么最初的memo没生效 #

你在handleChange的useCallback里把items作为依赖，意味着只要任意列表项更新、整个items数组变化，这个回调就会生成全新的函数引用。
而默认的React.memo只对props做浅比较，所有Item收到的onChange prop引用全变了，浅比较直接判定所有组件都需要更新，等于memo完全被绕过，自然挡不住全量重渲染。

为什么自定义比较会导致输入值被重置 #

你写的“只比较label值”的比较逻辑思路本身没错，但配合现有带闭包的handleChange会引发连锁问题：

• 因为比较逻辑只检查label，只要两次渲染的label值一致，哪怕其他props（比如onChange）变了，memo都会直接拦住组件更新
• 前面提到的，每次items更新都会生成新的handleChange引用，所有Item都会收到这个新的onChange prop
• 那些没修改label的Item，因为被memo拦住不更新，一直拿着第一次渲染时的旧版handleChange
• 这个旧回调里存的是第一次渲染时的items快照，当你后续修改其他输入框触发这个旧回调时，更新操作是基于这个旧快照做数组映射的，自然就把之前其他项的更新结果给覆盖了，出现“改下一个输入就把之前的内容冲掉”的异常行为。

落地实现步骤 #

只要做两个小改造，就能完美达到预期效果：

• 把handleChange的状态更新逻辑改成函数式setState，去掉对items的闭包依赖，让这个回调的引用永久稳定：

  const handleChange = React.useCallback((e, id) => {
      // 从setState的入参直接拿最新的列表数据，不需要依赖外层的闭包变量
      setItems(prevItems => prevItems.map(item => {
          if (item.id === id) {
              return {
                  ...item,
                  label: e.target.value
              }
          }
          return item;
      }));
  }, []) // 空依赖，从组件挂载到卸载，这个函数的引用永远不会变
  

• 这时候传给Item的三个props的特性就变成了：
  • id是固定的原始值，永远不会变化
  • onChange是永久稳定的函数引用，永远不会变化
  • label是当前项的实时值，只有对应项被修改时才会发生变化
• 这时候不管你用memo默认的浅比较，还是之前写的只对比label的自定义areEqual，都不会出现之前的重置bug：只有被修改的那个Item的label prop发生变化，会触发对应的重渲染，其他所有Item的props和上一次渲染完全一致，会被memo直接拦住，不会产生任何多余的渲染开销。

额外说明 #

百级规模的列表用这个实现完全没有性能压力；如果是上千、上万级的超长列表，可以在这个逻辑基础上搭配虚拟滚动，只渲染可视区域内的列表项，进一步压缩初始渲染的开销，但单条更新不触发全量重渲染的核心逻辑是完全不变的。

内容的提问来源于stack exchange，提问作者James Jr.