Я тестировал производительность анимированных компонентов React разными способами.Два, которые показались мне наиболее интересными, были:
В родительском компоненте сохраняйте положение дочерних элементов в состоянии и обновляйте, используя requestAnimationFrame, затем передавайте реквизиты группе детей, которые перемещаются, используяtranslateX() для лучшей производительности
поддерживать состояние позиции у каждого из дочерних элементов и обновлять его положение самостоятельно
Я видел аналогичную производительность между двумя,Я знаю, что React группирует несколько вызовов на setState, но мне интересно, все еще ли он группирует вызовы между отдельными компонентами.В первом подходе setState вызывается только один раз за кадр.Во втором подходе мы вызываем setState для каждого компонента каждого кадра.
Какая лучшая практика?
Возможно, я не использую достаточное количество дочерних компонентов, чтобы увидеть реальную разницу, но если у кого-то больше знаний о процессе согласования React,любые идеи, которые я хотел бы узнать.