React SetState需要200ms＆＃x2B;

Question

我正在听一个Websocket触发每秒一次回调的Websocket：

SetState1每秒发生，SetState2也会在10秒后每秒发生，并允许largechildcomponent 显示。

我发现更新此状态的时间超过200ms。

const myWebsocketCallback = async(newData) => {
  dataRef.current = [...dataRef.current, newData]

  const start = performance.now()
  setDataState(dataRef.current)
  console.log('setState', performance.now() - start)

  doWorkWithNewData()
}

因此，设置状态最初很慢，并且当largechildComponent呈现时，设置状态也很慢。

---

我发现将大型JSON对象从状态初始化转移到Initeffect（）大大减少了这段时间。

- const [myBigData, setMyBigData] = useState(VERY_LARGE_JSON_OBJECT)

+ const [myBigData, setMyBigData] = useState()
+ useEffect(() => {
+   setMyBigData(VERY_LARGE_JSON_OBJECT)
+ }, [])

是否检查了每个渲染的默认状态值？我是否应该在使用效率（myfunc，[]）中初始化状态？

---

仅上述变化就取得了巨大改进。

但是，setState（）仍在进行80ms+，并且似乎取决于渲染的大小（子组件）。

我的印象是setState（）是async任务，无论依赖于此，都应该快速执行。

为什么还需要80ms才能更新状态？

是由于在回调功能中吗？州真的在等孩子渲染吗？

Answer 1

每当您在React Lifecycle方法之外调用SetState（React事件处理程序或渲染功能或效果），则它倾向于 block ，而React重新呈现所有内容。在React 18中，他们正在改变状态变化和渲染的方式。

您可以：

更新到React 18 Creatoot以获取自动批处理

import ReactDOM from "react-dom";
import App from 'App';

const container = document.getElementById('root');

// Create a root.
const root = ReactDOM.createRoot(container);

// Initial render
root.render(<App name="Saeloun blog" />);

// During an update, there is no need to pass the container again
root.render(<App name="Saeloun testimonials" />);

或使用React＆lt中的unstable_batchupdate方法; 18

import { unstable_batchedUpdates } from 'react-dom'

const myWebsocketCallback = async(newData) => {
  dataRef.current = [...dataRef.current, newData]

  const start = performance.now()
  unstable_batchUpdates(() => {
    setDataState(dataRef.current)
  })
  console.log('setState', performance.now() - start)

  doWorkWithNewData()
}