原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
React系列useSyncExternalStore学习详解
目录前言useSyncExternalStore初体验Concurrent模式下使用react-redux7Concurrent模式下使用react-redux8Concurrent模式下使用自定义externalstore源码分析useSyncExternalStoresubscribeToStorepushStoreConsistencyCheckupdateStoreInstance写在最后
前言
Concurrent模式是React18中最引人瞩目的新特性。通过使用useTransition、useDeferredValue，更新对应的reconcile过程变为可中断，不再会因为长时间占用主线程而阻塞渲染进程，使得页面的交互过程可以更加流畅。
不过这种新特性，在给我们带来用户体验提升的同时，也给我们带来了新的挑战。在我们使用诸如redux、mobx等第三方状态库时，如果开启了Concurrent模式，那么就有可能会出现状态不一致的情形，给用户带来困扰。针对这种情况，React18提供了一个新的hook-useSyncExternalStore，来帮助我们解决此类问题。
今天，我们就通过本文，给大家梳理一下状态不一致的情形以及useSyncExternalStore的使用情形、内部原理。
useSyncExternalStore初体验
首先说明，useSyncExternalStore这个hook并不是给我们在日常项目中用的，它是给第三方类库如Redux、Mobx等内部使用的。
我们先来看一下官网是怎么介绍useSyncExternalStore的。
useSyncExternalStoreisanewhookthatallowsexternalstorestosupportconcurrentreadsbyforcingupdatestothestoretobesynchronous.ItremovestheneedforuseEffectwhenimplementingsubscriptionstoexternaldatasources,andisrecommendedforanylibrarythatintegrateswithstateexternaltoReact.
翻译过来就是：useSyncExternalStore是一个新的钩子，它通过强制的同步状态更新，使得外部store可以支持并发读取。它实现了对外部数据源订阅时不在需要useEffect，并且推荐用于任何与React外部状态集成的库。
useSyncExternalStore这个新的hook的用法如下:
constvalue=useSyncExternalStore(subscribe,getSnapshot,getServerSnapshot)
其中，subscribe是externalstore提供的subscribe方法；getSnapshot、getServerSnapshot是用于获取指定store状态的方法，类似于react-redux中使用useSelector时需要传入的selector，一个用于客户端渲染，一个用于服务端渲染；返回值就是我们在组件中可用的store状态。
看完上面的翻译和api介绍，大家是不是有点一脸懵逼呢？
文档评论（0）