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性能优化

你可能感兴趣的:(React性能优化、使用useState多次渲染问题)