react?hooks页面实时刷新方式(setInterval)
更新时间:2024年03月12日 15:30:57 作者:一车鸡蛋
这篇文章主要介绍了react?hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
1. 实现
页面实时刷新一般用定时器(setInterval())实现。
- 定时器:setInterval() - 每多少秒执行一次指定的代码。(执行多次)
- 延时器:setTimeout() - 多少秒以后执行指定代码。(执行1次)
定时器与延时器均为异步程序,放在异步队列里执行!
2. 注意点
- 1. 页面使用定时器一定要记得清除。
- 2. useEffect 的数组依赖不要忘记,不然只执行一次。
- 3. 也可以使用useRef(为了避免setInterval变量形成闭包)
方式一:使用数组依赖
function Index() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { //可以调接口 //可以存state,如setCount(count + 1) //可以调其他函数 }, 1000); return () => clearInterval(timer); //清除定时器不要忘记 }, [count]); //数组依赖不要忘记 return <div>{count}</div>; }
方式二:使用useRef
function Index() { const savecallback=useRef(null); //为了避免形成闭包 function callback(){ // 可以调其他函数 // 可以调接口 } /*每当组件被重新渲染,useEffect 都会将最新的回调函数赋值给 ref.current,接着 ref.current会被放到 setInterval 里去执行。所以 setInterval 虽只在组件初始化时被启动了一次,但它在执行每次定时任务时,使用的都是最新的回调函数。回调函数不再被困于闭包当中,最新的 state、props 自然能够被取到。*/ useEffect(() => { (savecallback as any).current = callback; }); useEffect(() => { const timer = setInterval(() => { (savecallback as any).current(); }, 1000); return () => clearInterval(timer); }, []); return <div>页面</div>; }
方式三:使用useReducer 状态管理
(对于定时更新某个变量更友好,定时调接口的话还是上边两种更方便一点)
const intitstate= {count: 0}; function reducer(state = 0,action) { return {count: state.count + 1}; } export default function Index() { const [state, dispatch] = useReducer(reducer,intitstate); useEffect(() => { setInterval(() => { dispatch(); }, 1000); }, []); return <div>{state.count}</div>; }
因为闭包的原因,回调函数无法取到最新的 state,而大多数场景下我们更新 state 前又必须先获取 state 的当前值。
那如何才能够在不读取最新 state 的前提下,对 state 进行增量更新,可以用useReducer 状态管理。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
React Native使用fetch实现图片上传的示例代码
本篇文章主要介绍了React Native使用fetch实现图片上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03Objects are not valid as a Rea
这篇文章主要为大家介绍了Objects are not valid as a React child报错解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12npx create-react-app xxx创建项目报错的解决办法
这篇文章主要介绍了npx create-react-app xxx创建项目报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论