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

Question

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

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

但令我困惑的是，在某些情况下我无法声明定义我的 React 组件。

这是因为只有在声明式 DOM 元素由 render() 渲染后，才能在 componentDidMount() 中生成 javascript 生成的 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() {
  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图形组件？

由于似乎涉及到处理React组件的非声明性部分，因此任何解决这类问题的方法都将不胜感激。

- June

---

我对同样的问题很感兴趣，你找到了什么吗？ - michael_bitard

你可以使用react-sigma，它只在sigma属性或图形更改时进行重新渲染。请参见源代码 https://github.com/dunnock/react-sigma/tree/master/src - Max Vorobjev

Answer 1

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

render: function() {

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

}

另一个解决方案可能是修改您的图表并实现单例，以便您的动画仅在第一次渲染时播放。

但是，我认为最简单和最清晰的方法是创建干净的独立子组件，并在需要时更新它们。您只需更新子组件而不是大容器组件。

希望这能帮到您。

- François Richard

---

另外一个问题...那我该如何以React的方式实现<MyGraph />组件？<MyGraph />将会把它的图形对象作为状态，而且应该通过 refresh() 方法来更新它的显示（这个方法将会由库提供），而不是通过React的render()方法，在它的图形状态发生变化时更新...我真正不知道该如何实现这些由Javascript定义的（由代码定义，而不是JSX）组件。 - June

我不确定是否理解。 <MyGraph/> 是一个独立的React组件，具有自己的状态和渲染函数。 - François Richard

Answer 2

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

- David Hellsing