Tengo 3 componentes con diferentes números. Lo que quiero es algo como esto:
¿Qué debo considerar? aquí está mi juicio. Le agradecería que me diera algunos puntos a tener en cuenta.
https://jsfiddle.net/pizza_hamburger_chicken/ptav9wyg/7/
const {useState, useEffect} = React; const AnimationNumber = ({ number }) => { // ------------ useRef // ------------ useState const [numberForCount, setNumberForCount] = useState(0); // ------------ useEffect useEffect(() => { let count = 0; const id = setInterval(() => { if (count >= number) { clearInterval(id); } else { console.log(++count); setNumberForCount(count); } }, 0.01); }, []); // ------------ methods // ------------ event methods // ------------ api methods return ( <div data-target={number} > <strong> <span>{numberForCount}</span> </strong> </div> ); }; function Example() { return ( <div> <AnimationNumber number={700} /> <AnimationNumber number={100} /> <AnimationNumber number={470} /> </div> ); } ReactDOM.render( <Example />, document.getElementById('root') ); const {useState, useEffect, useCallback} = React; const animationSpeed = 7 const useCounter = (ending, start) => { const [count, setCount] = useState(0) const ratio = parseInt(ending/100) useEffect(() => { if (start) { const interval = setInterval(() => { if (count < ending) { setCount(count+ratio > ending ? ending : count+ratio) } else { clearInterval(interval) } }, animationSpeed) return () => clearInterval(interval) } }, [count, start]) return count } const AnimationNumber = ({ number , start}) => { let count = useCounter(number, start) return ( <div data-target={number} > <strong> <span>{count}</span> </strong> </div> ); }; function Example() { const [starter, setStarter] = useState(false) const start = useCallback(() => { setStarter(true) }, []) return ( <div> <button onClick={start}>Start!</button> <AnimationNumber number={100} start={starter} /> <AnimationNumber number={1500} start={starter} /> <AnimationNumber number={5000} start={starter} /> <AnimationNumber number={590} start={starter} /> <AnimationNumber number={1024} start={starter} /> <AnimationNumber number={3600} start={starter} /> </div> ); } ReactDOM.render( <Example />, document.getElementById('root') );Si el único propósito del componente es mostrar este número, entonces podría evitar el estado por completo y usar una referencia y actualizar el texto interno del tramo directamente
const {useState, useRef, useEffect} = React; const _period = 10000 const AnimationNumber = ({ number, intervalTime=10, period=_period }) => { const countEl = useRef(null); const count = useRef(0); useEffect(() => { const interval = setInterval(() => { if (count.current < number) { const amountPerRun = number * (intervalTime/period); count.current += amountPerRun; countEl.current.innerText = Math.min(number, Math.floor(count.current)); return; } clearInterval(interval) console.log('done!', number); }, intervalTime); return () => clearInterval(interval) }, []); return ( <div> <strong> <span ref={countEl} /> </strong> </div> ); }; function Example() { return ( <div> <AnimationNumber number={700} /> <AnimationNumber number={100} /> <AnimationNumber number={470} /> </div> ); } ReactDOM.render( <Example />, document.getElementById('root'));