Подтвердить что ты не робот

React Native - В чем преимущество использования StyleSheet против простого объекта?

В чем именно заключается преимущество использования StyleSheet.create() сравнению с простым объектом?

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
}

Против

const styles = {
  container: {
    flex: 1
  }
}
4b9b3361

ОТВЕТЫ

Ответ 1

Цитирование непосредственно из раздела комментариев StyleSheet.js React native

Качество кода:

  • Отодвигая стили от функции рендеринга, вы облегчаете понимание кода.

  • Наименование стилей - хороший способ добавить смысл к компонентам низкого уровня в функции рендеринга.

Спектакль:

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

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

Также StyleSheet проверяет содержимое вашей таблицы стилей. Таким образом, любая ошибка неправильного свойства стиля отображается во время компиляции, а не во время выполнения, когда фактически реализуется StyleSheet.

Ответ 2

Принятый ответ не является ответом на вопрос ОП.

Вопрос не в разнице между встроенными стилями и const вне класса, а в том, почему мы должны использовать StyleSheet.create вместо простого объекта.

После небольшого исследования я обнаружил следующее (пожалуйста, обновите, если у вас есть какая-либо информация). Преимущества StyleSheet.create должны быть следующими:

  1. Это подтверждает стили
  2. Лучше, потому что он создает сопоставление стилей с идентификатором, а затем он ссылается внутри с этим идентификатором, вместо того, чтобы каждый раз создавать новый объект. Таким образом, даже процесс обновления устройств происходит быстрее, потому что вы не отправляете каждый раз все новые объекты.

Ответ 3

Там нет никакой выгоды. Период.

Миф 1: StyleSheet более производительна

Нет абсолютно никакой разницы в производительности между StyleSheet и объектом, объявленным вне render (это будет отличаться, если вы каждый раз создаете новый объект внутри render). Разница в производительности - это миф.

Вероятно, происхождение мифа связано с тем, что команда React Native пыталась это сделать, но они не увенчались успехом. Нигде в официальных документах вы не найдете ничего о производительности: https://facebook.github.io/react-native/docs/stylesheet.html, в то время как исходный код заявляет, что "еще не реализован": https://github.com/facebook/реагируют родной/блоб/ведущий/Библиотеки /StyleSheet/StyleSheet.js # L207

Миф 2: StyleSheet проверяет объект стиля во время компиляции

Это неправда. Простой JavaScript не может проверять объекты во время компиляции.

Две вещи:

  • Он действительно проверяется во время выполнения, но также и при передаче объекта стиля компоненту. Нет разницы.
  • Он действительно проверяется во время компиляции, если вы используете Flow или TypeScript, но так же происходит, когда вы передаете объект как опору стиля компоненту, или если вы правильно напечатали объект подсказки, как показано ниже. Разницы тоже нет.
const containerStyle: ViewStyle = {
   ...
}