Я пытаюсь понять нюансы использования чего-то вроде игрового цикла внутри React (версия 16+). Я не понимаю, как стратегия рендеринга React конфликтует (или не конфликтует) с другим планировщиком рендеринга — в данном случае: запрашиваем кадр анимации.
Обратитесь к следующему примеру, где игровой цикл используется для установки состояния:
class Loop extends Component {
constructor(props) {
super(props);
this.state = { x: 0 };
}
componentDidMount() {
let then = performance.now();
const loop = now => {
if (this.state.x < 400)
window.requestAnimationFrame(loop);
const dt = now - then;
then = now;
this.setState(prevState => ({ x: prevState.x + (dt * 0.1) }));
};
loop(then);
}
render() {
const { x } = this.state;
return <div style={{
backgroundColor: "green",
height: "50px",
width: `${x}px`
}}></div>;
}
}
Будет ли это работать так же, как если бы кто-то манипулировал DOM напрямую? Или будет реагировать на что-то вроде пакетных обновлений состояния для рендеринга, побеждая цель использования кадра анимации запроса?