4.1 flushSync确保了DOM立即更新

一、flushSync确保了DOM立即更新

1. flushSync让你强制React同步刷新提供的回调中的任何更新，这确保了DOM立即更新

   import { useRef, useState } from 'react'
   import { flushSync } from 'react-dom'
   
   function App() {
     const [count, setCount] = useState(0)
   
     const ref = useRef(null)
   
     const handleClick = () => {
       // 保证DOM立即更新，下面的内容可以拿到最新的结果
       flushSync(() => {
         // 如果在外面，下面的输出上一次的记录
         setCount(count + 1)
       })
       console.log(ref.current.innerHTML)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>点击</button>
         <div ref={ref}>{count}</div>
       </>
     )
   }
   
   export default App