撕裂问题

产生原因：

从React18开始引入了并发渲染机制，渲染不再是一次原子化的操作，可以被中断、恢复和丢弃； 产生“撕裂”就是指，视图UI上呈现一种不可能出现的情况：同一个状态，一部分是旧值一部分是新值；

触发原因：

一般你直接访问外部数据就会触发

// 外部状态源
const store = { count: 0 }

function Component() {
  // 直接访问外部状态 - 危险！
  return (
    <div>
      <h1>Count: {store.count}</h1>
      <p>Double: {store.count * 2}</p>
    </div>
  )
}

如何避免撕裂？

使用useSyncExternalStore, 他可以确保在整个渲染流程使用同一个状态快照，从而避免撕裂； 如果渲染中状态变化，会触发新的渲染；