Реагируйте сравнение реквизита: "_.isEqual" против "==="

Question

Моя проблема в том, что глубокое сравнение lodash равенства и строгого равенства === возвращает разные значения при сравнении полей nextProps и self.props в методе жизненного цикла componentWillReceiveProps.

1. Значит ли это, что значения этих свойств должны быть разных типов? Я предполагаю, что _.isEqual выполняет преобразование типов для сравнения равенства, так как === нет.
2. Рекомендуется ли использовать _.isEqual при проверке равенства между полями nextProps и self.props?

Вот мой конкретный пример -

componentWillReceiveProps(nextProps){
  (nextProps.obj === self.props.obj);        // false
   _.isEqual(nextProps.obj, self.props.obj); // true

   typeof(nextProps.obj);  // object
   typeof(self.props.obj); // object

   nextProps.obj;   // { k1: "v1", k2: "v2", k3: "v3" }
   self.props.obj;  // { k1: "v1", k2: "v2", k3: "v3" }
}

Кто-нибудь знает, что может происходить?

Answer 1

_.isEquals:

Выполняет глубокое сравнение между двумя значениями, чтобы определить, являются ли они эквивалентными. он вернет true, если значения эквивалентны, иначе false.

Lodash _.isEquals

Пример:

var object = { 'a': 1 };
var other = { 'a': 1 };
 
console.log(_.isEqual(object, other));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

===:

Для строгого равенства сравниваемые объекты должны иметь одинаковый тип и:

сравниваемые должны иметь одинаковый тип и:

• Две строки строго равны, если они имеют одинаковую последовательность символов, одинаковую длину и одинаковые символы в соответствующих позициях.
• Два числа строго равны, когда они численно равны (имеют одинаковое числовое значение). NaN не равно ничему, в том числе NaN. Положительные и отрицательные нули равны друг другу.
• Два булевых операнда строго равны, если оба истинны или оба ложны.
• Два объекта строго равны, если они ссылаются на один и тот же объект

Операторы сравнения - MDC

Пример:

var object = { 'a': 1 };
var other = { 'a': 1 };
 
 
console.log(object === other);
// => false

Answer 2

Компоненты React имеют очень тяжелые клавиши. При сравнении свойств сравнивать эти ключи не имеет смысла, поскольку они не содержат данных о состоянии приложения. Кроме того, есть опасность попасть в ловушку циклических ссылок, что приведет к бесконечному циклу проверки свойств компонента React. По этой причине эти свойства лучше всего игнорировать. Этот трюк используется в библиотеке epoberezkin/fast-deep-equal .

      const isPropsEqual = _.isEqualWith(
      data1,
      data2,
      (data1Value, data2Value, key) => {
        const ignoreKeysList = [
          '_owner',
          '$$typeof'
        ]
        return ignoreKeysList.includes(key) ? true : undefined
      }
    )

Это просто рабочая среда, которая помогает вам игнорировать структурные части компонента React при сравнении.

Answer 3

В javascript, когда вы используете '===' для сравнения объектов, он вернет true, только если это тот же объект, тогда как _.isEqual вернет true, если объект эквивалентен.

Что касается вашего фактического вопроса, я думаю, вы должны использовать _.isEqual, чтобы сравнить 2 объекта, чтобы увидеть, являются ли они точной копией друг друга.

Для получения дополнительной информации см.: https://lodash.com/docs