likes
comments
collection

聊聊 React 中被低估的 useSyncExternalStore Hooks

作者站长头像
站长
· 阅读数 16

在 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 需要连接的所有属性:

案例使用 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 中使用它。

\