Будет ли компонент React повторно визуализироваться, если его реквизиты будут обновлены, но не изменятся в стоимости?

Question

Допустим, у нас есть магазин редуксов, который выглядит так:

{
  "page1": {
    "title": "Demo",
    "content": "Testing"
  },
  "page2": {
    "title": "Demo",
    "content": "Yes, I'm aware the titles match."
  }
}

Теперь давайте посмотрим на компонент, который отображает заголовок:

const Title = ({title}) => <h1>{title}</h1>

const mapStateToProps = state => ({
  title: getCurrentPage().title
})

export default connect(mapStateToProps)(Title)

В приведенном выше блоке getCurrentPage () представляет собой запомненную функцию (посредством повторного выбора), которая извлекает данные текущей страницы из состояния на основе некоторого условия (в данном случае это location.pathname реагирующего маршрутизатора).

Будет ли этот компонент повторно визуализироваться, если данные, возвращаемые getCurrentPage (), отличаются, даже если конкретное значение {title} остается прежним?

Если да, помнит ли производный заголовок реквизит изменить ответ на нет?

Answer 1

Хорошо, я нашел время, чтобы проверить свой вопрос, потому что первый полученный ответ сказал, что он будет перерисован. Я вставил console.log ('render') в компонент Title и затем перешел между двумя отдельными страницами, каждая из которых имела одинаковый точный заголовок. И результат ... (барабанная дробь)

NO . Компонент не рендерится повторно.

Answer 2

Компонент будет повторно визуализироваться, если реквизиты изменились, или локальное состояние изменилось из-за вызова setState(), или вы явно вызываете функцию foceUpdate(). В вашем случае заголовок является строкой, а старая и новая строки имеют одно и то же значение, поэтому в реквизитах нет никаких изменений, поэтому нет повторного рендеринга.

Одна вещь, чтобы быть осторожным, передает объект в реквизит. Реакция не сделает глубокого сравнения, поэтому результат может отличаться от вашего ожидания. В этом случае вам нужно сравнить старые и новые объекты самостоятельно в getDerivedStateFromProps или componentWillRecieveProps в старых версиях, а затем решить, нужно ли вам вызывать forceUpdate() для принудительной повторной визуализации компонента.

Answer 3

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

Кстати, почему бы не протестировать с простым console.log?