Блог

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

Я думал, что дочерние элементы выполняют повторный рендеринг по следующей логике, и я думаю, что ошибаюсь в этом. Как react решает, какие дочерние компоненты будут повторно отрисованы при повторных отправках родительского элемента?

• Рендеринг родительского элемента
• вызывается -> дочерний shouldComponentUpdate
• -> если shouldComponentUpdate возвращает true, дочерние повторные рендеры

Родительский рендеринг выглядит следующим образом

   render() {

    let { viewConfig } = this.props
    console.log("ViewConfigSettingBase rendering")
    return (
      <div>
        {
          Object.keys(viewConfig.availableSubviewConfigMap).map((sectionName, index) => {
            var subviewConfigData = viewConfig.availableSubviewConfigMap[sectionName]
            return (
              <ViewConfigSettingRow
                key={sectionName}
                viewConfigData={subviewConfigData}
                sectionName={sectionName}
                parentViewConfig={viewConfig}
                />
            )
          })
        }
      </div>
    )
  }
  

React повторно рендерит при изменении реквизита или состояния. Если вы расширили PureComponent, дочерние элементы выполнят проверку, изменились ли реквизиты. Если да -> shouldComponendUpdate вернет true, в противном случае false. Может быть, это так?

Жизненный цикл компонента: https://facebook.github.io/react/docs/react-component.html

Обновление

Обновление может быть вызвано изменениями реквизитов или состояния. Эти методы > вызываются при повторном рендеринге компонента:

 componentWillReceiveProps()  
shouldComponentUpdate()  
componentWillUpdate()  
render()  
componentDidUpdate()  
  

shouldComponentUpdate()

Используйте shouldComponentUpdate(), чтобы сообщить React, не влияет ли текущее изменение состояния или реквизитов на вывод компонента. Поведение по умолчанию заключается в повторном рендеринге при каждом изменении состояния, и в подавляющем большинстве случаев вы должны полагаться на поведение по умолчанию.

shouldComponentUpdate() вызывается перед рендерингом, когда получены новые реквизиты или > состояние. Значение по умолчанию равно true Этот метод не вызывается для > начального рендеринга или при использовании forceUpdate().

Возврат false не предотвращает повторный рендеринг дочерних компонентов при > изменении их состояния.

В настоящее время, если shouldComponentUpdate() возвращает false, то >componentWillUpdate(), render() и componentDidUpdate() не будут > вызваны. Обратите внимание, что в будущем React может рассматривать shouldComponentUpdate() > как подсказку, а не строгую директиву, и возврат false все равно может привести к повторному рендерингу компонента.

Если вы определяете, что конкретный компонент работает медленно после профилирования, вы можете > изменить его, чтобы наследовать от React.PureComponent, который реализует >shouldComponentUpdate() с неглубокой опорой и сравнением состояний. Если вы > уверены, что хотите написать это вручную, вы можете сравнить this.props > с nextProps и this.state с nextState и вернуть false, чтобы сообщить > React, что обновление может быть пропущено.

Вы можете найти некоторую документацию о процессе рендеринга react на следующих страницах:https://facebook.github.io/react/docs/reconciliation.html
https://facebook.github.io/react/docs/optimizing-performance.html