撕裂问题

产生原因：

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

触发原因：

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

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

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

如何避免撕裂？

在React18+版本，这已经成为了一个底层api：

• 安全使用外部库
• 精确状态选择（selector）
• SSR支持

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

tips：如果选择了useSyncExternalStore则意味着放弃了并发带来的优势，zustand就会出现这样的问题。

Jotai则是因为没有使用它，会出现tearing撕裂的问题。

(为什么不在Jotai中使用useSyncExternalStore)[https://blog.axlight.com/posts/why-use-sync-external-store-is-not-used-in-jotai/]

useSyncExternalStoreWithSelector