useSyncExternalStoreExports 状态源码解释-js教程-PHP中文网

useSyncExternalStoreExports 状态源码解释

王林

发布： 2024-09-11 09:31:40

转载

1011人浏览过

在本文中，我们将了解 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。

php订单系统可以整合支付宝接口

一、系统设置：用Dreamweaver等网页设计软件在代码视图下打开【dddingdan/config.php】系统设置文件，按注释说明进行系统设置。二、系统使用：WFPHP在线订单系统是无台后的，不用数据库，也不用安装，解压源码包后，先进行系统设置，然后把整个【dddingdan】文件夹上传到服务器。在网页中要插入订单系统的位置，插入系统调用代码：注意：id=01就表示使用样式01，如果要使