React 第二十二节 useSyncExternalStore Hook 常见问题及用法详解

1、概述

在React 中我们通常会使用 useState useReducer 进行数据状态更新，但是当我们需要对外部的数据状态进行处理时候，我们需要使用React 提供的新Hook，useSyncExternalStore 让我们可以在React 内部订阅外部数据属性的状态，当订阅的外部状态发生改变时候，会触发React进行重新渲染；

2、写法

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

参数说明：

2.1、subscribe：func函数类型参数，接收一个callback 参数并把它订阅到 store 上，当 store 发生改变，它应当调用被提供的 callback。这会导致组件重新渲染。subscribe 函数会返回清除订阅的函数
2.2、getSnapshot：func函数类型参数，返回组件需要的 store 中的数据。在 store 不改变的情况下，重复调用 getSnapshot 必须返回同一个值。如果 store 改变，并且返回值也不同了（用 Object.is 比较），React 就会重新渲染组件。
2.3、getServerSnapshot：可选的func函数类型参数，返回 store 中数据的初始状态的快照；通常它只会在服务端渲染时，以及在客户端进行服务端渲染内容的 hydration 时被用到。快照在服务端与客户端之间【必须相同】，它通常是从服务端序列化并传到客户端的。如果你忽略此参数，在服务端渲染这个组件会抛出一个错误
2.4、snapshot：返回值是 store的当前状态，可以在当前逻辑中进行处理

3、示例

import { useSyncExternalStore } from 'react'
let count = 0 // 初始值
let subscribers = new Set()
const store = {// 订阅subscribe(callback) {subscribers.add(callback);return () => subscribers.delete(callback);},setState(newState) {count = newState;for(const callback of subscribers) {callback()}},getSnapshot() {return count;}}export default function MySyncES() {const count = useSyncExternalStore(store.subscribe,store.getSnapshot,(prev, next) => prev === next)return (<div><p>Count: {count}</p><button onClick={() => store.setState(count + 1)}>Increment</button></div>)
}

在这个示例中，我们创建了一个简单的外部状态源 store，并使用 useSyncExternalStore 在 MySyncES 组件中同步了的 count 状态。当点击 Increment 按钮时，我们会更新的 count 状态，useSyncExternalStore 会检测到状态的变化并触发 MySyncES 组件的重新渲染。

需要注意的是，useSyncExternalStore 并不是用于替代 Redux、MobX 等状态管理库的工具。它更适合用于简单的状态共享场景，或者与现有的状态管理库结合使用。在实际应用中，开发者应根据具体需求和场景选择合适的状态管理方案。
useSyncExternalStore 为 React 开发者提供了更灵活、高效的工具来优化应用性能和用户体验。通过深入理解和实践这些特性，我们可以更好地构建出高质量的前端应用。

4、注意事项：

1、getSnapshot：返回的 store 快照必须是不可变的。若底层的store数据发生变化了，则需要在React 更新之前，返回新的不可变的快照；
2、subscribe：尽量确保整个流程中的不变性与唯一性：如果在重新渲染时传入一个不同的 subscribe 函数，React 会用新传入的 subscribe 函数重新订阅该 store。你可以通过在组件外声明 subscribe 来避免。
3、如果在 非阻塞 transition 更新 过程中更改了 store，React 将会回退并将该更新视为阻塞更新。具体来说，在每次 transition 更新时，React 将在将更改应用到 DOM 之前第二次调用 getSnapshot。如果它返回的值与最初调用时不同，React 将重新从头开始进行更新，这次将其作为阻塞更新应用，以确保屏幕上的每个组件都反映 store 的相同版本。
4、不能根据 useSyncExternalStore 返回的 store 值进行条件渲染。原因是对外部 store 的变更无法 被标记为非阻塞 transition 更新，因此它们会触发最近的 Suspense 后备方案，用加载旋转器替换已经呈现在屏幕上的内容，通常会导致较差的用户体验。