我在网站开发过程中尝试使用iron-flex-layout,当我花了几个小时试图让它工作时变得非常沮丧,但无济于事.最后,我决定尝试一个简单的网页,看它是否会起作用(认为它可能是我网站上的内容).但是,我尝试了以下代码,但仍然无法让它工作!谁能发现我的错误？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
body {
font-weight: 300;
}
div {
border: 2px solid grey;
background-color: white;
}
.layout {
margin-bottom: 20px;
background-color: grey;
}
p {
margin: 5px;
}
</style>
</head>
<body fullbleed unresolved>
<div class="horizontal layout">
<div><p>div</p></div>
<div class="flex"><p>flex (horizontal layout)</p></div>
<div><p>div</p></div>
</div>
</body>
</html>
当我传递多个样式时，我面临渲染问题，如下所示：
<StyledComponent style={[styles.styleOne, styles.styleTwo]} />
如果组件 StyledComponent 包含在重新渲染中，则 StyledComponent 也会重新渲染，即使道具没有改变。
我知道如果父组件调用 setState，那么它的子组件将重新渲染，而不管子组件自己的 props 是否实际发生变化。我尝试使用 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-stupid
