Для конкретной проблемы повторного рендеринга Elm использует виртуальное DOM-диффузирование: если его виртуальный DOM изменился, реальный DOM соответствующим образом обновляется. Это намного дешевле, чем работать напрямую с DOM.
Интересно, что поведение Elm при использовании Html.lazy
такое же, как и у React , когда вы определяете компоненты как функции (т. Е. Не объект из класса, унаследованного от Component
или PureComponent
): поскольку вы не полагаетесь на побочные эффекты (жизненный цикл - один из подходящих примеров), при одинаковых входах функций ваш компонент всегда будет выдавать один и тот же результат. Таким образом, Elm или React нужно перерисовать ваш компонент, только если его входные данные каким-то образом изменятся. Таким образом, вам не нужно заботиться о том, нужно ли перерисовывать ваш компонент: об этом позаботится Elm.
Итак, что насчет этих методов жизненного цикла? Например:
shouldComponentUpdate
: как я упоминал выше, при использовании Html.lazy
Elm проверяет, изменился ли ваш ввод: если это не произошло, повторный рендеринг явно не нужен в функциональном контексте. В противном случае Elm будет использовать свой виртуальный DOM. Однако в обоих случаях Элму не нужно сообщать, нужен ли рендеринг или нет.
componentWillReceiveProps
: в значительной степени соответствует вашей update
функции.
componentDidMount
: Я не думаю, что есть эквивалент этому: либо ваш компонент существует и получает отрисовку, либо нет. Это очень похоже на использование функции в качестве компонента.