React：父组件更新时阻止子组件重渲染，解决输入框失焦问题

我之前在做类似的可视化项目时也踩过这个坑，给你几个针对性的解决思路：

1. 先阻止事件冒泡，避免触发图表全局更新 #

很多时候输入框的点击/聚焦事件会冒泡到react-diagrams的画布层，触发图表的交互状态变更（比如节点选中状态更新），进而导致整个节点重渲染。你可以直接在输入框上阻止事件冒泡：

<input
  value={yourValue}
  onChange={handleInputChange}
  onClick={(e) => e.stopPropagation()}
  onFocus={(e) => e.stopPropagation()}
/>

这个方法成本最低，先试试能不能解决问题。

2. 用React.memo（或优化shouldComponentUpdate）隔离节点重渲染 #

如果你已经试过shouldComponentUpdate但没效果，大概率是没有正确处理引用类型props的比较。比如react-diagrams可能会给节点传递一些布局相关的对象/数组props，每次图表更新时这些引用都会变化，导致shouldComponentUpdate误判为需要重渲染。

• 如果是函数组件：用React.memo包裹你的自定义节点组件，并传入自定义比较函数，忽略那些不影响节点内部状态的全局props：

const CustomNode = React.memo((props) => {
  // 你的节点渲染逻辑
}, (prevProps, nextProps) => {
  // 只比较和节点内部相关的props，比如实体列表、输入框值等
  return prevProps.entities === nextProps.entities && prevProps.inputValue === nextProps.inputValue;
});

• 如果是类组件：不要只用浅比较，对引用类型props可以用深比较工具（比如lodash的_.isEqual）来判断是否需要更新：

shouldComponentUpdate(nextProps) {
  return !_.isEqual(this.props.entities, nextProps.entities) || this.props.inputValue !== nextProps.inputValue;
}

3. 把输入框抽成独立的受控组件，隔离状态 #

把输入框单独封装成一个小组件，让它自己管理局部状态（或者只接收必要的props），这样输入时的状态变化只会触发这个小组件的重渲染，不会波及到整个节点和图表：

const IsolatedInput = React.memo(({ value, onChange }) => {
  return <input value={value} onChange={onChange} />;
});

然后在你的列表项里使用这个组件，确保它的props只有在真正需要更新时才变化。

4. 检查react-sortable-hoc的配置是否触发了不必要更新 #

react-sortable-hoc的一些回调函数（比如onSortStart、onSortEnd）如果没有正确缓存，每次渲染都会生成新的函数引用，导致父组件（节点）触发重渲染。你可以用useCallback（函数组件）或者在构造函数里绑定回调（类组件）来避免这个问题：

// 函数组件示例
const handleSortEnd = useCallback(({ oldIndex, newIndex }) => {
  // 你的排序逻辑
}, [entities]);

<SortableList onSortEnd={handleSortEnd} {...otherProps} />

同时确保排序相关的状态是在节点组件内部管理，不要提升到图表的全局状态中，避免排序操作触发整个图表的更新。

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