Question

是否有一些库，设计模式或方法，可以忽略由同一组件调度的操作引起的React组件更新？

更多详情：

我现在在做什么：

reduce

我想要实现的目标：

class Canvas extends Component {
  onNodeMove(){ // Called by JointJS
    this.ignoreAction = true; // Set the ignore flag
    this.props.onNodeMove(node); // Dispatch the action
  }

  shouldComponentUpdate(){
    if(this.ignoreAction){ // One-time only ignore
      this.ignoreAction = false;
      return false;
    }

    return true;
  }

  componentDidUpdate() {
      this.graph.fromJSON(); // Expensive operation
  }
}

我有一个名为Canvas的高度复杂的组件，它包装SVG画布并用作Graph编辑器（我使用JointJS库来处理绘图）。它处理从移动/添加/删除/选择节点，平移，缩放等所有内容...

作为我正在处理的编辑器，支持选项卡我需要将Canvas状态镜像到Redux状态，因此当更改选项卡时，Canvas可以重新加载来自Redux的新状态。 Canvas状态作为对象存储在Redux中，它可能变得相当大，但主要问题是将此对象传递回JointJS，因为它解析并将其重新呈现给SVG画布，操作相当昂贵。 Canvas组件中的每个事件（移动节点，缩放，平移等）都需要调度到Redux，但这也意味着组件将被更新并且JointJS重新加载，这是我想要避免的，因为更改是已存在于SVG画布中。

到目前为止，我所做的是在调度操作之前在组件（class Canvas extends Component { componentDidUpdate() { if (...did the update originated from other component?...) { this.graph.fromJSON(this.props.graph); // Reload graph - Expensive operation } } }）中设置了一个标志，然后在ignoreAction中我只忽略一个操作然后我将接收所有其他操作变化。但是我真的不喜欢这种方法，因为我很确定它会爆炸到我的脸上，因为其他一些动作可以同时创建，错误的动作会被忽略等等......

我试图弄清楚如何实现这一点，但到目前为止，我真的认为唯一的方法是以某种方式忽略源自组件的动作（例如，根据动作的来源过滤组件的更新））。

自从我提出这个问题后，我可能会遇到一些架构问题，如果您这么认为，请告诉我。

编辑：另一个问题是Canvas组件中的任何更改都需要“立即”传播到其他组件。

忽略由从同一组件调度的操作引起的更新

0 个答案: