React性能优化、使用useState多次渲染问题

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

3、附上掘金好文React性能优化