В этой статье мы поймем, как Object.assign() используется в исходном коде Zustand.

Приведенный выше фрагмент кода взят из vanilla.ts. Когда вы устанавливаете состояние, Object.assign используется для обновления вашего объекта состояния.

Давайте сначала разберемся с основами Object.assign:

Объект.назначить()

Статический метод Object.assign() копирует все перечислимые собственные свойства из одного или нескольких исходных объектов в целевой объект. Он возвращает измененный целевой объект.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

Значение b в целевом объекте заменяется значением b в исходном объекте.

Очень просто, правда? давайте теперь проведем несколько экспериментов и поймем, как setState Zustand использует метод Object.assign().

Object.assign() в исходном коде Zustand:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

В приведенном выше фрагменте кода это вложенный тернарный оператор. если замена не равна нулю, состояние будет заменено, или если nextState не является объектом, просто верните nextState как есть, но нас интересует Object.assign({}, state, newState).

Давайте сначала войдем в систему и посмотрим, что находится в состоянии и nextState, когда вы обновляете свое состояние. Пример, который я выбрал, взят из демо-примера в исходном коде Zustand. Я немного изменил код, чтобы мы могли добавить несколько операторов консоли и запустить эти эксперименты.

В этом простом примере, когда счетчик увеличивается, все сводится к обновлению объекта состояния с помощью Object.assign.

В следующий раз, когда вы попытаетесь выполнить некоторые обновления вашего объекта JSON, используйте Object.assign.

О нас:

В Think Throo мы стремимся обучать лучшим практикам, вдохновленным проектами с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (поставьте нам звездочку!)

Хотите создать индивидуальные веб-системы для вашего бизнеса? Свяжитесь с нами по адресу [email protected]

Об авторе:

Привет, я Рам. Я страстный инженер-программист и специалист по OSS.

Посетите мой сайт: https://www.ramunarasinga.com/

Ссылки:

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

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