Самый оптимизированный способ манипулирования домом в React

Question

Какой самый надежный / оптимизированный способ в React для анимации элемента dom с числовой последовательностью, идущей от 0 до N, с использованием библиотеки анимации? Я предполагаю, что использование setState не будет идеальным, даже если вы используете его с методом shouldComponentUpdate.

Является ли ссылка наиболее надежным вариантом?

Answer 1

Что касается меня, я думаю, что лучший выбор - использовать библиотеку реагировать на движение

Answer 2

Допустим, мы используем gsap для анимации нашего div, решение может быть примерно таким:

import React, { PureComponent } from 'react';
import { TweenLite, Power2 } from 'gsap';

class Example extends PureComponent {

    componentDidMount() {
        this.dummy = {
            value: 0
        };

        TweenLite.to(this.dummy, 0.8, {
            value: 100,
            ease: Power2.easeInOut,
            onUpdate: () => {
                this.domElement.innerHTML = this.dummy.value;
            }
        });
    }

    componentWillUnmount() {
        TweenLite.killTweensOf(this.dummy);
    }
    render() {
        return (
            <div ref={(dom) => { this.domElement = dom; }} />
        );
    }
}