1、问题描述
多个useState异步函数中不会合并（React 18之前）
掘金文章：https://juejin.cn/post/7042319659881742343
React 18之后，就不存在这样的问题：参见React18 新特性解读
使用mobx也同样会存在多次渲染问题，
change = () => {
Promise.resolve.then(()=>{
this.name = 1
this.age = 1
})
}
上面赋值了2个字段，会造成使用的组件重复渲染2次。
2、解决方案：
一、将多个状态合并到一个状态中
const [state, setState] = useState({name:1,age:2});
setState({name,age})
二、自定义钩子
const useMergeState = (initialState) => {
const [state, setState] = useState(initialState);
const setMergeState = (newState) => setState((prevState) => ({ ...prevState, newState }));
return [state, setMergeState];
};
/* 使用 */
const [request, setRequest] = useMegeState({ loading: false, data: null });
useEffect(async () => {
const res = await axios.get("xxx");
setRequest({ loading: true, data: res });
// ...
setRequest({ data: { a: 1 } }); // loading 状态不会丢失，还是 true
}, []);
三、使用react 17提供的api
import ReactDOM from 'react-dom';
const { unstable_batchedUpdates } = ReactDOM;
setTimeout(()=>{
unstable_batchedUpdates(()=>{
setNameState(1)
setAgeState(1)
})
})
四、使用react18
