React Native開発者向けのES6の概要

React Nativeに来て、あなたが

  1. JavaScriptの新機能
  2. すでにJavaScriptに精通しているが、ES6 / ES2015 +機能を使用していない

その後、時々少し失われたと感じるかもしれません。構文が奇妙で混乱しているように見える場合や、何を探すべきかわからない場合があります。 React Nativeアプリとチュートリアルに表示される最も一般的なES6 +機能の簡単なリストをまとめました。これは決して包括的なものではありませんが、少なくとも開始する必要があります。

変数

JavaScriptの登場以来、var。しかし、今ではvar、let、およびconstがあります。それらはすべて有効ですが、違いは何ですか?

let:varと非常に似ていますが、スコープが異なります。 varは関数スコープ(使用可能、関数内の任意の場所で変更可能)ですが、letはブロックスコープです。つまり、そのコードブロック内でのみ使用可能です。 varの代わりに常にletを使用しています(正直、varを最後に使用したときのことは覚えていません)。

const:letと同じスコープ(ブロック)ですが、その値を変更することはできません。例:

const name = 'Spencer';
name = 'Johnny' //これはできません

ただし(これは最初は混乱していたものです)、オブジェクトまたは配列型の場合は変更できます。次に例を示します。

const info = {
  名前:「スペンサー」、
  会社:「Handlebar Labs」、
};
info.job = 'Teaching'; //これは完全に有効です
const roles = ['Student'、 'Teacher'];
roles.push( 'Developer'); // 行ってもいい!

さらに情報が必要ですか?

  • させる
  • const

矢印関数

構文

JavaScriptで矢印関数と呼ばれる関数を宣言する新しい方法が追加されました。ReactまたはReact Nativeを使用すると、これらの関数が多く表示されます。標準/古い関数と矢印関数の主な違いは、これが何にバインドされているかです。そのため、関数を使用したい場合があります。矢印関数の作成は簡単です

const greet =(name)=> {
  return 'Hello、' + name + '!';
};
greet( 'Spencer'); //こんにちは、スペンサー!

矢印関数の構文の詳細

引数のフォーマット

矢印関数を使用すると、いくつかの異なる方法で矢印関数をフォーマットできます。これらはすべて一般的に使用されています。これらは、私がメモリにコミットした3つのルールです。

1.引数なし=括弧が必要

const greet =()=> {
  return 'Hi!';
};

2. 1つの引数=オプションの括弧

const greet =(name)=> {
  return 'Hello、' + name + '!';
};
const greet = name => {
  return 'Hello、' + name + '!';
};

3. 2つ以上の引数=括弧が必要

const greet =(名前、会社)=> {
  'Hello、' + name + '!'を返します+ '' +会社+ '?';
};

引数の書式設定の詳細

デフォルトの引数

これは私のお気に入りの1つです。引数に名前を付けるときに関数に値を割り当てるだけで、関数の既定の引数を設定する非常に簡単な方法です。引数が渡されると、渡された引数が使用されます。それ以外の場合は、デフォルトに戻ります。

const greet =(name = 'Friend')=> {
  return 'Hello、' + name + '!';
};
greet(); //こんにちは、フレンド!
greet( 'Spencer'); //こんにちは、スペンサー!

デフォルト引数の詳細

暗黙の戻り

シンプルな機能を持ち、中括弧と戻り値を書くことにうんざりしていませんか?もう心配しないでください!これで、関数から暗黙的に戻ることができるようになりました。

const greet =(name)=> 'Hello、' + name + '!';
greet( 'Spencer'); //こんにちは、スペンサー!

Mmm保存されたキーストローク

それは良くなります!関数からオブジェクトを返したい場合は、そのようにすることができます(Reduxを使用しているときによく見られます)

const getInfo =()=>({
  名前:「スペンサー」、
  会社:「Handlebar Labs」、
  仕事:「教える」、
});
情報を取得(); // {名前: 'Spencer'、会社: 'Handlebar Labs'、仕事: 'Teaching'}

(オブジェクトを囲む括弧に注意してください)

最後に、オブジェクトと非常によく似た方法でコンポーネントを返すこともできます。

const Greeting =({name})=>(
  <表示>
    こんにちは、{name}!
  
);

繰り返しますが、括弧でコンポーネントをラップしているので、返品する必要はありません。

暗黙的な返品の詳細

オブジェクト

JavaScriptでオブジェクトを簡単に操作できる、非常に便利なツール(以前は外部ライブラリが必要でした)がいくつかあります。

破壊

破壊することで、オブジェクトを「破壊」または分解することができ、関心のある情報により簡単にアクセスできるようになります。オブジェクトのいくつかのデータにアクセスしたい場合、過去には次のことをしなければならなかったでしょう

const info = {
  名前:「スペンサー」、
  会社:「Handlebar Labs」、
  場所:{
    都市:「ナッシュビル」、
    状態:「テネシー」、
  }、
};
const name = info.name;
const city = info.location.city;
const state = info.location.state;

これで問題ありませんが、今では、気になる情報にアクセスする変数を定義する時間を少し節約できます。 React Nativeアプリケーションの周りに小道具を渡す場合、いくつかのネストされたデータを持つのが一般的であり、都市と州で見られるように、多くの同じコードを書くことになります。そのオブジェクトを分解して、データに簡単にアクセスできます。

const info = {
  名前:「スペンサー」、
  会社:「Handlebar Labs」、
  場所:{
    都市:「ナッシュビル」、
    状態:「テネシー」、
  }、
};
const {名前、場所} =情報;
const {都市、州} =場所。
//名前はSpencerです
//都市はナッシュビルです
//状態はテネシーです

次のように、小道具から情報にアクセスするときによく見られます:

const情報=({名前、場所})=>(
  <表示>
     {name}は{location.city}、{location.state}に住んでいます
  
);

オブジェクトの破壊の詳細

スプレッド

オブジェクトの拡散により、あるオブジェクトから別のオブジェクトに情報をコピーできます。 Reduxを使用するときによく見られるのは、純粋な機能が必要なためです。 Handlebar Labsで働いている複数の人がいて、全員が同じ基本情報を持っているとしましょう。時間を節約するために、その情報を「テンプレート」から個人の情報にコピーします。

const handlebarLabsInfo = {
  会社:「Handlebar Labs」、
  場所:{
    都市:「ナッシュビル」、
    状態:「テネシー」、
  }、
};
const spencerInfo = {
  ... handlebarLabsInfo、
  名前:「スペンサー」、
}
console.log(spencerInfo); // {名前: 'Spencer'、会社: 'Handlebar Labs'、場所:{市: 'Nashville'、州: 'Tennessee'}}

オブジェクトスプレッドの詳細

ひも

テンプレートリテラル

私のもう一つの個人的なお気に入り。以前、または古いコード/チュートリアルのいずれかで、「Hello、 '+ name +'!」 +「 '+会社+'?」これらの+記号は書くのが面倒な場合があり、個人的には常にスペースを忘れてしまうので、フォーマットが見落とされてしまいます。テンプレートリテラルを使用すると、動的コンテンツを含む文字列をより自然に記述できるため、簡単になります。

バックティック( ``)を使用して文字列を定義することにより、$ {}で変数を渡すことができます。見せてあげましょう...

const greet =(名前、会社)=> {
  // 'Hello、' + name + '!'を返します+ '' +会社+ '?';
  `こんにちは、$ {name}を返します! $ {company}はどうですか? `;
};

はるかに良い

テンプレートリテラルの詳細

モジュール

最初にReact Nativeにジャンプする人にとって、これは混乱を招く可能性があります。あなたはおそらく見ることに慣れています

exports.greet =(名前)=> 'こんにちは、' +名前+ '!';
//または
module.exports =(name)=> 'Hello、' + name + '!';

同様に、実際にそのコードを使用するには:

const形式= require( './形式)';
formalities.greet();
const greet = require( './ formalities');
greet();

キーワードのインポートとエクスポートを利用する別のモジュール構文にアクセスできるようになりました。最初のエクスポートブロックを変換しましょう。

export const greet =(name)=> 'Hello、' + name + '!';
//または
デフォルトの挨拶をエクスポートします。

次に、そのコードにアクセスするために使用できます

'./formalities'から{greet}をインポートします;
//または
「./formality」から挨拶をインポートします。

素晴らしいのは、エクスポートとエクスポートの両方を同時に使用できることです。 ES6モジュールでできることは他にもたくさんありますので、ぜひチェックしてみてください。 requireにはまだ場所がありますが、私は今ではほとんど使用しません

  • インポートの詳細
  • エクスポートの詳細

まとめ

ES6以降には多くのすばらしいものがありますが、その多くはここでは取り上げませんでした。これらは、私が使用中に見る最も一般的なものです。何か忘れましたか?お知らせ下さい!

React Native関連のコンテンツがもっと必要ですか?メーリングリストに登録するか、React Nativeコースの紹介をご覧ください(無料です)。