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

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

위 이미지에서 알 수 있듯이 createWithEqualityFn은 createWithEqualityFnImpl 함수를 호출합니다. 이 패턴은 바닐라.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 = <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,
) {

슬라이스 값이 어떻게 보이는지 살펴보겠습니다.

값: 1은 아래와 같이 값이 1일 때 다시 렌더링되지 않도록 코드를 설정했기 때문에 1을 건너뜁니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배로 늘리고 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo(별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 hello@thinkthroo.com으로 문의하세요!

참고자료:

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

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

위 내용은 Zustand의 소스 코드에 있는 createWithEqualityFnImpl에 대해 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!