当前位置：首页 > 文章列表 > 文章 > 前端 > useSyncExternalStoreExports 状态源码解释

useSyncExternalStoreExports 状态源码解释

来源：dev.to 2024-09-10 23:33:56 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《useSyncExternalStoreExports 状态源码解释》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

在本文中，我们将了解 zustand 如何在其[源代码]中使用 usesyncexternalstoreexports。

useSyncExternalStoreExports 状态源码解释

usesyncexternalstoreexports 是从 use-sync-external-store/shim/with-selector 导入的。 use-sync-external-store 是 react.usesyncexternalstore 的向后兼容垫片，可与任何支持 hooks 的 react 配合使用。

读到上面这句话，你可能想知道什么是usesyncexternalstore。

usesyncexternalstore

usesyncexternalstore 是一个 react hook，可让您订阅外部存储。

const snapshot = usesyncexternalstore(subscribe, getsnapshot, getserversnapshot?)

使用 usesyncexternalstore 从外部存储读取一个值，该值可以是：

在 react 之外保存状态的第三方状态管理库。
公开可变值和事件以订阅其更改的浏览器 api。

用法示例：

import { usesyncexternalstore } from 'react';
import { todosstore } from './todostore.js';

function todosapp() {
  const todos = usesyncexternalstore(todosstore.subscribe, todosstore.getsnapshot);
  // ...
}

上面的例子摘自react文档。

usesyncexternalstore 在 zustand 中的用法：

zustand 在 src/traditional.ts 中使用 usesyncexternalstore。

import reactexports from 'react'
// eslint-disable-next-line import/extensions
import usesyncexternalstoreexports from 'use-sync-external-store/shim/with-selector'
import { createstore } from './vanilla.ts'
import type {
  mutate,
  statecreator,
  storeapi,
  storemutatoridentifier,
} from './vanilla.ts'

const { usedebugvalue } = reactexports
const { usesyncexternalstorewithselector } = usesyncexternalstoreexports

usesyncexternalstorewithselector 是从 usesyncexternalstoreexports 解构而来，并在 usestorewithequalityfn 中使用。

export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}

usesyncexternalstorewithselector 有 api.subscribe、api.getstate、api.getinitialstate、selector 和 equalfn。