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



Когда использовать Component или PureComponent
Некоторое время назад я переключился на использование PureComponent, поскольку это была более производительная версия Component. Это… codeburst.io



Этот подход отлично подходит для предотвращения бесполезных пересчетов и обеспечения того, чтобы ваш код был разделен на небольшие, полезные, поддерживаемые и читаемые части.

Давайте рассмотрим. Первоначально функция компонента render() преобразовывала входящую опору в новый массив, а затем отображала этот массив:

render() {
  const { posts } = this.props
  const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  return //...
}

Затем автор предложил регенерировать только topTen, проверив, отличается ли новое свойство posts от предыдущего:

componentWillMount() {
  this.setTopTenPosts(this.props.posts)
}
componentWillReceiveProps(nextProps) {
  if (this.props.posts !== nextProps.posts) {
    this.setTopTenPosts(nextProps)
  }
}
setTopTenPosts(posts) {
  this.setState({
    topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  })
}

Мы можем перейти к следующему шагу с помощью команды перекомпоновать! Просто используя функцию withPropsOnChange:

import { withPropsOnChange } from ‘recompose’;
const topTen = withPropsOnChange(
  ['posts'],
  ({ posts }) => ({
    topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9),
  })
);

… И используйте topTen из свойств компонента вместо состояния:

render() {
  const { topTen } = this.props;
  return //...
}

Функция withPropsOnChange запускает функции преобразования только при изменении любого из ключей prop, переданных в массиве первого параметра. Это поверхностное сравнение за вас. Подробнее об этом.

Спасибо, paul christophe за отличный пример.