React原生StyleSheet优化

Question

什么是最有效的(为什么)？

“层叠”样式：

export function Title({ children, small }) {
  return <Text style={[styles.title, small && styles.small]}>{children}</Text>;
}

const styles = StyleSheet.create({
  title: {
    fontFamily: "Roboto",
    fontWeight: "500",
    fontSize: 20
  },
  small: {
    fontSize: 14
  }
});

或独特的风格：

export function Title({ children, small }) {
  return (
    <Text style={small ? styles.titleSmall : styles.title}>{children}</Text>
  );
}

const title = {
  fontFamily: theme.fontFamily,
  fontWeight: "500"
};

const styles = StyleSheet.create({
  title: {
    ...title,
    fontSize: 20
  },
  titleSmall: {
    ...title,
    fontSize: 14
  }
});

给我的提示：http://wiki.c2.com/?PrematureOptimization

Answer 1

在React Native的情况下，级联风格是最好的。

通过从样式对象创建样式表，可以通过ID引用样式表，而不是每次都创建新的样式对象。

您还可以尝试提取通用组件CSS，无论它们看起来有多简单，您都可以避免一遍又一遍地定义内联样式。Here是RN团队和medium link的笔记