当我们在开发前端web时，最常见的逻辑就是从后台服务器获取并处理数据然后渲染到浏览器页面上，过程中有不少的细节需要注意，其中一个就是数据竞态条件问题，本文会基于React并结合一个小demo来解释何为竞态条件，以及循序渐进地介绍解决竞态条件方法。框架不同解决的方式会不一样，但不影响理解竞态条件。
获取数据
下面是一个小demo：前端获取文章数据，并渲染到页面上
App.tsx
importReactfromreact;
import{Routes,Route}fromreact-router-dom;
importArticlefrom./Article;
functionApp(){
return(
Routes
Routepath="/articles/:articleId"element={Article/}/
/Routes
);
}
exportdefaultApp;
Article.tsx
importReactfromreact;
importuseArticleLoadingfrom./useArticleLoading;
constArticle=()={
const{article,isLoading}=useArticleLoading();
if(!article
isLoading){
returndivLoading.../div;
}
return(
div
p{article.id}/p
p{article.title}/p
p{article.body}/p
/div
);
};
exportdefaultArticle;
在上述的Article组件中，我们把相关的数据请求封装到了自定义hook"useArticleLoading"中，为了页面的使用体验，我们要么显示获取的数据，要么显示加载中。这里加上了加载态的判断。
useArticleLoading.tsx
import{useParams}fromreact-router-dom;
import{useEffect,useState}fromreact;
interfaceArticle{
id:number;
title:string;
body:string;
}
functionuseArticleLoading(){
const{articleId}=useParams{articleId:string}();
const[isLoading,setIsLoading]=useState(false);
const[article,setArticle]=useStateArticle
null(null);
useEffect(()={
setIsLoading(true);
fetch(`