flushSync 今天在官网看到这样一个 API
警告: lushSync 是不常见的行为,并且可能损伤应用程序的性能。在我们使用的时候还是要慎重使用
简单介绍下 flushSync ,它是强制 react 再提供的回调函数内同步刷新任何更新,这将确保 DOM 立即更新 调用 flushSync 强制 React 刷新所有挂起的工作,并同步更新 DOM
使用方式
js flushSync(callback)
参数
callback 是一个函数。React 会立即调用这个回调函数,并同步刷新其中包含的任何更新。它也可能会刷新任何挂起的更新、Effect或Effect内部的更新。如果因为调用 flushSync 而导致更新挂起(suspend),则可能会重新显示后备方案
返回值
flushSync 返回 undefined
注意:
flushSync 可能会严重影响性能,谨慎使用 flushSync 可能会强制挂起的 Suspense 边界显示其 fallback 状态 flushSync 可能会在返回之前运行挂起的 Effect,并同步应用其包含的任何更新 flushSync 可能会在必要时刷新回调函数之外的更新,以便刷新回调函数内部的更新。例如:如果有来自点击事件的挂起更新,React 可能会在刷新回调函数内部的更新之前刷新这些更新。
import { flushSync } from 'react-dom'
flushSync(() => {
setCount(2)
})// 这行代码之后,DOM 将被更新
用法
当与浏览器 API 或 UI 库等第三方代码集成时,可能需要强制 React 刷新更新。调用 flushSync 以强制 React 同步刷新在回调函数内的任何状态更新
使用 flushSync 是不常见的,频繁使用可能会严重影响应用的性能,要思考再三谨慎使用
将 flushSync 作为最后的手段来使用