Javascript 如何不重新渲染React组件'；什么是特定的DOM元素？

最近，我开始用React重构我的主干web应用程序，并尝试使用React和sigma.js编写交互式图形可视化组件

我大致了解了React的声明性范例，以及它是如何通过使用jsx语法的

render（）

方法实现的

但让我感到困惑的是，我无法以声明方式定义我的React组件。

这是因为javascript生成了DOM元素，只有在声明性DOM元素通过

render（）

呈现之后，才能在

componentDidMount（）

上生成DOM元素

这让我担心性能和错误动画（我的图形在实例化时会动画，在这种情况下，每次

render（）

调用时都会重新播放）

我当前的代码如下所示：

...

render: function() {
  return (
    <div class="my-graph-visualization-component">
      {/*
          This div is defined declaratively, so won't be re-rendered
          on every `change` events* unless `React`'s diff algorithm 
          think it needs to be re-rendered.
      */}
      <div class="my-declarative-div">{this.props.text}</div>

      {/*
          This div will be filled by javascript after the `render()`
          call. So it will be always cleared and re-rendered on every
          `change` events.
      */}
      <div class="graph-container MY-PROBLEM-DIV"></div>
    </div>
  );
},

componentDidMount: function() {
  this.props.sigmaInstance.render('.graph-container', this.props.graph);
}

...

。。。
render:function（）{
返回(
{/*
此div是以声明方式定义的，因此不会重新呈现
在每个'change'事件*上，除非'React'的diff算法
我认为它需要重新渲染。
*/}
{this.props.text}
{/*
此div将在'render（）之后由javascript填充`
因此，它将始终被清除，并在每个
`改变事件。
*/}
);
},
componentDidMount:function（）{
this.props.sigmanstance.render（“.graph容器”，this.props.graph）；
}
...

有没有办法做类似的事情

render: function() {
  return (
    <div class="my-graph-visualization-component">
      <div class="my-declarative-div">{this.props.text}</div>

      {/* 
          Any nice workaround to tell react not to re-render specific
          DOM elements? 
      */}
      <div class="graph-container NO-RE-RENDER"></div>
    </div>
  );
},

render:function（）{
返回(
{this.props.text}
{/* 
告诉react不要重新渲染特定对象有什么好的解决方法吗
DOM元素？
*/}
);
},

这样我的sigma.js图形组件就不会在状态的每一次

更改
上都重新实例化相同的启动动画了

因为它似乎是关于处理react组件的非声明性部分的，所以对于这类问题的任何解决方法都是值得赞赏的。
您可以使用。这基本上告诉React远离它的内容，在进行DOM扩散时，它不会评估/更新它。
最干净的方法是定义React子组件并重新渲染真正需要的内容，而不是重新渲染整个块

render: function() {

    return (
       <div class='myStaticContainerNotupdated'>
           <SubComponentToUpdateOften/>
           <MyGraph/>
       </div>
    )

}

render:function（）{
返回(
)
}

另一种解决方案可能是处理图形并实现单例，以便在第一次渲染时仅播放一次动画

但实际上，我所看到的最简单、最干净的事情是创建干净、独立的子组件，并在需要时进行更新。您从不更新大容器组件，只更新子容器组件

希望有帮助
还有一个问题。。。那么我应该如何以反应式的方式实现
组件呢<代码>
将其图形对象作为其状态，并应通过
刷新（）
方法更新其显示（此方法将由库提供），而不是React的
渲染（）
，在其图形状态更改时。。我真正不知道的是如何实现这些javascript定义（由代码定义，而不是jsx定义）组件，我不确定是否理解。是一个独立的反应组件。它自己的状态和渲染功能。我对同样的问题感兴趣，你发现了什么吗？你可以使用它，它只在sigma属性或图形改变时才重新渲染。见资料来源