Запоминание lodash isEqual или сравнение объектов prop
Мне приходится работать с компонентом, который обновляет состояние для анимации. Для повышения производительности я добавил
shouldComponentUpdate(prevProps) {
return !isEqual(prevProps.properties, this.props.properties)
}
его дочерним компонентам.
properties — это объект, содержащий до 20 свойств.
Это значительно улучшило производительность, однако isEqual это довольно дорого (до 60 раз в секунду).
Имеет ли смысл запоминать его, или есть более легкая альтернатива запуску isEqual на каждом рендере, проверяя, одинаковы ли объекты?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Запоминать isEqual бесполезно, потому что это уже делает строгую проверку на равенство для его параметров. Если prevProps.properties === this.props.properties, штрафа за производительность нет.
Чтобы улучшить производительность shouldComponentUpdate и избежать глубоких проверок на равенство, свойство properties должно быть неизменяемым и использовать строгую проверку на равенство:
shouldComponentUpdate(prevProps) {
return prevProps.properties !== this.props.properties;
}
Предполагается, что он неизменяемый, потому что неизменность активно продвигается для состояния в React именно из-за этой проблемы. Если вы собираетесь изменить state.properties, это должно привести к созданию нового объекта setState({ properties: {...} }). Таким образом, вы всегда можете предположить, что если prevProps.properties !== this.props.properties, объект был изменен.
Я не очень знаком с концепцией неизменности, свойства - это объект из состояния родительского контейнера, можно ли сделать это неизменным?