React中表格行输入框编辑失焦问题求助

当基于JSON数组构建可编辑网格时，输入框失焦通常是组件不必要重渲染导致的，以下是针对这类场景的React最佳实践：

1. 使用稳定且唯一的key属性 #

渲染列表时，绝对不要用数组索引作为key——当数组元素修改、排序或增删时，索引会变化，React会销毁重建对应组件，直接导致输入框失焦。必须使用数据中自带的唯一标识（如id字段）作为key，保证组件实例的稳定性：

// 错误写法
{data.map((item, index) => <Row key={index} item={item} />)}

// 正确写法
{data.map(item => <Row key={item.id} item={item} />)}

2. 自定义React.memo的比较逻辑 #

React.memo默认仅做浅比较，如果组件接收的props包含复杂对象或函数，浅比较会误判为props变化，触发不必要的重渲染。需要自定义比较函数，精准判断哪些属性变化才需要重渲染：

const Row = React.memo(
  ({ item, onUpdate }) => { /* 组件内容 */ },
  (prevProps, nextProps) => {
    // 仅比较item的关键字段和回调函数的引用
    return (
      prevProps.item.id === nextProps.item.id &&
      prevProps.item.value === nextProps.item.value &&
      prevProps.onUpdate === nextProps.onUpdate
    );
  }
);

3. 用useCallback缓存回调函数 #

如果父组件在渲染时直接创建匿名回调（如onUpdate={() => handleUpdate(item.id)}），每次渲染都会生成新的函数引用，导致子组件props变化触发重渲染。使用useCallback缓存函数，保持引用稳定：

const handleUpdate = useCallback((id, value) => {
  setData(prev => prev.map(item => 
    item.id === id ? { ...item, value } : item
  ));
}, []); // 依赖项为空，仅初始化一次引用

// 子组件使用缓存后的函数
<Row key={item.id} item={item} onUpdate={handleUpdate} />

4. 将编辑状态下沉到局部组件 #

如果不需要实时同步输入值到全局数据，可以把输入框的状态放到单元格组件内部，仅在确认操作（如失焦、回车）时再更新全局数据。这样全局数据不会频繁变化，避免整个网格重渲染：

const EditableInput = ({ item, onConfirm }) => {
  const [localValue, setLocalValue] = useState(item.value);

  const handleConfirm = () => {
    onConfirm(item.id, localValue);
  };

  return (
    <input
      value={localValue}
      onChange={e => setLocalValue(e.target.value)}
      onBlur={handleConfirm}
      onKeyDown={e => e.key === 'Enter' && handleConfirm()}
    />
  );
};

5. 优化数据更新的不可变性 #

更新数组元素时，确保只修改目标元素的引用，避免整个数组的结构被不必要地改动。可以使用immer库简化不可变数据的更新，同时保持其他元素的引用不变，帮助React.memo正确识别不需要重渲染的组件：

import { produce } from 'immer';

const handleUpdate = useCallback((id, value) => {
  setData(produce(draft => {
    const targetItem = draft.find(item => item.id === id);
    if (targetItem) targetItem.value = value;
  }));
}, []);

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