Реагировать на оптимизацию родной таблицы стилей

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.

Создание таблицы стилей из объекта стиля позволяет ссылаться на это по идентификатору вместо создания нового объекта стиля каждый раз.

А также вы можете попробовать извлечь общие компоненты CSS, какими бы простыми они ни казались, вам не нужно снова и снова определять встроенные стили. Здесь - записка от команды RN и средняя ссылка