react教程，如何利用flushSync提升优先级并强制刷新？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

苏南大叔的程序如此灵动，记录苏南大叔和计算机代码的故事。测试环境：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;

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

ReactDOM.flushSync()

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

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

结束语

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

• https://newsn.net/tag/react/

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