我有一個本機應用程式，我正在獲取客戶下的訂單并將它們顯示在特定螢屏的餐廳一側，我使用 fetch api 來獲取資料，因此作業流程是客戶先下訂單并將其存盤在資料庫中餐廳方面我有這個功能：
const loadData = async () => {
const response = await fetch(`${API_URL}/getActiveOrders?ID=${id}`);
const result = await response.json();
if (result.auth === true) {
setCurrentOrders(result.data)
} else {
setCurrentOrders([])
}
}
useEffect(() => {
const interval = setInterval(() => {
loadData();
}, 1000)
return () => clearInterval(interval)
}, [id]);
就像在這個函式中一樣，它每秒運行一次，它呼叫 api 來表達服務器從資料庫中獲取資料，所以我讓餐廳毫不延遲地接收訂單。但我注意到，當間隔設定為 1 秒時，該應用程式滯后，并且它不斷頻繁地呼叫快速服務器。
我的問題：這是執行與此方案相同的最佳方法（在客戶下訂單的那一刻獲取訂單）還是有更好的方法來做到這一點而不會滯后以及在獲取大資料時將性能保持在一樣還是會有一些問題？
uj5u.com熱心網友回復：
如果我不得不猜測滯后問題的原因是什么，那將是因為您對useEffect鉤子有依賴性。每次狀態更新都會觸發另一個渲染，效果再次運行，并設定另一個間隔，您的應用程式每秒執行一次。
建議去掉依賴，組件掛載時只運行一次效果，卸載時清空間隔。
useEffect(() => {
const interval = setInterval(() => {
loadData();
}, 1000)
return () => clearInterval(interval)
}, []);
如果idGET 請求更新并且您需要最新的值，則使用 React ref 來存盤該id值并在請求 URL 中使用它。
const idRef = React.useRef(id);
useEffect(() => {
idRef.current = id;
}, [id]);
const loadData = async () => {
const response = await fetch(`${API_URL}/getActiveOrders?ID=${idRef.current}`);
const result = await response.json();
setCurrentOrders(result.auth ? result.data : []);
}
uj5u.com熱心網友回復：
在這種情況下，您應該使用 websockets。這是使用 websockets 的最佳場景。您的場景就像一個交易網站。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/353756.html
標籤：javascript 反应原生 表达 反应钩子 拿来