我的团队使用 React MaterialUI库。为了提供一致的 UI Pattern 并方便我们自定义 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除了将 props 转发到MuiListItemText. 但是，这对性能影响很大：
ListItemText顶部的栏来自 ，OurListItemText而下方的栏来自MuiListItemText。如果我们MuiListItemText直接使用，它可能会快约 50%（我们已经尝试过），这在我们有 100 时很明显ListItemText。删除withStylesHOC 会有所改善，但并不显着。
ListItemText这只是一个例子，我们在其他包装组件上也有类似的性能问题。（Typography上图中的2是另一对 our-wrapper-component 和 MUI's-original-component）
如何提高那些简单的 props-forwarding-components 的性能？