在 React 18 中新增加了很多 Hooks，其中包括 useSyncExternalStore()，它的作用是获取外部数据源。
在一些状态管理库中，这个 Hooks 已经被广泛才用了。比如 Redux 内部就在使用它来实现选择器系统。
那么我们如何在自己的代码中使用 useSyncExternalStore 呢？
本文会演示一个例子，在这个例子中，Hooks 会触发无用的渲染。然后我会再通过 useSyncExternalStore 来避免这种无用渲染。
Hooks 导致无用渲染
假设我使用了 React-Router 来开发应用，其中会用到 useLocation() 这个 Hook。
useLocation 会返回一个包含很多属性的对象，比如 pathname, hash, search 等。我们可能不会使用它的所有属性。但是当这些属性中的任意一个被更新时，只要使用该 Hooks 的组件就会重新渲染。
示例代码如下：
function CurrentPathname() { const { pathname } = useLocation(); return <div>{pathname}</div>; } function CurrentHash() { const { hash } = useLocation(); return <div>{hash}</div>; } function Links() { return ( <div> <Link to="#link1">#link1</Link> <Link to="#link2">#link2</Link> <Link to="#link3">#link3</Link> </div> ); } function App() { return ( <div> <CurrentPathname /> <CurrentHash /> <Links /> </div> ); }
当我们点击任何一个 link 标签时，hash 都会发生变化，同时 CurrentPathname 组件都会重新渲染，即使它甚至没有使用 hash 属性。
这个现象背后的道理是：当一个 Hooks 返回的数据我们并没有用到时，React 组件仍然会重新渲染。
如果你不注意，将 useLocation 放在 React 组件树的顶层使用，那么组件树中任意一个组件修改了 location 上面的属性，都可能会重新渲染整个组件数，对应用的性能损害极大。
拿 useLocation 举例的目的不是说 React-Router 做得不好，而是想说明这个问题。
尽管你现在知道了 Hooks 过度返回属性的危害，但是仍然很难保证自己写 Hooks 的时候为了便捷性而不会这样做，或者其他第三方 Hooks 库也可能过度返回属性。
useSyncExternalStore 能否破解？
React 官方文档中介绍了 useSyncExternalStore 的作用及用法：
useSyncExternalStore 是一个推荐用于从外部数据源读取和订阅的 Hooks，它与选择性水合和时间切片等并发渲染功能兼容。这个 Hooks 返回 store 的值并接受三个参数：
- subscribe: 注册回调的函数，每当 store 更改时调用该回调函数。
- getSnapshot：返回 store 当前值的函数。
- getServerSnapshot：返回服务器渲染期间使用的快照的函数。
function useSyncExternalStore<Snapshot>( subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot ): Snapshot;
从描述来看，这似乎有点抽象。我相信你也没有一下子能够明白它的作用。
React 提供了一个 beta 文档页面，其中给出了一个很好的例子：
function subscribe(callback) { window.addEventListener("online", callback); window.addEventListener("offline", callback); return () => { window.removeEventListener("online", callback); window.removeEventListener("offline", callback); }; } function useOnlineStatus() { return useSyncExternalStore( subscribe, () => navigator.onLine, () => true ); } function ChatIndicator() { const isOnline = useOnlineStatus(); // ... }
有了示例代码，我们应该很容易明白了这个 Hooks 的作用了。
开发 useHistorySelector
现在我们利用 useSyncExternal 优化一下 useLocation。
浏览器的 history 也可以被视为外部数据源。
React-Router 暴露了 useSyncExternalStore 需要连接的所有属性：
- 访问浏览器历史记录 useHistory()
- 订阅历史更新 history.listen(callback)
- 访问当前位置的快照 history.location
案例使用 React-Router v5：React-Router v6 的解决方案将有所不同。
实现 useHistorySelector() 其实非常简单：
function useHistorySelector(selector) { const history = useHistory(); return useSyncExternalStore(history.listen, () => selector(history) ); }
然后使用这个 Hooks 重构我们的应用。
function CurrentPathname() { const pathname = useHistorySelector( (history) => history.location.pathname ); return <div>{pathname}</div>; } function CurrentHash() { const hash = useHistorySelector( (history) => history.location.hash ); return <div>{hash}</div>; }
现在我们点击上面的 link 时，CurrentPathname 组件将不会重新渲染！
另一个例子：scrollY
我们可以订阅很多外部数据源，在上面实现自己的选择器系统。这样可以最大程度上优化 React 的重新渲染。
假设我们要使用 scrollY 来获取页面的位置。我们可以实现这个自定义的 Hooks：
function subscribe(onStoreChange) { global.window?.addEventListener("scroll", onStoreChange); return () => global.window?.removeEventListener( "scroll", onStoreChange ); } function useScrollY(selector = (id) => id) { return useSyncExternalStore( subscribe, () => selector(global.window?.scrollY), () => undefined ); }
现在可以把这个 Hooks 和选择器一起使用：
function ScrollY() { const scrollY = useScrollY(); return <div>{scrollY}</div>; } function ScrollYFloored() { const to = 100; const scrollYFloored = useScrollY((y) => y ? Math.floor(y / to) * to : undefined ); return <div>{scrollYFloored}</div>; }
当我们滚动页面时，ScrollYFloored 组件会比 ScrollY 组件重新渲染的次数更少！
总结
我个人感觉 useSyncExternalStore 这个 Hooks 目前在 React 生态系统中没有被充分使用，但它值得更多关注。我们完全可以订阅许多外部的数据源来改善应用性能。
如果你还没有升级到 React 18，npm 上有一个 shim：use-sync-external-store。你可以在旧版本的 React 中使用它。
\
