如何在几乎不影响性能的情况下包装React组件? [英] How to wrap React component with little performance penalty?

问题描述

我的团队使用React MaterialUI 库.为了提供一致的UI模式并使我们易于自定义MaterialUI的组件，我们将每个MaterialUI的组件包装在我们自己的组件中.例如:

My team uses React MaterialUI library. To provide consistent UI Pattern and make it easy for us to customise MaterialUI's component, we wrap each MaterialUI's component in our own component. For example:

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.

MuiListItemText is the original MaterialUI's component, while OurListItemText is our wrapper component. In our project, only OurListItemText is allowed to be used.

如上面的代码片段所示，OurListItemText除了将道具转发到MuiListItemText之外什么也没有做.但是，这会极大地影响性能:

As the snippet above, OurListItemText does nothing but forward the props to MuiListItemText. However, this affects the performance quite a lot:

ListItemText条来自OurListItemText，下面的条来自MuiListItemText.如果直接使用MuiListItemText，则速度可能会快50％(我们已经尝试过)，当我们有100个ListItemText时，这一点很明显.删除withStyles HOC会有所改善，但效果不明显.

ListItemText bar on the top is from OurListItemText while the one below is from MuiListItemText. If we use MuiListItemText directly, it could be ~50% faster (we have tried), which is noticeable when we have 100 ListItemText. Removing withStyles HOC improves a bit, but not significantly.

ListItemText仅是一个示例，我们在其他包装的组件上也遇到类似的性能问题. (上图中的2 Typography是我们的包装器组件和MUI的原始组件的另一对)

ListItemText is only one example, we have similar performance issue on other wrapped components. (2 Typography in the graph above is another pair of our-wrapper-component and MUI's-original-component)

如何提高那些简单的道具-转发组件的性能?

How to improve the performance of those simple props-forwarding-components?

推荐答案

包装React组件会增加一个完整的React生命周期的额外级别(即需要安装包装器).有可能避免这种情况吗?

wrapping a React component adds one extra level of full React lifecycle (i.e. the wrapper needs to be mounted). Is it possible to avoid this?

您可以通过避免JSX并直接调用函数来避免生命周期.
例如.

You can avoid the lifecycles by avoiding JSX and calling the functions directly instead.
Eg.

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

代替

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

此博客帖子声称用他们的测试用例可以将速度提高45％.

This blog post claimed to achieve 45% speed improvement with their test case.

此语法可能不那么可读/不易理解.

This syntax might not be as readable/understandable though.

丹·阿布拉莫夫对此报价的一些引用:

我们在Prepack的背景下正在研究这样的优化，但是在接下来的几个月中没有任何东西可以立即使用.一两年之内，我们可能会有所收获.

We're looking at optimizations like this in the context of Prepack but there's nothing that's going to be immediately useable in the next couple of months. Within a year or two we might have something.

请注意，除非您要创建数千个元素，否则性能差异不会明显.另外，除非您的组件非常扁平和简单，否则在实践中，这种纯粹的胜利"可能就没有多大意义了.

Note that unless you're creating thousands of elements, the performance difference won't be noticeable. Also unless your components are very flat and simple, the "pure win" from this optimization will likely be much less relevant in practice.

尽管时间轴不确定，因此我不会等到Prepack进行优化，并且优化结果可能与此不同.

I wouldn't wait for Prepack to do the optimisation though since the timeline is uncertain and the resulting optimisation might not be identical to this.

关于性能改进的重要性，这取决于您的项目，并且确定的唯一方法是尝试并亲自查看改进.

As for the significance of the performance improvement, it'd depend on your project and the only way to be certain is to try out and see the improvement for yourself.

这篇关于如何在几乎不影响性能的情况下包装React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！