Что такое поверхностное равенство?
Поверхностное равенство проверяется повторением ключей сравниваемых объектов и возвращением истины, если значения ключа в каждом объекте строго равны для всех ключей.
Почему важно поверхностное равенство?
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.
В типичных случаях неплохо было бы сделать пару дополнительных повторных рендерингов. Но если ваш компонент чувствителен к тому, сколько раз происходит рендеринг, то составной объект в качестве состояния будет удобен.
Вывод
И вот оно! Надеюсь, теперь вы лучше понимаете, что такое поверхностное равенство и почему оно важно.