javascript - React 组件由于多种样式而重新渲染

Question

当我传递多种样式时，我遇到渲染问题，如下所示:

<StyledComponent style={[styles.styleOne, styles.styleTwo]} />

如果组件 StyledComponent 包含在重新渲染中，StyledComponent 也会重新渲染，即使 props 没有改变。

我知道，如果父组件调用 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

Answer 1

如果您不想实现自定义的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，有时不包含，基于 prop:

// 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)} />