React Native - яка користь від використання StyleSheet проти простого об’єкта?

Яка саме користь від використання StyleSheet.create()звичайного об’єкта?

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

Vs.

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

Цитуючи безпосередньо з розділу коментарів StyleSheet.js з рідного React

Якість коду:

• Відсуваючи стилі від функції візуалізації, ви полегшуєте розуміння коду.

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

Продуктивність:

• Створення таблиці стилів з об’єкта стилю дає можливість посилатися на нього за ідентифікатором, а не створювати новий об'єкт стилю кожен раз.

• Це також дозволяє надсилати стиль лише один раз через міст. Усі наступні використання будуть посилатися на ідентифікатор (ще не реалізований).

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

Користі немає. Період.

Міф 1: StyleSheetефективніший

Абсолютно немає різниці в продуктивності між StyleSheetоб'єктом і оголошеним поза ним render(це було б інакше, якщо ви створюєте новий об'єкт всередині renderкожного разу). Різниця у виконанні - міф.

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

Міф 2: StyleSheetперевіряє об'єкт стилю під час компіляції

Це не правда. Звичайний JavaScript не може перевірити об'єкти під час компіляції.

Дві речі:

• Він перевіряє під час виконання, але це робить, коли ви передаєте об'єкт стилю компоненту. Без різниці.
• Він перевіряє під час компіляції, якщо ви використовуєте Flow або TypeScript , але це робиться, як тільки ви передаєте об'єкт у вигляді стилю для компонента або якщо ви належним чином набрали підказку, як нижче. Немає різниці.

const containerStyle: ViewStyle = {
   ...
}

Прийнята відповідь не є відповіддю на питання ОП.

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

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

1. Це підтверджує стилі
2. Краще виконання, оскільки воно створює відображення стилів до ідентифікатора, а потім воно посилається всередині цього ідентифікатора, замість того, щоб кожен раз створювати новий об'єкт. Тож навіть процес оновлення пристроїв проходить швидше, оскільки ви не надсилаєте кожного разу всі нові об’єкти.

Раніше вважали , що з допомогою STYLESHEET був більш продуктивним, і був рекомендований з цієї причини по RN команди аж до версії 0.57, але вона тепер уже не рекомендується , так як правильно вказав у інший відповідь на це питання.

Документація RN тепер рекомендує StyleSheet з наступних причин, хоча, думаю, ці причини однаково стосуватимуться звичайних об'єктів, створених поза функцією візуалізації:

• Відсуваючи стилі від функції візуалізації, ви полегшуєте розуміння коду.
• Іменування стилів - це хороший спосіб додати значення компонентам низького рівня у функції візуалізації.

Тож, на вашу думку , можливі переваги використання StyleSheet над простими об’єктами?

1) Не дивлячись на заяви про зворотне моєму випробуванні на RN v0.59.10 означає , що ви робите отримати деякі перевірки при виклику StyleSheet.create()і машинопис (і , ймовірно , потік) також буде повідомляти про помилки під час компіляції. Навіть без перевірки часу компіляції, я думаю, що все-таки вигідно зробити перевірку часу стилів перед тим, як вони будуть використані для візуалізації, особливо там, де компоненти, які використовують ці стилі, можуть бути умовно надані. Це дозволить збирати такі помилки без необхідності перевіряти всі сценарії візуалізації.

2) З огляду на , що StyleSheet буде рекомендований командою RN , вони можуть по- , як і раніше є надія , використовуючи таблицю стилів для підвищення продуктивності в майбутньому, і вони можуть мати інші можливі покращення в вигляді , як добре, наприклад:

3) Поточна StyleSheet.create()перевірка часу роботи корисна, але трохи обмежена. Здається, обмежується перевірка типів, які ви отримаєте з потоком або шрифтом, так що вибираєте скажіть flex: "1"або borderStyle: "rubbish", але не width: "rubbish"так, як це може бути відсотковий рядок. Можливо, команда RN може в майбутньому вдосконалити таку перевірку, перевіривши такі речі, як процентні рядки або обмеження діапазону, або ви можете ввімкнути StyleSheet.create()свою функцію, щоб зробити цю більш широку перевірку.

4) Використовуючи StyleSheet, вам, можливо, полегшується перехід на сторонні альтернативи / розширення, такі як таблиця стилів-реагуючих-розширених стилів, які пропонують більше.

Створення ваших стилів за допомогою StyleSheet.createпройде, проте перевірка буде лише тоді, коли глобальна змінна __DEV__встановлена ​​на істинне (або під час роботи в емуляторах Android або IOS див. React Native DEV і PROD змінні )

Вихідний код функції досить простий:

create < +S: ____Styles_Internal > (obj: S): $ReadOnly < S > {
  // TODO: This should return S as the return type. But first,
  // we need to codemod all the callsites that are typing this
  // return value as a number (even though it was opaque).
  if (__DEV__) {
    for (const key in obj) {
      StyleSheetValidation.validateStyle(key, obj);
      if (obj[key]) {
        Object.freeze(obj[key]);
      }
    }
  }
  return obj;
}

Я рекомендую використовувати його, оскільки він виконує перевірку часу виконання під час розробки, також він заморожує об'єкт.

Я не виявив жодних відмінностей між StyleSheetі простим об'єктом, за винятком введення перевірки в TypeScript.

Наприклад, це (врахуйте відмінності введення тексту):

import { View, Text, Image, StyleSheet } from 'react-native';
import logo from './logo.svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.someViewStyle}>
        <Text style={styles.someTextStyle}>Text Here</Text>
        <Image style={styles.someImageStyle} source={logo} />
      </View>
    );
  }
}

const styles: StyleSheet.create({
  someViewStyle: {
    backgroundColor: '#FFF',
    padding: 10,
  },
  someTextStyle: {
    fontSize: 24,
    fontWeight: '600',
  },
  someImageStyle: {
    height: 50,
    width: 100,
  },
});

дорівнює цьому:

import { View, Text, Image, ViewStyle, TextStyle, ImageStyle } from 'react-native';
import logo from './logo.svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.someViewStyle}>
        <Text style={styles.someTextStyle}>Text Here</Text>
        <Image style={styles.someImageStyle} source={logo} />
      </View>
    );
  }
}

const styles: {
  someViewStyle: ViewStyle;
  someTextStyle: TextStyle;
  someImageStyle: ImageStyle;
} = {
  someViewStyle: {
    backgroundColor: '#FFF',
    padding: 10,
  },
  someTextStyle: {
    fontSize: 24,
    fontWeight: '600',
  },
  someImageStyle: {
    height: 50,
    width: 100,
  },
};