Redux: обновить один элемент в списке без обновления всех других компонентов, которые зависят от этого списка - PullRequest
Новая
       10

Redux: обновить один элемент в списке без обновления всех других компонентов, которые зависят от этого списка

0 голосов
/ 04 июля 2018

Я работаю над приложением React / Redux. Допустим, у меня есть компонент, который получает два реквизита из своего контейнера: 

// NewsFeedItem.js
class NewsFeedItem extends React.Component {
  render() {
    const user = this.props.user;
    const item = this.props.item;
    return <p>{user.name} - {item.date}</p>;
  }
}

const mapStateToProps = (state) => ({
  user: state.user,
  item: state.user.items[0],
});

export default connect(mapStateToProps)(NewsFeedItem);

Как я могу убедиться, что этот компонент не обновляется, если я внесу изменения во 2-й или 3-й элемент в списке элементов?

1 Ответ

0 голосов
/ 04 июля 2018

Вставка в мой ответ от связанной проблемы Redux для полноты:

Во-первых, нет ничего плохого в повторном рендеринге компонента React - именно так React работает в первую очередь. Если компонент повторно выполняет рендеринг с теми же данными и выдает тот же результат рендеринга, то React просто не обновляет DOM. Теперь, конечно, это считается «потраченным впустую» повторным рендерингом, которого, вероятно, можно было избежать, но это только проблема, если вы пытаетесь серьезно оптимизировать производительность.

Второе: да, если вы корректно обновляете свое состояние, то обновление до state.user.items[3] должно привести к новым ссылкам для items, user и state и передаче user в виде Приподдержка такого компонента приведет к повторному рендерингу . Однако в вашем конкретном примере этот компонент использует только user.name. так что нет никакой причины передавать весь объект user как опору - попробуйте вместо этого просто передать name : state.user.name.

В-третьих, вы можете разделить хранилище пользовательских атрибутов и связанных с ними элементов на отдельные части состояния, чтобы обновление элемента не вызывало обновления соответствующего пользовательского объекта. См., Например, форму нормализации состояния в документации Redux.

Наконец, вы всегда можете внедрить пользовательский shouldComponentUpdate в свой компонент и выполнить дополнительную проверку там, чтобы увидеть, должен ли компонент пропустить повторную визуализацию.

...