Zustand의 소스 코드에 있는 createWithEqualityFnImpl에 대해 설명합니다.-JS 튜토리얼-php.cn

Zustand의 소스 코드에 있는 createWithEqualityFnImpl에 대해 설명합니다.

DDD

풀어 주다： 2024-09-13 06:25:02

원래의

757명이 탐색했습니다.

이 글에서는 이해를 돕기 위해 createWithEqualityFnImpl의 일부 값을 기록하여 어떻게 구현되는지 분석하겠습니다.

createWithEqualityFnImpl in Zustand’s source code explained.

위 이미지에서 알 수 있듯이 createWithEqualityFn은 createWithEqualityFnImpl 함수를 호출합니다. 이 패턴은 바닐라.ts에서도 사용되며 아래에 설명되어 있습니다.

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

로그인 후 복사

createStore는 createStoreImpl을 호출하고 createWithEqualityFn은 createWithhEqualityFnImpl을 호출합니다.

createWithEqualityFn 실행에 앞서 먼저 createWithEqualityFn 사용 목적을 이해해 보겠습니다.

createWithEqualityFnImpl in Zustand’s source code explained.

위 스크린샷은 https://github.com/pmndrs/zustand/tree/main에서 발췌했습니다

createWithEqualityFn을 사용하면 다시 렌더링을 더 효과적으로 제어할 수 있습니다.

createWithEqualityFn

const createWithEqualityFnImpl = <T>(
  createState: StateCreator<T, [], []>,
  defaultEqualityFn?: <U>(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<S extends ReadonlyStoreApi<unknown>>(
  api: S,
): ExtractState<S>

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

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
}

로그인 후 복사

오버로딩 기능입니다. useStoreWithEqualityFn에는 3가지 정의가 있습니다:

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
  api: S,
): ExtractState<S>

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

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

로그인 후 복사

createWithEqualityFnImpl in Zustand’s source code explained.