В этой статье мы рассмотрим, как метод 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() возвращает false?

Несмотря на то, что jsonObject1 и jsonObject2 имеют одинаковое содержимое, это разные объекты в памяти. В JavaScript объекты сравниваются по ссылке, а не по их содержимому. Поскольку эти два объекта хранятся в разных местах памяти, Object.is() возвращает false.

Object.is(nextState, состояние)

В приведенном ниже фрагменте кода из Zustand метод Object.is() используется для определения того, действительно ли nextState отличается от текущего состояния, прежде чем приступить к обновлению состояния и уведомлению обработчиков. Эта проверка имеет решающее значение для производительности и предотвращения ненужных обновлений состояния.

    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 и скопировал dist в 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.

Посетите мой сайт: 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