في هذه المقالة، سنقوم بتحليل كيفية تنفيذ 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 للحصول على مزيد من التحكم في إعادة العرض.

إنشاء مع المساواة

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
}

استخدام المتجر مع المساواة

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، نحن في مهمة لتعليم أفضل الممارسات المستوحاة من المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في 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