Как не перерисовать определенные элементы DOM компонента React?

Недавно я начал проводить рефакторинг своего веб-приложения Backbone с помощью React, и я пытаюсь написать интерактивный компонент визуализации графиков, используя response и sigma.js.

Я примерно понял декларативную парадигму React и то, как она реализуется render() метод с использованием синтаксиса JSX.

Но то, что спотыкает меня, - это ситуация, когда я не могу определить свой компонент 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 по штатам?

Поскольку, похоже, речь идет об обработке не декларативной части реагирующих компонентов, любые обходные пути для такого рода проблем будут приветствоваться.

Источник

2 ответа

Решение

Самый простой способ - определить подкомпоненты реакции и перерисовать то, что вам действительно нужно, вместо перерисовки всего блока.

render: function() {

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

}

Другое решение может заключаться в том, чтобы работать на вашем графике и реализовывать синглтон, чтобы ваша анимация воспроизводилась только один раз при первом рендере.

Но на самом деле самая простая и чистая вещь, которую я вижу, - это создать чистый отдельный подкомпонент и обновлять их при необходимости. Вы никогда не обновляете большой контейнерный компонент, а только один сабвуфер.

Надеюсь, поможет

Источник

Вы можете использовать опасно SetInnerHTML. Это в основном говорит React держаться подальше от его контента, и он не будет оценивать / обновлять его, когда делает это DOM diffing.

Источник
Другие вопросы по тегам