В чем смысл StyleSheet.create

Я читаю React Native docs/tutorial, и мне интересно, что точка в функции StyleSheet.create.

Например, учебник имеет следующий код:

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

Но я не понимаю разницы между этим и:

const styles = {
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
};

ОТВЕТЫ

Ответ 1

TL; DR Всегда используйте StyleSheet.create(), когда можете.

Ответ от Nico верен, но есть и больше.

Подводя итог:

  • Он проверяет стили, упомянутые Нико
  • Как упоминалось в documentation:

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

  1. Также упоминается в documentation:

Он также позволяет отправлять стиль только один раз через мост. Все последующие использования будут ссылаться на id (еще не реализованы).

Как вы знаете, отправка данных через мост - очень дорогостоящая операция, которая оказывает значительное влияние на производительность приложения. Таким образом, используя StyleSheet.create(), вы уменьшаете нагрузку на мост.

Ответ 2

StyleSheet.create больше не повышает производительность.

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29265#issuecomment-430783289

цитируя комментарий github:

@alloy Я понимаю, что говорит документация, но могу доказать этот код:

const myStyle: ViewStyle = { flex: 1 } export const FlexView:
React.SFC = (props) => <View style={myStyle}>{props.children}</View>

имеет почти такую же производительность (даже немного быстрее) по сравнению с

const s = StyleSheet.create({ flex: { flex: 1 } }) 
export const FlexView: React.SFC = (props) => <View style={s.flex}>{props.children}</View>

потому что, если вы посмотрите на источники, вы обнаружите, что последний фрагмент эффективно извлечен для этого (см.: https://github.com/facebook/react-native/blob/0.57-stable/Libraries/StyleSheet/StyleSheet.js#L373):

const s = { flex: { flex: 1 } }
export const FlexView = (props) => <View style={s.flex}>{props.children}</View>

И да, в предыдущем версии RN это был глобальный реестр стилей, но это было еще больше медленный, потому что на самом деле он никогда не пересекал границу моста (доказательство от 0.55 филиал) 😀

Ответ 3

Вот исходный код создания.

create<T: Object, U>(obj: T): {[key:$Keys<T>]: number} {
  var result: T = (({}: any): T);
  for (var key in obj) {
    StyleSheetValidation.validateStyle(key, obj);
    result[key] = ReactNativePropRegistry.register(obj[key]);
  }
  return result;
}

Я не эксперт React ни в каком. Я фактически никогда не использовал это, но вот мои идеи. Похоже, что create выполняет некоторую проверку ваших ключей и регистрирует их в React.

Я думаю, что вы можете пропустить проверку, просто не вызывая create, но я не уверен, что именно ReactNativePropRegistry.register делает точно.

Ссылка на источник