Моя команда использует библиотеку 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 props
export default withStyles(styles)(OurListItemText)
MuiListItemText - это оригинальный компонент MaterialUI, а OurListItemText - наш компонент оболочки. В нашем проекте разрешено использовать только OurListItemText.
В качестве фрагмента выше, OurListItemText ничего не делает, кроме как перенаправить реквизиты в MuiListItemText. Однако это сильно влияет на производительность:
ListItemText в верхней части находится в OurListItemText а ниже - MuiListItemText. Если мы используем MuiListItemText напрямую, это может быть на 50% быстрее (мы попытались), что заметно, когда у нас есть 100 ListItemText. Удаление withStyles HOC немного улучшается, но не значительно.
ListItemText - только один пример, у нас есть аналогичная проблема с производительностью для других упакованных компонентов. (2 Typography на графике выше - это еще одна пара нашего компонента-обертки и MUI-оригинал-компонента)
Как улучшить производительность этих простых компонентов реквизита-пересылки?
