Ручное обновление DOM и рендеринг компонентов с использованием forceUpdate ()

Question

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

const Hello = () => <span id="hello">hello</span>;
const World = () => <span id="world">world</span>;

class HelloWorld extends React.Component {
  render() {
    return (
      <div id="hello-world">
        <Hello />
        <World />
        <button onClick={() => this.forceUpdate()}>re-render</button>
      </div>
    )
  }
}

Используя следующий код, я могу изменить DOM так, чтобы Hello следовал за World

var hello = document.getElementById('hello-world').children[0]
var world = document.getElementById('hello-world').children[1]
hello.parentNode.insertBefore(world, hello)

Когда я запускаю повторный рендеринг, я ожидаю, что React отобразит в DOM то, что он представил в своем виртуальном DOM (Hello World). Вместо этого он продолжает отображать World Hello. Почему это? В каких случаях ручные обновления DOM, такие как это, вызывают проблемы?

Answer 1

Согласно документам :

Вызов forceUpdate () вызовет render () для компонент, пропуская shouldComponentUpdate (). Это вызовет обычные методы жизненного цикла для дочерних компонентов, включая Метод shouldComponentUpdate () каждого дочернего элемента. Реагировать будет еще только обновите DOM, если разметка изменится.

Это означает, что будет вызван render(), но если ваши данные не изменились, эти части DOM не будут обновлены - они одинаковы.

Answer 2

Для такого рода проблем (рендеринг динамических компонентов) я бы использовал массив и изменил бы порядок с помощью forceUpdate ().

helloWorld = [Hello, World];

и сделать так, чтобы он отображал карту, чтобы дать ей ключ:

render() {
 return (
   <div>{
     helloWorld.map(Item => (<Item key={ uniqueVar } />)
   )
  }</div>
 )
}