Что такое поверхностное равенство?

Поверхностное равенство проверяется повторением ключей сравниваемых объектов и возвращением истины, если значения ключа в каждом объекте строго равны для всех ключей.

Почему важно поверхностное равенство?

React полагается на поверхностное равенство между текущим и следующим состоянием / реквизитами, чтобы решить, выполнять ли повторный рендеринг или нет. Поверхностное сравнение - это отрицание поверхностного равенства. Выполнить рендеринг, если shallowCompare возвращает true.

Поверхностное равенство становится рискованным, когда увеличивается вложенность. Я создал ментальную модель (шпаргалку), чтобы запомнить все тонкости.

Подробное объяснение сравнения JS-объектов можно найти в блоге Дмитрия Павлутина Как сравнивать объекты в JavaScript.

Вам нужно использовать примитивы или объект в React useState ()?

  • Примитивы удобны для новичков.
  • Хорошо, чтобы использовать простой объект с одним уровнем вложенности (максимум), если поверхностное равенство полностью понято.
  • Избегайте использования глубоко вложенных объектов. Вместо этого нормализуйте вложенный объект.

Если мы нормализуем, то с глубоко вложенным объектом можно хорошо справиться. Для получения дополнительных сведений ознакомьтесь с библиотекой normalizr и соответствующими примерами.

Есть ли проблемы, связанные с использованием React useState ()?

К настоящему времени вы знаете, что каждое изменение состояния запускает рендеринг компонента. Рассмотрим варианты ниже

const [state, setState] = useState({ name: 'iMac', qty: 1, price: 1100 });
vs
const [name] = useState('iMac');
const [qty, setQty] = useState(1);
const [price, setPrice] = useState(1100);

Итак, что происходит, когда мы вызываем методы set * несколько раз?

setState({ name: 'iMac', qty: 2, price: 1200 });
vs
setQty(2);
setPrice(1200);

Источник: StackOverflow

  • Если они запускаются напрямую, они будут пакетными.
  • Если изменения состояния запускаются асинхронно (например, заключены в обещание), они не будут объединяться;

В приведенном ниже примере приложения

  • Составной: цена и количество обновлялись с помощью одного вызова setState.
  • Индивидуальный: цена и количество обновлялись с помощью вызова двух методов - setQty и setPrice.

В типичных случаях неплохо было бы сделать пару дополнительных повторных рендерингов. Но если ваш компонент чувствителен к тому, сколько раз происходит рендеринг, то составной объект в качестве состояния будет удобен.

Вывод

И вот оно! Надеюсь, теперь вы лучше понимаете, что такое поверхностное равенство и почему оно важно.