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

Question

最近我开始用 React 重构我的 Backbone web 应用程序，我正在尝试使用 react 和 < em>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 图形组件就不会在状态的每次更改 时都使用相同的开始动画重新实例化？

因为它似乎是关于处理 React 组件的非声明部分，所以对于此类问题的任何解决方法将不胜感激。

Answer 1

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

render: function() {

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

}

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

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

希望对你有帮助