Heim > Web-Frontend > js-Tutorial > Hauptteil

createWithEqualityFnImpl im Quellcode von Zustand erklärt.

DDD
Freigeben: 2024-09-13 06:25:02
Original
732 Leute haben es durchsucht

In this article, we will analyse how the createWithEqualityFnImpl is implemented by logging some of its value to get a better understanding.

createWithEqualityFnImpl in Zustand’s source code explained.

As you can tell from the above image, createWithEqualityFn calls the function createWithEqualityFnImpl. This pattern is used in vanilla.ts as well as demonstrated below:

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore
Nach dem Login kopieren

createStore calls createStoreImpl and createWithEqualityFn calls createWithhEqualityFnImpl.

Before we jump into the execution of createWithEqualityFn, let’s first understand the purpose of using createWithEqualityFn.

createWithEqualityFnImpl in Zustand’s source code explained.

The above screenshot is from https://github.com/pmndrs/zustand/tree/main

You can use createWithEqualityFn to have more control over re-rendering.

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
}
Nach dem Login kopieren

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
}
Nach dem Login kopieren

This is an overloading function. useStoreWithEqualityFn has 3 definitions:

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,
) {
Nach dem Login kopieren

createWithEqualityFnImpl in Zustand’s source code explained.

Let’s see how the slice value looks like:

createWithEqualityFnImpl in Zustand’s source code explained.

value: 1 is skipped because we set the code to avoid re-render when the value is 1 as shown below:

createWithEqualityFnImpl in Zustand’s source code explained.

About us:

At Think Throo, we are on a mission to teach the best practices inspired by open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

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

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



Das obige ist der detaillierte Inhalt voncreateWithEqualityFnImpl im Quellcode von Zustand erklärt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage