download:Next.js+React+Node系统实战，搞定SSR服务器渲染
四個真秀React用法，妳值得具有
我們希望用戶在點擊查询按钮的時分， 表格能夠將當前頁码調整爲第一頁，同時加载表格的數據，比方像下面代码所示
import React, { useState, useEffect } from “react”;
const Test = () => {
const [page, setPage] = useState(1);
const [filterParams, setFilterParams] = useState({});
const [data, setData] = useState([]);
const form = useRef();
useEffect(() => {
// 當page 或 搜索條件發作變化的時分，重新懇求表格數據
fetch("/loadData", {
method: "get",
params: {
page: page,
...filterParams,
},
}).then((data) => {
setData(data);
});
}, [page, filterParams]);
function handleSearch() {
// 經過 validateFields 異步獲取表單的值
form.current.validateFields().then((formData) => {
// 設置搜索條件
setFilterParams(formData);
// 將頁码置爲1
setPage(1);
});
}
return (
<>
<Form ref={form}>
<span>表單元素</span>
<Button onClick={handleSearch}>搜索</Button>
</Form>
<Table data={data} pagination={{ page: page }}></Table>
</>
);
};
復製代码
上面的代码，當用戶點擊搜索按钮的時分，我們做了下面三件事
- 調用表單的validateFields辦法異步獲取表單的數據
- 設置搜索條件
- 將頁码重置爲首頁
但是，問題呈現了，我們發現加载表格數據的懇求被發進來了兩條，而且第一條懇求的頁码並不是我們設置的1，這是怎樣回事呢？
2. 問題剖析
我們晓得，在 React 的事情循環内部，屢次 setState 會被兼並成一次來觸發更新，所以我們通常寫 React 批量更新狀態的時分並不會呈現問題，但是這里有一個慣例，就是 React 不會將異步代码里面的屢次狀態更新停止兼並。 比方常見的 setTimeout , Promise 等等這些異步操作，在這些異步操作中更新多個狀態的話， React 就不會停止狀態兼並了，那麼有沒有什麼方法處理這個問題了
3. unstable_batchedUpdates，該妳上場了
爲理解決異步批量更新狀態惹起的問題， react 提供了一個暫時的 api unstable_batchedUpdates 停止批量更新，那麼這個 api 應該怎樣運用呢？
function handleSearch() {
// 經過 validateFields 異步獲取表單的值
form.current.validateFields().then((formData) => {
unstable_batchedUpdates(() => {
// 設置搜索條件
setFilterParams(formData);
// 將頁码置爲1
setPage(1);
})
});
}
復製代码
如上代码所示，只需求將批量更新狀態的代码運用 unstable_batchedUpdates 包裹起來就能夠了。
4. 一切異步狀態都需求用 unstable_batchedUpdates 來包裹吗
我以爲是不需求的，只要在批量更新狀態的時分惹起懇求反復發送，頁面渲染卡頓等影響用戶體驗的時分，再用這個 api 也不遲