في هذه المقالة، سنستكشف كيفية استخدام طريقة Object.is() في الكود المصدري لـ Zustand.

تم اختيار مقتطف الكود أعلاه من Vanilla.ts

يتم استخدام طريقة Object.is () في setState (المزيد من المقالات حول هذا لاحقًا).

دعونا أولاً نفهم ما هي طريقة Object.is().

كائن.is ()

تحدد الطريقة الثابتة Object.is() ما إذا كانت القيمتان لهما نفس القيمة.

المثال أدناه مختار من مستندات MDN:

    console.log(Object.is('1', 1));
    // Expected output: false

    console.log(Object.is(NaN, NaN));
    // Expected output: true

    console.log(Object.is(-0, 0));
    // Expected output: false

    const obj = {};
    console.log(Object.is(obj, {}));
    // Expected output: false

إليك مثال JSON معقد بعض الشيء:

    const jsonObject1 = {
        name: "foo",
        age: 30
    };

    const jsonObject2 = {
        name: "bar",
        age: 30
    };

    console.log(Object.is(jsonObject1, jsonObject2)); // false

لماذا يقوم Object.is() بإرجاع خطأ؟

على الرغم من أن jsonObject1 وjsonObject2 لهما نفس المحتوى، إلا أنهما كائنان مختلفان في الذاكرة. في JavaScript، تتم مقارنة الكائنات حسب المرجع، وليس حسب محتواها. نظرًا لأنه يتم تخزين هذين الكائنين في مواقع ذاكرة مختلفة، فإن Object.is() يُرجع false.

Object.is(الحالة التالية، الحالة)

في مقتطف التعليمات البرمجية أدناه من Zustand، يتم استخدام طريقة Object.is () لتحديد ما إذا كانت الحالة التالية مختلفة حقًا عن الحالة الحالية قبل متابعة تحديث الحالة وإخطار المستمعين. يعد هذا الفحص أمرًا ضروريًا للأداء وتجنب تحديثات الحالة غير الضرورية.

    const setState: StoreApi['setState'] = (partial, replace) => {
      // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
      // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
      const nextState =
        typeof partial === 'function'
          ? (partial as (state: TState) => TState)(state)
          : partial
      if (!Object.is(nextState, state)) {
        const previousState = state
        state =
          (replace ?? (typeof nextState !== 'object' || nextState === null))
            ? (nextState as TState)
            : Object.assign({}, state, nextState)
        listeners.forEach((listener) => listener(state, previousState))
      }
    }

الصورة أدناه توضح Object.is() أثناء العمل

لإضافة بيانات السجل أعلاه، قمت بتجميع Zustand باستخدام الأمر pnpm run build ونسخت القرص إلى example/demo/src. يبدو الأمر مبتكرًا، ولكننا نقوم بالتجربة والتعرف على كيفية عمل Zustand داخليًا.

    const useStore = create((set) => ({
      count: 1,
      inc: () => set((state) => ({ count: state.count   1 })),
    }))

يؤدي استدعاء inc بطريقة ما إلى تشغيل حالة setState، وسنكتشف كيفية ذلك في المقالات القادمة.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم أفضل الممارسات المستوحاة من المشاريع مفتوحة المصدر.

قم بتحسين مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوحو المصدر   —  https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

هل تحتاج إلى مساعدة في مشروع Next.js؟ اتصل بنا على [email protected]

عن المؤلف:

مرحبًا، أنا رام. أنا مهندس برمجيات متحمس/OSS Tinkerer.

تحقق من موقع الويب الخاص بي: https://www.ramunarasinga.com/

مراجع:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L71

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is