Как обернуть компонент React с небольшим снижением производительности? - PullRequest
Новая
       11

Как обернуть компонент React с небольшим снижением производительности?

0 голосов
/ 05 мая 2018

Моя команда использует библиотеку React MaterialUI . Чтобы обеспечить согласованный шаблон пользовательского интерфейса и упростить для нас настройку компонента MaterialUI, мы заключаем каждый компонент MaterialUI в свой собственный компонент. Например: 

const style = {} // our project custom style for ListItemText
const OurListItemText = ({primary, secondary, classes}: Props) => (
  <MuiListItemText
    primary={primary}
    secondary={secondary}
    className={classes.text}
  />
) // we only expose primary and secondary props of the original MuiListItemText.
// Team members are blocked from customising other MUIListItemText's props

export default withStyles(styles)(OurListItemText)

MuiListItemText является исходным MaterialUI компонентом, в то время как OurListItemText является нашим компонентом оболочки. В нашем проекте разрешено использовать только только OurListItemText.

Как показано выше, OurListItemText не делает ничего, кроме пересылки реквизита на MuiListItemText. Однако это сильно влияет на производительность:

React Flame graph

ListItemText полоса сверху - от OurListItemText, а нижняя - от MuiListItemText. Если мы используем MuiListItemText напрямую, это может быть на ~ 50% быстрее (мы пробовали), что заметно, когда у нас 100 ListItemText. Удаление withStyles HOC немного улучшается, но незначительно.

ListItemText - это только один пример, у нас аналогичные проблемы с производительностью для других упакованных компонентов. (2 Typography на приведенном выше графике - это еще одна пара наших компонентов-обертки и оригинального компонента MUI)

Как улучшить производительность этих простых компонентов props-forwarding?

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Если вы хотите чистую производительность - не оборачивайте ListItem, а пишите вместо него

Источник элемента списка не имеет никаких дополнительных зависимостей, поэтому будут работать Ctrl-C, Ctrl-V

Затем настройте под свои нужды, удалите ненужный код и т. Д ...

Это гарантирует максимально возможную производительность

Отрицательная сторона - стоимость поддержки будет расти.

0 голосов
/ 09 мая 2018

упаковка компонента React добавляет один дополнительный уровень полного жизненного цикла React (т. Е. Оболочку необходимо смонтировать). Можно ли этого избежать?

Вы можете избежать жизненных циклов, избегая JSX и вызывая функции напрямую.
Например. 

{Component({ data: 1, children: 'Hello' })}

вместо 

<Component data={1}>Hello</Component>

В этом сообщении в блоге заявлено, что он достиг улучшения скорости на 45% с помощью своего тестового примера.

Этот синтаксис может быть не таким читабельным / понятным.

Цитата из Дана Абрамова по этому вопросу :

Мы рассматриваем подобные оптимизации в контексте Prepack, но нет ничего, что можно было бы сразу же использовать в ближайшие пару месяцев. В течение года или двух у нас может быть что-то.

Обратите внимание, что если вы не создаете тысячи элементов, разница в производительности не будет заметна. Кроме того, если ваши компоненты не очень плоские и простые, «чистая выгода» от этой оптимизации, вероятно, будет гораздо менее актуальной на практике.

Я бы не стал ждать, пока Prepack выполнит оптимизацию, поскольку временная шкала не определена, и итоговая оптимизация может не совпадать с этой.

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

...