react2angular绑定同一数据的两个指令互相干扰、编辑器卡顿问题求助

• 两个独立react2angular指令同时绑定同一个Angular作用域变量editorState.content，形成循环更新链路：编辑器内容变化→更新作用域变量→工具栏监听到变量变化触发重渲染→工具栏状态变化又回写作用域变量→编辑器再次触发重渲染，无限循环导致卡顿，同时多次重渲染会丢失编辑器选区状态，导致工具栏操作完全失效。
• 现有指令handleChange中嵌套了多层冗余的$timeout调用，导致更新队列阻塞，进一步放大卡顿问题。
• 编辑器和工具栏指令各自独立做序列化/反序列化处理，容易出现值解析结果不一致的问题，加重状态不同步的情况。

1. 掐断循环更新链路（优先级最高） #

Angular层只保留编辑器组件作为唯一的状态回写入口：

• 工具栏指令去掉ngModel双向绑定，改为单向接收editorState.content的值，工具栏的change事件不再直接回写作用域变量，改为触发自定义事件，把操作参数传递给编辑器组件，由编辑器统一执行内容修改后回写到Angular作用域，从根源避免双向绑定循环。
• 如果需要保留双向绑定逻辑，给React组件的props.value更新加深比较校验，只有值真实发生内容变化（而非引用变化）的时候才更新本地state，示例：

import { isEqual } from 'lodash';
React.useEffect(() => {
  if (!isEqual(value, props?.value)) {
    setValue(props?.value);
  }
}, [props.value]);

2. 清理冗余更新逻辑 #

去掉指令handleChange中嵌套的多层$timeout和不必要的$apply调用，简化为：

scope.handleChange = (change) => {
  // 过滤只修改选区的操作，避免无意义的状态更新
  if (change.operations.every(op => op.type === "set_selection")) return;
  ngModelCtrl.$setViewValue(change.value);
  $timeout(); // 触发一次脏检查即可
};

3. 统一序列化/反序列化逻辑 #

把html序列化、反序列化逻辑抽成公共Angular服务，两个指令复用同一套逻辑，避免两边解析出来的值不一致。

4. 补充选区状态同步 #

在Angular作用域新增editorState.selection字段，编辑器选区变化时同步更新该字段，工具栏执行操作前先读取该字段恢复选区，避免工具栏操作时找不到选区导致失效。

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