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

Question

最近我开始用 React 重构我的 Backbone 网络应用程序，我正在尝试编写交互式图形可视化使用 react 和 sigma.js 的组件。

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

但是让我迷迷糊糊的是我无法声明地定义我的 React 组件的情况。

这是因为 javascript 生成的 DOM 元素只能在声明性 DOM 元素被 [=13] 渲染后在 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

您可以使用 dangerouslySetInnerHTML。这基本上告诉 React 远离它的内容，它不会 evaluate/update 它在做 DOM 差异时。

Answer 2

最干净的方法是定义反应子组件并重新渲染你真正需要的而不是重新渲染整个块

render: function() {

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

}

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

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

希望对您有所帮助

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

How to not re-render React component's specific DOM elements?

javascript

reactjs

sigma.js