如何使用 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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/3086/19513109

标签：useSyncExternalStore,订阅,...,数据,使用,React,如何,myStoreInstance,data
来源： https://www.cnblogs.com/amboke/p/16641824.html