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

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

苏南大叔:react教程,如何利用flushSync提升优先级并强制刷新? - react-flushsync
react教程,如何利用flushSync提升优先级并强制刷新?(图3-1)

苏南大叔的程序如此灵动,记录苏南大叔和计算机代码的故事。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@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()

苏南大叔:react教程,如何利用flushSync提升优先级并强制刷新? - flushsybc
react教程,如何利用flushSync提升优先级并强制刷新?(图3-2)

ReactDOM.flushSync()

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

注:第一个输出文字sunan,是第一次渲染(按钮点击之前)的默认渲染。

苏南大叔:react教程,如何利用flushSync提升优先级并强制刷新? - 结果输出
react教程,如何利用flushSync提升优先级并强制刷新?(图3-3)

结束语

更多react经验文字,请点击:

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

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

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

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