Оптимизация React компонентов со свойством children?

Question

[Олег Драпеза]

Добрый день!

При создании компонентов разметки столкнулся со следующей проблемой - если компонент layout принимает дочерние компоненты в качестве children, и вызывается его метод shouldComponentUpdate - каждый раз текущие и новые props.children не равны друг другу (даже когда на самом деле эти children одинаковы).

Пример кода

При нажатии на кнопку "Сменить цвет" мы меняем state главного компонента App, это вызывает перерисовку его дочернего компонента Layout, у которого children не изменились.

По какой причине children всегда не равны друг другу, и как можно избежать этих перерисовок простейшего статического компонента, кроме реализации своего shouldComponentUpdate (не удобно при большом количестве входящих свойств)?

Answer 1

[davidnum95]

class Layout extends React.PureComponent ?

Comments

[Олег Драпеза]

PureComponent в методе shouldComponentUpdate делает поверхностную проверку свойств, и точно так же решает, что children изменились. Вы можете проверить это в моем примере на лету.

[davidnum95]

Олег Драпеза: react сравнивает ссылки на props(и state), и если они не равны, создает новое vdom. В вашем же случае, когда перерендеривается родитель создается vdom из новых элементов, соответственно старые ссылки на props не равны новым из за чего случается ререндер потомков.

[Олег Драпеза]

davidnum95: То есть, вызов render родителя в любом случае инициирует render потомков? Но будет ли это вызывать изменение реального DOM?

[davidnum95]

Олег Драпеза: В реальном DOM реакт будет изменять только то что реально изменилось.