Question

当我传递多种样式时，我面临渲染问题：

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

如果重新渲染中包含组件StyledComponent，则即使道具未更改，StyledComponent也将重新渲染。

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

Answer 1

如果您不想实现自定义的shouldComponentUpdate，则需要确保该数组通过import tkinter as tk import tkinter.ttk as ttk root = tk.Tk() mainframe = tk.Frame(root) # Model input = tk.DoubleVar(value=0.) spin = tk.Spinbox(mainframe, textvariable=input, wrap=True, width=10) slide = ttk.Scale(mainframe, variable=input, orient='horizontal', length=200) spin['to'] = 1.0 spin['from'] = 0.0 spin['increment'] = 0.01 slide['to'] = 1.0 slide['from'] = 0.0 # slide['digits'] = 4 # slide['resolution'] = 0.01 # Layout weights = {'spin': 1, 'slide': 100} mainframe.grid_rowconfigure(0, weight=1) mainframe.grid_columnconfigure(0, weight=weights['spin']) mainframe.grid_columnconfigure(1, weight=weights['slide']) spin.grid(row=0, column=0, sticky='news') slide.grid(row=0, column=1, sticky='news') root.grid_rowconfigure(0, weight=1) root.grid_columnconfigure(0, weight=1) mainframe.grid(row=0, column=0) root.mainloop()检查。取决于更改方式或更改方式，有两种可能性。如果它永远不会改变，那就是最简单的方法：只需一次创建数组，然后对其进行引用。例如：

===

如果有可能对其进行更改，则需要添加一些代码来进行管理。最有可能的是，我将创建一个生成数组的记忆函数，并且仅在相关内容发生更改时才重新计算。例如，这是一个基于prop的示例，该示例有时包括style2，有时不包括：

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

Answer 2

将styles数组移到该类的实例变量中，并通过props传递引用。这样，它就不是每个渲染的新数组。

由于多种样式，React组件重新渲染

2 个答案: