React競態(tài)條件Race Condition實例詳解
競態(tài)條件
Race Condition，中文譯為競態(tài)條件，旨在描述一個系統(tǒng)或者進程的輸出，依賴于不受控制事件的出現(xiàn)順序或者出現(xiàn)時機。
舉個簡單的例子：
if (x == 5) // The "Check"
{
y = x * 2; // The "Act"
// 如果其他的線程在 "if (x == 5)" and "y = x * 2" 執(zhí)行之間更改了 x 的值
// y 就可能不等于 10.
}
你可能想，JavaScript 是單線程，怎么可能出現(xiàn)這個問題？
React 與競態(tài)條件
確實如此，但前端有異步渲染，所以競態(tài)條件依然有可能出現(xiàn)，我們舉個 React 中常見的例子。
這是一個非常典型的數(shù)據(jù)獲取代碼：
class Article extends Component {
state = {
article: null
};
componentDidMount() {
this.fetchData(this.props.id);
}
async fetchData(id) {
const article = await API.fetchArticle(id);
this.setState({ article });
}
// ...
}
看起來沒什么問題，但這段代碼還沒有實現(xiàn)數(shù)據(jù)更新，我們再改一下：
class Article extends Component {
state = {
article: null
};
componentDidMount() {
this.fetchData(this.props.id);
}
componentDidUpdate(prevProps) {
if (prevProps.id !== this.props.id) {
this.fetchData(this.props.id);
}
}
async fetchData(id) {
const article = await API.fetchArticle(id);
this.setState({ article });
}
// ...
}
當組件傳入新的 id 時，我們根據(jù)新的 id 請求數(shù)據(jù)，然后 setState 最新獲取的數(shù)據(jù)。
這時就可能出現(xiàn)競態(tài)條件，比如用戶選完立刻點擊下一頁，我們請求 id 為 1 的數(shù)據(jù)，緊接著請求 id 為 2 的數(shù)據(jù)，但因為網(wǎng)絡(luò)或者接口處理等原因，id為 2 的接口提前返回，便會先展示 id 為 2 的數(shù)據(jù)，再展示 id 為 1 的數(shù)據(jù)，這就導(dǎo)致了錯誤。
我們可以想想遇到這種問題的場景，比如類似于百度的搜索功能，切換 tab 等場景，雖然我們也可以使用諸如 debounce 的方式來緩解，但效果還是會差點，比如使用 debounce，用戶在輸入搜索詞的時候，展示內(nèi)容會長期處于空白狀態(tài)，對于用戶體驗而言，我們可以做的更好。
那么我們該如何解決呢？一種是在切換的時候取消請求，還有一種是借助一個布爾值來判斷是否需要更新，比如這樣：
function Article({ id }) {
const [article, setArticle] = useState(null);
useEffect(() => {
let didCancel = false;
async function fetchData() {
const article = await API.fetchArticle(id);
// 如果 didCancel 為 true 說明用戶已經(jīng)取消了
if (!didCancel) {
setArticle(article);
}
}
fetchData();
// 執(zhí)行下一個 effect 之前會執(zhí)行
return () => {
didCancel = true;
};
}, [id]);
// ...
}
當然你也可以用 ahooks 中的 useRequest，它的內(nèi)部有一個 ref 變量記錄最新的 promise，也可以解決 Race Condition 的問題：
function Article({ id }) {
const { data, loading, error} = useRequest(() => fetchArticle(id), {
refreshDeps: [id]
});
// ...
}
效果演示
問題復(fù)現(xiàn)
為了方便大家自己測試這個問題，我們提供相對完整的代碼。以 《Avoiding Race Conditions when Fetching Data with React Hooks》中的例子為例，出現(xiàn) Race Condition 問題的代碼如下：
const fakeFetch = person => {
return new Promise(res => {
setTimeout(() => res(`${person}'s data`), Math.random() * 5000);
});
};
const App = () => {
const [data, setData] = useState('');
const [loading, setLoading] = useState(false);
const [person, setPerson] = useState(null);
useEffect(() => {
setLoading(true);
fakeFetch(person).then(data => {
setData(data);
setLoading(false);
});
}, [person]);
const handleClick = (name) => () => {
setPerson(name)
}
return (
<Fragment>
<button onClick={handleClick('Nick')}>Nick's Profile</button>
<button onClick={handleClick('Deb')}>Deb's Profile</button>
<button onClick={handleClick('Joe')}>Joe's Profile</button>
{person && (
<Fragment>
<h1>{person}</h1>
<p>{loading ? 'Loading...' : data}</p>
</Fragment>
)}
</Fragment>
);
};
我們實現(xiàn)了一個 fakeFetch函數(shù)，用于模擬接口的返回，具體返回的時間為 Math.random() * 5000)，用于模擬數(shù)據(jù)的隨機返回。
實現(xiàn)效果如下：
從效果圖中可以看到，我們按順序點擊了 Nick、Deb、Joe，理想情況下，結(jié)果應(yīng)該顯示 Joe's Data，但最終顯示的數(shù)據(jù)為最后返回的 Nick's Data。
布爾值解決
現(xiàn)在，我們嘗試用一個 canceled 布爾值解決：
const App = () => {
const [data, setData] = useState('');
const [loading, setLoading] = useState(false);
const [person, setPerson] = useState(null);
useEffect(() => {
let canceled = false;
setLoading(true);
fakeFetch(person).then(data => {
if (!canceled) {
setData(data);
setLoading(false);
}
});
return () => (canceled = true);
}, [person]);
return (
<Fragment>
<button onClick={() => setPerson('Nick')}>Nick's Profile</button>
<button onClick={() => setPerson('Deb')}>Deb's Profile</button>
<button onClick={() => setPerson('Joe')}>Joe's Profile</button>
{person && (
<Fragment>
<h1>{person}</h1>
<p>{loading ? 'Loading...' : data}</p>
</Fragment>
)}
</Fragment>
);
};
實現(xiàn)效果如下：
即便接口沒有按照順序返回，依然不影響最終顯示的數(shù)據(jù)。
useRequest 解決
我們也可以借助 ahooks 的 useRequest 方法，修改后的代碼如下：
const App2 = () => {
const [person, setPerson] = useState('Nick');
const { data, loading} = useRequest(() => fakeFetch(person), {
refreshDeps: [person],
});
const handleClick = (name) => () => {
setPerson(name)
}
return (
<Fragment>
<button onClick={handleClick('Nick')}>Nick's Profile</button>
<button onClick={handleClick('Deb')}>Deb's Profile</button>
<button onClick={() => setPerson('Joe')}>Joe's Profile</button>
{person && (
<Fragment>
<h1>{person}</h1>
<p>{loading ? 'Loading...' : data}</p>
</Fragment>
)}
</Fragment>
);
};
代碼效果如上，就不重復(fù)錄制了。
考慮到部分同學可能會對 useRequest 的使用感到困惑，我們簡單介紹一下 useRequest的使用：
useRequest 的第一個參數(shù)是一個異步函數(shù)，在組件初次加載時，會自動觸發(fā)該函數(shù)執(zhí)行。同時自動管理該異步函數(shù)的 loading 、 data 、 error 等狀態(tài)。
useRequest 同樣提供了一個 options.refreshDeps 參數(shù)，當它的值變化后，會重新觸發(fā)請求。
const [userId, setUserId] = useState('1');
const { data, run } = useRequest(() => getUserSchool(userId), {
refreshDeps: [userId],
});
上面的示例代碼，useRequest 會在初始化和 userId 變化時，觸發(fā)函數(shù)執(zhí)行。與下面代碼實現(xiàn)功能完全一致：
const [userId, setUserId] = useState('1');
const { data, refresh } = useRequest(() => getUserSchool(userId));
useEffect(() => {
refresh();
}, [userId]);
Suspense
這篇之所以講 Race Condition，主要還是為了引入講解 Suspense，借助 Suspense，我們同樣可以解決 Race Condition：
// 實現(xiàn)參考的 React 官方示例：https://codesandbox.io/s/infallible-feather-xjtbu
function wrapPromise(promise) {
let status = "pending";
let result;
let suspender = promise.then(
r => {
status = "success";
result = r;
},
e => {
status = "error";
result = e;
}
);
return {
read() {
if (status === "pending") {
throw suspender;
} else if (status === "error") {
throw result;
} else if (status === "success") {
return result;
}
}
};
}
const fakeFetch = person => {
return new Promise(res => {
setTimeout(() => res(`${person}'s data`), Math.random() * 5000);
});
};
function fetchData(userId) {
return wrapPromise(fakeFetch(userId))
}
const initialResource = fetchData('Nick');
function User({ resource }) {
const data = resource.read();
return <p>{ data }</p>
}
const App = () => {
const [person, setPerson] = useState('Nick');
const [resource, setResource] = useState(initialResource);
const handleClick = (name) => () => {
setPerson(name)
setResource(fetchData(name));
}
return (
<Fragment>
<button onClick={handleClick('Nick')}>Nick's Profile</button>
<button onClick={handleClick('Deb')}>Deb's Profile</button>
<button onClick={handleClick('Joe')}>Joe's Profile</button>
<Fragment>
<h1>{person}</h1>
<Suspense fallback={'loading'}>
<User resource={resource} />
</Suspense>
</Fragment>
</Fragment>
);
};
以上就是React競態(tài)條件Race Condition實例詳解的詳細內(nèi)容，更多關(guān)于React競態(tài)條件Race Condition的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中的useEffect(副作用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React中使用Workbox進行預(yù)緩存的實現(xiàn)代碼
Workbox是Google Chrome團隊推出的一套 PWA 的解決方案,這套解決方案當中包含了核心庫和構(gòu)建工具,因此我們可以利用Workbox實現(xiàn)Service Worker的快速開發(fā),本文小編給大家介紹了React中使用Workbox進行預(yù)緩存的實現(xiàn),需要的朋友可以參考下2023-11-11
本文將會基于react實現(xiàn)滾動菜單欄功能,點擊菜單,內(nèi)容區(qū)域會自動滾動到對應(yīng)卡片,內(nèi)容區(qū)域滑動,指定菜單欄會被選中,代碼簡單易懂,感興趣的朋友一起看看吧2024-03-03
react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決
這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
react配置代理setupProxy.js無法訪問v3.0版本問題
這篇文章主要介紹了react配置代理setupProxy.js無法訪問v3.0版本問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了React中的生命周期和子組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-08-08
React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應(yīng)的問題及解決方法
這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時 value和text不對應(yīng)的問題及解決方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了VSCode搭建React Native環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了React中關(guān)于render()的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02