react hooks实现滚动数字效果
时间: 2023-10-19 16:06:06 浏览: 62
可以使用useState和useEffect两个Hooks来实现滚动数字效果。
首先,我们需要定义一个state来保存当前数字的值,以及一个目标数字的值。然后,使用useEffect监听目标数字的变化,当目标数字变化时,启动一个计时器,每隔一定时间更新当前数字的值,直到当前数字等于目标数字。
下面是一个简单的实现示例:
```jsx
import React, { useState, useEffect } from 'react';
const ScrollNumber = ({ number }) => {
const [currentNumber, setCurrentNumber] = useState(0);
const [targetNumber, setTargetNumber] = useState(number);
useEffect(() => {
setTargetNumber(number);
}, [number]);
useEffect(() => {
let timer = null;
if (currentNumber < targetNumber) {
timer = setInterval(() => {
setCurrentNumber(currentNumber + 1);
}, 50);
}
return () => clearInterval(timer);
}, [currentNumber, targetNumber]);
return (
<span>{currentNumber.toLocaleString()}</span>
);
}
export default ScrollNumber;
```
在上面的示例中,我们定义了一个ScrollNumber组件,接受一个number属性作为目标数字,当number变化时,使用useEffect更新targetNumber的值。然后,使用第二个useEffect监听currentNumber和targetNumber的变化,如果currentNumber小于targetNumber,启动一个计时器,每隔50ms更新一次currentNumber的值,直到currentNumber等于targetNumber。最后,返回一个包含当前数字的span元素。
使用方式如下:
```jsx
import React from 'react';
import ScrollNumber from './ScrollNumber';
const App = () => {
return (
<div>
<h1>ScrollNumber Demo</h1>
<ScrollNumber number={123456789} />
</div>
);
}
export default App;
```
这样就可以在页面上看到一个滚动数字效果了。