type
status
date
slug
summary
category
tags
password
icon
随着 React v18 引入并发模式,React 也支持了在处理多个任务时进行优先级调整,这意味着 React 可以“暂停”一个正在进行的渲染任务,切换到另一个更高优先级的任务,然后再回到原来的任务。这使得用户界面响应更快,但也带来了新的挑战,尤其是在状态管理方面——状态管理库需要确保它们提供的状态始终是最新的和同步的。useSyncExternalStore就是为解决并发模式下的状态同步问题而推出的——它提供了一种方法,确保即使在并发更新的情况下,组件也可以同步地从外部存储中获取数据。
简单来说,useSyncExternalStore解决的是并发模式下数据流管理的问题。

useSyncExternalStore的使用

这是useSyncExternalStore的用法定义:
它的三个参数用法比较复杂,这里详细介绍一下:
  1. subscribe
      • 类型:((callback: () => void) => () => void)
      • 这是一个函数,其作用是订阅外部存储的变化。当外部存储发生变化时,它应该调用传入的 callback
      • 这个函数应该返回一个取消订阅的函数。这样,当组件被卸载或订阅被重新创建时,我们可以确保没有内存泄漏或无效的回调调用。
  1. getSnapshot
      • 类型:() => Snapshot
      • 这是一个函数,其作用是从外部存储中获取当前的数据快照。
      • 每次组件渲染时,useSyncExternalStore都会调用此函数来读取当前的数据状态。
  1. getServerSnapshot? (可选参数):
      • 类型: () => Snapshot
      • 这个函数的作用与 getSnapshot 类似,但它是为服务端渲染(SSR)或预渲染时使用的。在客户端首次渲染或 hydrate 操作期间,React 会使用此函数而不是getSnapshot来读取数据的初始状态。这是为了确保在服务端渲染的内容与客户端的初始内容匹配,从而避免不必要的重新渲染和闪烁。如果你的应用不涉及服务端渲染,那么不需要这个参数。
下面我们从几个应用开发者也能接触到的场景先学习useSyncExternalStore是怎么用的。

store里获取数据

想象你要做一个博客文章的状态管理功能,你希望所有渲染文章列表的组件都能实时获取最新的数据,那么就可以这样做:
先创建状态store:
然后你可以在需要渲染文章列表的组件里实现实时数据渲染了:
这个示例只是为解释useSyncExternalStore的用法使用的,实际场景中的逻辑一定比这个复杂得多。但这个简单的示例已经足够让我们看到useSyncExternalStore的价值了——如果有多个组件会触发文章列表的更新,那么使用了useSyncExternalStore监听数据变化的组件都能实时刷新数据。在使用useSyncExternalStore以前,我们通常是在进入页面时获取新数据,或者用定时器定时来更新数据。

从浏览器API获取数据

现在我们用一个更加直观的示例来看看useSyncExternalStore的能力。
我们计划用useSyncExternalStore来监听网络状态,并把网络状态显示在页面上。网络状态可以从navigator里的onLine获取。
在代码设计层面,我们需要知道useSyncExternalStore更新的数据通常可能被多个组件引用,那么写一个自定义 hook 是最合理的方式,那么这个示例中我们就写一个自定义 hook 来实现核心逻辑:
在页面调用useOnlineStatus就可以获取onLine的最新值:
这个示例完美地展示了useSyncExternalStore实时获取数据的能力,不信现在我们拔掉网线和插上网线,页面都会自动更新网络状态。你可以直接到<👉我的演示站>体验。
notion image

注意事项

  • getSnapshot的返回值不能总是不同的对象
useSyncExternalStore依赖getSnapshot函数返回的值来决定是否重新渲染。如果每次都返回新的对象,即使对象的内容相同,React 会认为状态已经变化并重新渲染组件。
正确的返回值应该这样写:
  • subscribe不要放在组件内定义
如果 subscribe 函数在组件内部定义,那么每次组件渲染都会创建一个新的 subscribe 函数实例。这是由于 useSyncExternalStore 会在 subscribe 函数改变时重新订阅,这意味着每次重新渲染都会导致重新订阅,可能导致不必要的开销,尤其是当订阅操作涉及复杂的计算或外部资源时。
正确的做法是把 subscribe 函数移到组件外部,这样它在组件的整个生命周期中都保持不变;或者使用 useCallback 钩子来缓存 subscribe 函数。

结语

虽然useImperativeHandle对于应用开发者来说不是必要的,但如果你想拓展对 React 生态圈的认识,依然有必要了解一下useImperativeHandle的用法和使用场景,因为它能帮助你未来更好地理解优秀的第三方库的设计。

专栏资源

专栏博客地址:精读React Hooks
专栏演示站:React Hooks Demos
专栏源码仓库:👉Github - Source Code
国内镜像仓库:👉Gitee — Source Code
 
专栏文章列表:
精读React hooks(十四):总有一天你会需要useId为你生成唯一id精读React hooks(十二):使用useImperativeHandle能获得什么能力