reactjs - React Native 内联样式和性能

Question

执行以下操作:

<Text style={{color: 'blue', fontSize: 30}} />

与以下内容相比有任何性能影响:

<Text style={styles.blueButton} />

...

const styles = StyleSheet.create({
  blueButton: {
    color: 'blue',
    fontSize: 30,
  }
});

Answer 1

来自docs对于样式表

Performance:

• Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
• It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

另一个好处是样式错误将在编译时而不是运行时生成。

我个人仍然喜欢使用内联样式(并为共享样式创建新组件)，因为它使代码对我来说更具可读性，并且性能影响并不明显。