react中如何迅速第一时间获取并渲染state状态值（与界面同步），如何延迟获取并渲染state状态值？

定位算法工程师

已于 2023-03-20 11:03:29 修改

阅读量552

点赞数

分类专栏： react 文章标签： react.js javascript 前端

于 2023-03-10 15:27:45 首次发布

本文链接：https://blog.csdn.net/qq_37967853/article/details/129443625

版权

react 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在React开发中，通常希望在state值改变时立即更新页面。可以使用函数式更新state和useRef来实现。然而，当API响应慢时，应避免过早获取状态值。解决方案包括设置定时器、在nextTick中更新状态或在异步函数中执行逻辑。例如，在openlayers地图渲染慢的情况下，需确保状态获取不早于地图渲染完成。

摘要由CSDN通过智能技术生成

1.在大多数场景中，state值改变，希望页面马上更新渲染，那么如何做呢？
答：1）set状态值时通过函数返回
在这里插入图片描述
2）通过useRef实现缓存

 const filepath_=useRef<any>()
 filepath_.current=data
 //这种方式比setState快
 console.log("文件夹路径",filepath_);

2.在有些场景中希望延迟获取状态值A，比如有一个API的反应渲染较慢，过早拿到状态值判断而执行API可能导致API无返回值的情况（如openlayers地图要素过多，渲染过慢，比状态值的获取还慢）。
解决：1）设置定时器（不推荐）
2）在nextTick中set状态值，在nextTick中调用逻辑判断执行的函数。
3）再在一个异步函数（后端接口函数）中调用逻辑判断执行函数。