如何使用 useSyncExternalStore
如何使用 useSyncExternalStore
React 18 有一个新的重要特性： ** 使用同步外部存储** 钩。我没有找到一个明确的钩子示例（剧透：这很棘手） - 所以我在这里为你写一个。
假设你有一个 移动 **** - 在你的 React 应用程序中基于数据存储。这是定义和使用它的常用方法：
类我的商店 {
@observable 公开数据：MyData；
@action.bound
异步获取（）{
尝试 {
this.data = await axios.get('https://...');
}
抓住 ...
}
}
出口 const myStoreInstance = new MyStore(); ...
const MyComponent = 观察者(() => {
useEffect(() => myStoreInstance.fetch(), []); 返回 (<>{myStoreInstance.data}</> );
});
这个怎么运作？当一个 observable 数据发生变化时，Mobx 会在其观察者中触发渲染。
现在，让我们看看如何 ** 使用同步外部存储** 可以做同样的事情。首先，而不是声明数据 可观察的 ，我们将添加 ** 订阅** 和 ** 退订** MyStore 的例程：
类我的商店 {
数据：我的数据；
订阅者 = 新 Set<() => void>(); 异步获取（）{
尝试 {
this.data = await axios.get('https://...');
订阅者.forEach(notify => notify());
}
抓住 ...
} 订阅（通知：（）=>无效）{
this.subscribers.add(notify);
} 取消订阅（通知：（）=>无效）{
this.subscribers.delete（通知）；
}
}
然后，我们将使用 ** 使用同步外部存储** ：
导出 const useMyStoreData = () => {
常量 getData = () => myStoreInstance.data;
常量订阅 = useMemo(() => {
返回（通知：（）=> void）=> {
myStoreInstance.subscribe（通知）；
返回 () => {
myStoreInstance.unsubscribe(通知);
};
}
}, []); 返回 useSyncExternalStore(subscribe, getData);
}
…并在组件中使用它：
常量 MyComponent = () => {
useEffect(() => myStoreInstance.fetch(), []);
常量数据 = useMyStoreData(); 返回 (<>{数据}</> );
});
正如我们所见，随着 ** 使用同步外部存储** 我们不需要组件成为 Mobx 观察者。钩子订阅商店并根据商店的通知更新数据快照。是的，这是一个棘手的代码，但不知何故，魔法起作用了。我已经用一个简单的应用程序进行了异步 API 调用的测试，并鼓励您尝试它（不要忘记将您的 React 和 React DOM 包升级到 v. 18）。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
