В этой статье мы проанализируем, как реализован createWithEqualityFnImpl, записывая часть его значений, чтобы лучше понять.

Как видно из изображения выше, createWithEqualityFn вызывает функцию createWithEqualityFnImpl. Этот шаблон используется в vanilla.ts, а также показан ниже:

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

createStore вызывает createStoreImpl, а createWithEqualityFn вызывает createWithhEqualityFnImpl.

Прежде чем мы приступим к выполнению createWithEqualityFn, давайте сначала поймем цель использования createWithEqualityFn.

Снимок экрана выше взят с https://github.com/pmndrs/zustand/tree/main

Вы можете использовать createWithEqualityFn, чтобы иметь больше контроля над повторным рендерингом.

createWithEqualityFn

const createWithEqualityFnImpl = (
  createState: StateCreator,
  defaultEqualityFn?: (a: U, b: U) => boolean,
) => {
  const api = createStore(createState)

  const useBoundStoreWithEqualityFn: any = (
    selector?: any,
    equalityFn = defaultEqualityFn,
  ) => useStoreWithEqualityFn(api, selector, equalityFn)

  Object.assign(useBoundStoreWithEqualityFn, api)

  return useBoundStoreWithEqualityFn
}

useStoreWithEqualityFn

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

export function useStoreWithEqualityFn, U>(
  api: S,
  selector: (state: ExtractState) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  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
}

Это перегруженная функция. useStoreWithEqualityFn имеет 3 определения:

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

export function useStoreWithEqualityFn, U>(
  api: S,
  selector: (state: ExtractState) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {

Давайте посмотрим, как выглядит значение среза:

значение: 1 пропускается, поскольку мы установили код, чтобы избежать повторного рендеринга, когда значение равно 1, как показано ниже:

О нас:

В Think Throo мы стремимся обучать лучшим практикам, вдохновленным проектами с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (дайте нам звезду!)

Повышайте квалификацию своей команды с помощью наших продвинутых курсов, основанных на архитектуре кодовой базы. Чтобы узнать больше, напишите нам по адресу [email protected]!

Ссылки:

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L74

2. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L39