Как улучшить performance, react/redux?

Question

[beefront17]

Всем привет! Скажите пожалуйста как лучше писать чтобы улучшить перформанс на react/redux?
Сейчас есть большой компонент, который выводится циклом, то есть список таких компонентов.
И вот этот список немного долго грузится.
Сам Итем компонент состоит из логики плюс рендер методы
к примеру

renderHover = () => {
    return (
      <div>
       {/* some hover block with a lot of markup*/}
      </div>
    )
  };

Вопрос улучшится ли перформанс если такие рендер методы выносить в отдельные компоненты?
Буду благодарен за любые советы на эту тему)

Comments

[Антон Спирин]

Сколько компонентов в списке?

[beefront17]

Антон Спирин, 50-70

[Антон Спирин]

beefront17, ну это не много. Возможно дело в том как реализованы компоненты. Лучше их писать классами и прописывать в каждом shouldComponentUpdate. Еще никогда не пишите рендер методы стрелочными функциями. Только методы:

renderHover() {
  return (
    <div>
     {/* some hover block with a lot of markup*/}
    </div>
  )
}

В этом случае используется один метод из прототипа. В вашем создается 50-70 одинаковых функций.
Используйте стрелочные функции только для хандлеров и колбеков.

[beefront17]

Антон Спирин, так и пишу(методами), просто в примере написал через стрелочную функцию.
shouldComponentUpdate также использую.
Вопрос нужно ли мне выносить рендер методы в отдельние комоненты?
И что еще можно сделать?

[Максим]

Антон Спирин, интересно, не задумывался об этом (стрелочная функция vs метод).

[Антон Спирин]

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

[Антон Спирин]

Максим, свойства классов(не статические) это аналог записи:

class Foo {
  constructor() {
    this.renderHover = () => {};
  }
}

То есть в теории, в зависимости от содержимого функции, использование bind сократит объем используемой памяти. Другое дело что эта разница в реалиях React разработки и с учетом мощности современных компьютеров не существенна и не является основанием для отказа от удобного синтаксиса. Да и вообще, преждевременная оптимизация - зло.
Что касается рендер методов, то их нет никакого смысла реализовывать стрелочными функциями, если они, конечно, никуда не передаются.

[Максим]

Антон Спирин, можешь взглянуть на скриншот? Я не правильно спросил ,или все же разницы нет? Или где прочитать про это.. take.ms/OJgkf

[Антон Спирин]

Максим, прям существенной разницы в производительности нет. Вся разница:
1. При создании каждого компонента тратится дополнительное время на инициализацию этих функций.
2. Ненужные копии занимают дополнительное место в памяти.
Это все. Если вы строите списки и рендер методы достаточно объемные, то разница думаю будет заметна. Особенно если компонентов более сотни и таких методов у них много. Тут надо бенчмарк делать.

[beefront17]

Антон Спирин, Ок, еще вопрос
как лучше передавать node элемент
через props или через children?
Есть ли разница?
Сейчас у меня есть HOC который принимает этот итем и возвращает с новыми props, где есть node элемент

[Антон Спирин]

Максим, демо с ответом на вопрос по ссылке.

[Антон Спирин]

beefront17, JSX это синтаксический сахар над:

React.createElement(component, props, ...children);

Когда вы пишите реализацию render и явно передаете children или что-то свое:

render() {
  const { myChildren, children } = this.props;

  return <div>{children/* или myChildren */}</div>;
}

то нет никакой разницы, так как в итоге все равно все попадает в children компонента или элемента, который вы используете в render. В данном примере все попадает в children элемента div.

[Антон Спирин]

Максим, только заметил, что вопрос немного неправильно поставлен, тезис:

create new function every re-render

Я же писал о create new function for every instance.
Возможно, там обсуждение не в то русло ушло =)

[Максим]

Антон Спирин, да ок) разобрались) спасибо!

[Yustas Alexu]

Максим, производительность может падать, если происходит множественная перерисовка одного или нескольких компонентов. Это можно проверить через обычный console.log поставленный в методе render нужного компонента.

[Максим]

Yustas Alexu, наверное, вы не мне хотели ответить.

[Yustas Alexu]

Максим, да, извиняюсь, ошибся адресом )

[beefront17]

Всем спасибо за отклик)