深度解析React18 flushSync的使用

const [count, setCount] = useState(0)
const handle = () => {
  flushSync(() => {
    setCount(1)
  })
  // 此处DOM已经刷新完成，可读取offset、焦点等
}

const [n, setN] = useState(0)
const run = () => {
  setN(1) // 缓存入队，暂不渲染
  flushSync(() => {
    setN(prev => prev + 2)
  })
  console.log(n) // 输出3
}

flushSync(() => {
  setCount(1)
  setName('demo')
  setVisible(true)
})
// 三个状态一次性同步更新DOM，仅渲染一次

flushSync(() => {
  setCount(p => p + 1)
  // 内层全部失效，无独立刷新
  flushSync(() => {
    setCount(p => p + 2)
    flushSync(() => setCount(p => p + 3))
  })
})
// 总计只渲染1次，最终count=6

flushSync(() => setA(1)) // 第一次渲染
flushSync(() => setB(2)) // 第二次渲染
flushSync(() => setC(3)) // 第三次渲染

flushSync(() => {
  setNum(1)
  setTimeout(() => {
    setNum(2) // 异步队列，延迟渲染，不跟随同步刷新
  }, 0)
})
// 外层DOM先变为1，宏任务执行后才变为2

const fn = async () => {
  flushSync(async () => {
    setN(1)
    await Promise.resolve() // 让出同步栈，后续代码变成微任务
    setN(2) // 不受flushSync管控，异步渲染
  })
}

flushSync(() => {
  setNum(1)
  setTimeout(() => {
    flushSync(() => setNum(2)) // 独立生效，同步渲染
  }, 0)
})

const [n, setN] = useState(0)
const test = () => {
  try {
    flushSync(() => {
      setN(1) // 正常渲染生效
      throw new Error('执行异常')
      setN(2) // 不会执行
    })
  } catch (err) {}
  console.log(n) // 打印1
}

const [n, setN] = useState(0)
const run = () => {
  startTransition(() => setN(10)) // 低优先级延后
  flushSync(() => setN(1)) // 最高优先级立刻渲染
  console.log(n) // 打印1
}

// 警告不推荐
useLayoutEffect(() => {
  flushSync(() => setCount(1))
}, [])

const boxRef = useRef(null)
const openBox = () => {
  flushSync(() => setShow(true))
  // DOM已渲染完成，精准获取高度
  const height = boxRef.current.offsetHeight
}

const [val, setVal] = useState(0)
const run = () => {
  setVal(1)
  flushSync(() => {
    console.log(val) // 0，闭包捕获旧快照
    setVal(p => p + 2) // 函数式更新不受快照影响
  })
}

const [n, setN] = useState(0);
function handleClick() {
  setN(1);
  flushSync(() => {
    setN(prev => prev + 2);
    setN(prev => prev + 3);
  });
  console.log(n);
}

const [num, setNum] = useState(0);
function test() {
  flushSync(() => {
    setNum(1);
    flushSync(() => {
      setNum(2);
      flushSync(() => {
        setNum(3);
      });
    });
  });
  console.log(num);
}

const [count, setCount] = useState(0);
function handleClick() {
  setCount(1);

  flushSync(() => {
    setCount(p => p + 1);
    flushSync(() => {
      setCount(p => p + 2);
      flushSync(() => {
        setCount(p => p + 3);
      });
    });
  });

  flushSync(() => {
    setCount(p => p + 4);
  });

  console.log(count);
}

const [n, setN] = useState(0);
function test() {
  try {
    flushSync(() => {
      setN(1);
      throw Error('err');
    });
  } catch (e) {}
  console.log(n);
}

const [n, setN] = useState(0);
function test() {
  startTransition(() => setN(10));
  flushSync(() => setN(1));
  console.log(n);
}