React Native-単純なオブジェクトと比べてStyleSheetを使用する利点は何ですか？

StyleSheet.create()プレーンオブジェクトを使用するメリットとは何ですか。

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

対

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

ReactネイティブのStyleSheet.jsのコメントセクションから直接引用する

コード品質：

• スタイルをレンダー関数から遠ざけることで、コードを理解しやすくなります。

• スタイルに名前を付けることは、render関数の低レベルコンポーネントに意味を追加するための良い方法です。

パフォーマンス：

• スタイルオブジェクトからスタイルシートを作成すると、毎回新しいスタイルオブジェクトを作成する代わりに、IDでスタイルシートを参照できます。

• また、ブリッジを介して一度だけスタイルを送信できます。以降のすべての使用では、IDを参照します（まだ実装されていません）。

また、StyleSheetはスタイルシートのコンテンツも検証します。したがって、StyleSheetが実際に実装されている実行時ではなく、コンパイル時に、不正なスタイルプロパティのエラーが表示されます。

メリットはありません。限目。

神話1：StyleSheetパフォーマンスが高い

StyleSheetとの外部で宣言されたオブジェクトのパフォーマンスにはまったく違いがありませんrender（render毎回新しいオブジェクトを作成する場合は、毎回異なります）。パフォーマンスの違いは神話です。

神話の起源は、React Nativeチームがこれを行おうとしたためと考えられますが、成功しませんでした。公式ドキュメントのどこにもパフォーマンスに関する情報はありません：https : //facebook.github.io/react-native/docs/stylesheet.html、ソースコードは「まだ実装されていません」：https : //github.com/ facebook / react-native / blob / master / Libraries / StyleSheet / StyleSheet.js＃L207

神話2：StyleSheetコンパイル時にスタイルオブジェクトを検証する

本当じゃない。プレーンJavaScriptは、コンパイル時にオブジェクトを検証できません。

2つのこと：

• 実行時に検証しますが、スタイルオブジェクトをコンポーネントに渡すときにも検証します。変わりはない。
• FlowまたはTypeScriptを使用している場合はコンパイル時に検証しますが、オブジェクトをスタイルプロップとしてコンポーネントに渡した場合、または以下のようにオブジェクトを適切にタイプヒントした場合は検証します。違いもありません。

const containerStyle: ViewStyle = {
   ...
}

受け入れられた回答は、OPの質問に対する回答ではありません。

問題は、インラインスタイルとconstクラスの外側の違いではなく、StyleSheet.createプレーンオブジェクトの代わりに使用する理由です。

私が見つけたものを少し調査した後、次のようになります（情報があれば更新してください）。のアドバタンジはStyleSheet.create次のとおりです。

1. スタイルを検証します
2. スタイルのIDへのマッピングを作成し、新しいオブジェクトを作成するたびに作成するのではなく、このIDで内部を参照するため、パフォーマンスが向上します。したがって、すべての新しいオブジェクトを毎回送信する必要がないため、デバイスを更新するプロセスでさえ高速になります。

これは、スタイルシートを使用すると、よりパフォーマンスだったと考えられるために使用される、として 推奨バージョン0.57までRNチームアップにより、このような理由のために、しかし正確に指摘したように、それはもはや推奨されていない別の答えこの質問へ。

RNのドキュメントでは、私はこれらの理由は、レンダリング機能の外に作成されたプレーンなオブジェクトにも同様に適用と思いますけれども、今、次のような理由でスタイルシートをお勧めします。

• スタイルをレンダー関数から遠ざけることで、コードを理解しやすくなります。
• スタイルに名前を付けることは、render関数の低レベルコンポーネントに意味を追加するための良い方法です。

だから私は何だと思いますされているプレーンなオブジェクトの上にスタイルシートを使用しての可能な利点は？

1）反対の主張にもかかわらず、RN v0.59.10での私のテストは、呼び出し時に検証が行われStyleSheet.create()、typescript（およびおそらくフロー）もコンパイル時にエラーを報告することを示しています。コンパイル時のチェックがなくても、レンダリングに使用する前に、特にそれらのスタイルを使用するコンポーネントが条件付きでレンダリングされる可能性がある場合は、実行時にスタイルの検証を行うことが有益だと思います。これにより、すべてのレンダリングシナリオをテストしなくても、そのようなエラーを検出できます。

2）RNチームがStyleSheet を推奨していることを考えると、StyleSheet を使用して将来のパフォーマンスを改善することを望んでいる可能性があり、次のような他の改善も考えられます。

3）現在のStyleSheet.create()ランタイム検証は有用ですが、少し制限があります。これは、フローまたはタイプスクリプトで取得するタイプチェックに制限されているようです。そのため、「」flex: "1"または「」を取得しますが、パーセント文字列ではborderStyle: "rubbish"ないwidth: "rubbish"可能性があります。RNチームは、パーセンテージ文字列や範囲の制限などをチェックすることで、今後このような検証を改善する可能性があります。またはStyleSheet.create()、独自の関数をラップして、より広範な検証を行うことができます。

4）StyleSheetを使用すると、react-native-extended-stylesheetのようなサードパーティの代替/拡張機能への移行が容易になります。

経由でスタイルを作成するStyleSheet.createと、グローバル変数__DEV__がtrueに設定されている場合にのみ検証が通過します（または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;
}

開発時にランタイム検証を実行し、オブジェクトをフリーズするため、これを使用することをお勧めします。

StyleSheetTypeScriptでの入力検証を除いて、between とplainオブジェクトの違いは見つかりませんでした。

たとえば、これ（タイプの違いに注意してください）：

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,
  },
};