我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文描述一个flushSync功能，它和createPortal一样，存在于ReactDom中，而不是更常见的ReactDom/client。flushSync可以用于强制刷新。如果你真的有这个需求的话（意思是不常见的需求），使用flushSync可以强制把state的变更优先显示出来，否则可能会显示不出来。常见情况下来说，是不会显示中间state了。

苏南大叔：react教程，如何利用flushSync提升优先级并强制刷新？ - react-flushsync
react教程，如何利用flushSync提升优先级并强制刷新？（图3-1）

苏南大叔的程序如此灵动，记录苏南大叔和计算机代码的故事。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

测试代码

测试代码如下：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { who: "sunan" }
  }
  test(){
    this.setState({ who: "苏南大叔" })
    this.setState({ who: "苏南二叔" })
    this.setState({ who: "苏南三叔" })
  }
  test2(){
    this.setState({ who: "苏南大叔" })
    ReactDOM.flushSync(() => {
      this.setState({ who: "苏南二叔" })
    })
    this.setState({ who: "苏南三叔" })
  }
  render() {
    console.log(this.state.who)
    return <div>
      <div>{this.state.who}</div>
      <button onClick={this.test.bind(this)}>输出一次，最终结果</button>
      <button onClick={this.test2.bind(this)}>输出两次，其中强制一次</button>
    </div>
  }
}
export default App;
JavaScript

这里定义了两个按钮，一个执行test()，一个执行test2()。

苏南大叔：react教程，如何利用flushSync提升优先级并强制刷新？ - flushsybc
react教程，如何利用flushSync提升优先级并强制刷新？（图3-2）

ReactDOM.flushSync()

ReactDOM.flushSync()强制提升函数体内的逻辑优先级。所以，在对比试验中，第二个按钮在控制台中输出是两次，证明被渲染了两次，其中一次是被强制渲染输出的。

注：第一个输出文字sunan，是第一次渲染（按钮点击之前）的默认渲染。

苏南大叔：react教程，如何利用flushSync提升优先级并强制刷新？ - 结果输出
react教程，如何利用flushSync提升优先级并强制刷新？（图3-3）

结束语

更多react经验文字，请点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react