Zustand 源码解析：第一章 external store

前端

2023-12-30 18:39:27

引言

Zustand 是一个轻量级的状态管理库，它提供了与 Redux 相似但更简单的 API。Zustand 的设计理念是将状态管理从 React 组件中剥离出来，形成一个单独的 store，从而简化组件的代码，提升组件的可测试性和可复用性。

external store

Zustand 提供了一种发布订阅模式的实现。在 React 中，使用 useSyncExternalStore() hook 订阅 store，实现状态更新后，触发组件重新渲染。

实现原理

useSyncExternalStore() hook 的原理是创建一个 effect，在 effect 中注册一个监听器，当 store 状态更新时，监听器会触发 effect 的执行，从而导致组件重新渲染。

使用方式

以下是一个使用 useSyncExternalStore() hook 的示例：

import React, { useEffect, useState } from "react";
import zustand from "zustand";

const store = zustand.createStore((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
  const count = useSyncExternalStore(store.getState, store.subscribe);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={store.getState().increment}>Increment</button>
    </div>
  );
};

export default Counter;

在这个示例中，我们使用 useSyncExternalStore() hook 订阅了 store 的状态。当 store 的状态更新时，useSyncExternalStore() hook 会触发组件重新渲染。

注意事项

使用 useSyncExternalStore() hook 时，需要注意以下几点：

确保 useSyncExternalStore() hook 始终在组件的 useEffect() hook 中使用。
useSyncExternalStore() hook 的第一个参数必须是一个函数，该函数返回 store 的状态。
useSyncExternalStore() hook 的第二个参数必须是一个函数，该函数接受一个回调函数作为参数，当 store 的状态更新时，该回调函数会被调用。