如何不重新渲染 React 组件的特定 DOM 元素？

Question

最近我开始用 React 重构我的 Backbone web 应用程序，我正在尝试使用 react 和 sigma.js。

我大致了解了React的声明式范式，以及它是如何使用jsx语法的render()方法实现的。

但让我绊倒的是我无法以声明方式定义我的 React 组件的情况。

这是因为javascript生成的DOM元素，只有在声明性的DOM元素被render()渲染后，才能在componentDidMount()上生成。

这让我担心性能和错误动画（我的图表在实例化时间进行动画，在这种情况下每次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() {
  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>
  );
},

这样我的 sigma.js 图形组件就不会在每个change 状态上以相同的开始动画重新实例化？

由于它似乎是关于处理反应组件的非声明性部分，因此对于此类问题的任何解决方法都将不胜感激。

Answer 1

最简洁的方法是定义 react 子组件并重新渲染您真正需要的内容，而不是重新渲染整个块

render: function() {

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

}

另一个解决方案可能是在您的图表上工作并实现一个单例，这样您的动画只会在第一次渲染时播放一次。

但实际上我看到的最简单和最干净的事情是创建干净的单独子组件并在需要时更新它们。您永远不会只更新 subs 的大容器组件。

希望对你有帮助

Answer 2

您可以使用dangerouslySetInnerHTML。这基本上告诉 React 远离它的内容，并且在进行 DOM diffing 时它不会评估/更新它。