Question

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

我粗略理解 React 的声明范例以及如何使用 jsx 语法通过render()方法实现它。

但令我误解的是我无法声明定义 React 组件的情况。

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

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

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

render: function() {

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

}

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

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

希望有所帮助

Answer 2

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

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

2 个答案: