Next.js+React+Node系统实战搞定SSR服务器渲染
download
四个真秀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也不迟
发布订阅者模式，帮你写一个高性能Hook
资源XZ：
http://www.51xuebc.com/thread-427-1-1.html
