Отложить результаты цикла React render () на определенное время? - PullRequest
0 голосов
/ 06 октября 2019

Я работаю над приложением React Native, которое использует несколько одновременных react-native-reanimated анимаций. Между ними есть некоторые изменения в состоянии, которые приводят к render() циклам. Для некоторых из этих циклов render() требуется до 100ms, особенно на старых устройствах, и пока работает render(), анимация продолжается, поэтому необходимо синхронизировать анимацию с циклами render(). Может быть, производительность render() можно оптимизировать (что мы и собираемся сделать), но я думаю, что некоторые из них будут работать как минимум 2-3 кадра анимации, поэтому синхронизация анимации и render() все равно будет необходима.

Этого можно достичь несколькими способами, но самое простое, о чем я могу подумать, - это использовать предсказуемое время, используемое для цикла render(). Если мы знаем, что setState() вместе с render() берут не менее 100ms, то ситуация "render() заканчивается до анимации" исключается, что значительно упростит весь процесс. Поэтому мне нужен такой API:

this.suspendGuiUpdates();
this.setState(newState);
setTimeout(() => {
    this.resumeGuiUpdates();
}, 100);

Таким образом, методы setState() и render() могут выполнять свою работу, но у нас есть гарантия, что обновление GUI будет, по крайней мере, 100ms после того, как мы инициировали изменение.

Есть ли такая функция в React или React Native?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...