Неправильно ли проходить реквизит через несколько компонентов до ребенка?

Question

Плохо ли это/может ли это повредить производительность, если я часто пропускаю реквизиты от корневого компонента до компонентов дочернего компонента 4-5?

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

Если это действительно так, должен ли я сгладить свой корневой компонент, или я должен реализовать пользовательский «shouldComponentUpdate» или что-то еще?

Answer 1

Внедрение shouldComponentUpdate - очень хорошая практика для минимизации повторного рендеринга, особенно если компоненты поддерживаются простыми и малыми, чтобы можно было просто определить shouldComponentUpdate.

В качестве альтернативы рассмотрите react-redux или другой контейнер состояния, чтобы упростить управление без особых проблем.

Answer 2

Реакция не будет повторно отображать DOM, если дерево фактически не требует обновления/изменения, поэтому затраты на реновацию нет.

Вы также можете использовать shouldComponentUpdate() для управления вашими обновлениями для каждого компонента.

Facebook's React Reconciliation

shouldComponentUpdate

Answer 3

Необходимость должны быть редкими, но РЕАКТ дифф-Инг алгоритм обеспечит обновления ничего, если это не является необходимым. Производительность не должна страдать.

Например, я обычно запускаю свои приложения с классом контейнера, который выполняет медиа-запрос (используя react-responsive). Используя этот медиа-запрос, я передаю либо display="desktop", либо display="mobile" в качестве опоры следующего компонента. Я обычно передаю this.props.display полностью вниз по моему дереву компонентов, и это решающий фактор в том, как выглядит мой CSS (либо рабочий стол, либо мобильный вид). В этом случае производительность фактически повышается!