当我传递多种样式时，我面临着渲染问题，比如
<StyledComponent style={[styles.styleOne, styles.styleTwo]} />
如果组件StyledComponent包含在重新渲染中，StyledCmponent也将重新渲染，即使道具没有更改。
我知道，如果父组件调用setState，那么它的子组件将重新渲染，而不管子组件自己的道具实际发生了变化。我尝试使用PureComponent和React.memo。但是，我的子组件仍在重新渲染问题似乎在于我发送样式的方式如果我把一种风格传下去：
<StyledComponent style={styles.styleOne} />
PureComponent/React.memo有效。但是，如果我的组件是这样设计的：
<StyledComponent style={[styles.styleOne, styles.styleTwo]} />
然后它每次都会重新渲染。
这是因为我在父组件的每次渲染时都实例化一个新数组，而PureComponent/React.memo无法检测到它们是相同的样式。
所以我的问题是，如何在一个组件上使用多个样式，而不必在我的每个子组件上编写自定义的shouldComponentUpdate？渲染明显降低了我的应用程序的性能，因为我使用的是旧的Android设备，所以我想尽量减少所需的渲染。
下面是一份演示这一点的小吃：https://snack.expo.io/@tnortman/styles-r-愚蠢的
如果不想实现自定义的shouldComponentUpdate，则需要确保数组通过===检查。这有几种可能性，取决于它如何或是否会改变。如果它从未改变，那么这是最简单的：只需在前面创建一次数组，然后引用它。例如：
const styles = StyleSheet.Create({
styleOne: {
backgroundColor: 'red',
},
styleTwo: {
padding: 40,
},
});
// Note that this line is not in render
const combined = [styles.styleOne, styles.styleTwo];
// ...
// in render:
<StyledPureComponent style={combined} />
如果它可能发生变化，那么您需要添加一些代码来管理它。最有可能的是，我会创建一个内存化函数来生成数组，并且只有在相关内容发生变化时才会重新计算。例如，这里有一个例子，它有时包括style2，有时不包括，基于一个道具：
// Just an example; you could use a different library or implement it yourself
import memoize from "memoize-one";
const combineStyles = memoize((shouldIncludeStyleTwo) => {
const styles = [styles.styleOne];
if (shouldIncludeStyleTwo) {
styles.push(styles.styleTwo);
}
return styles;
});
// ...
<StyledPureComponent style={combineStyles(this.props.something)} />
将样式数组移到类的实例变量中，并通过props传递引用。这样，它就不是每次渲染的新数组。