WEB WEBフロントエンド開発

Reactに関するメモ

投稿日:2017年11月18日 更新日:

 

 

1.ReactでComponentのRenderが行われるタイミング

ReactでComponentのRenderが行われるのは以下2つのタイミングのみ

  • stateを更新する(stateは自分の持ち物なので、外部から更新されることはない)
  • 外部からpropsを受け取る

 

2.JSX

Reactの場合、テンプレートの部分もすべてJavaScriptファイル内に書く

  • renderで返すタグは必ず1つのタグの括りで返す。
  • HTML5のタグはすべて使える
  • 必ず一つのルートElement(タグ)から始める必要がある
  • カスタムコンポーネントをタグ名として使える
  • JSX独自の属性がある(key、ref、dangeroslySetInnerHTML)
  • 使えない属性もある
    HTMLの class 属性は、JSXでは className 属性に置き換える
    HTMLの for 属性は、JSXでは htmlFor 属性に置き換える

 

 

3.コンポーネントの切替

 

 

4.アロー関数

    • ES2015(ES6)の新構文の一つ
    • 無名関数の省略記法。
    • 無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要。
    • =>(矢)を使って関数リテラルを記述
    • (引数,...)=>{...関数の本体...}

基本構文

//従来の関数式
var fn = function (x) {console.log(x);};

//上記をアロー関数に置き換えたもの
var fn = (x) => {console.log(x);};

//関数の引数が複数ある場合はカンマで区切ります
var fn = (x, y, z) => {console.log(x, y, z);};

//関数の引数が1つのみならば引数部分の丸括弧を省略できます
var fn = x => {console.log(x);};

//引数が無い場合は丸括弧は省略できません
var fn = () => {console.log('hoge');};

 

通常の無名関数との違い

  • thisの参照が関数定義時に決まる(thisの扱いに注意)
  • argumentsオブジェクトを持たない
  • コンストラクタとして振る舞うことはできない

 

5.Stateless Functional Componentsの記述方法

  • Stateless functional components(SFC: 状態を持たない関数コンポーネント)
  • コンポーネントなど機能にはほとんど関係なく、状態を持たない(ステートレスな)シンプルなコンポーネント
  • React v0.14で新たに追加されたシンプルに書けるコンポーネント
  • 関数で書くコンポーネントで、引数でpropsを受け取り、戻り値としてレンダリングしたい要素(DOM)を返すだけのもの
  • 簡単に言えば「DOMを関数の戻り値に書く」だけ

(ポイント)

  • 関数名がコンポーネント名になる
  • 関数名の頭文字を大文字にする
  • return値にJSX(DOM)を書く
  • 関数の引数でpropsを受け取る

 

(JSXを複数行で書く場合)

※引数paramsでpropsを受け取る

 

(変数などを指定する場合)

 

(関数の引数の受け方1)

 

(関数の引数の受け方2)

 

 

 {…param} の意味

コンポーネントの属性をオブジェクトとして渡す事ができる。

 

 

インラインのstyle

  • Reactでは、インラインのstyleは文字列として指定されません。
  • 代わりオブジェクトとして指定され、キーはstyle名がキャメルケース形式にされたもので、 値はstyleの値になり、通常は文字列になります。

 

参考にさせて頂いたページ

覚えておきたいReactの実装でよく使う基本的な構文(書き方)

 

 

 

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

JavascriptのEventオブジェクトについて

1.function(e) {} の引数eの意味合い 引数eはイベントオブジェクトです。イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる。 JavaScriptの関 ...

ES6のクラス定義について

  概要 JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。 プロトタイプを使ってクラスと同等なことを実現するというこ ...

JavaScriptのコンストラクタとプロトタイプについて

概要 Javascriptにはクラスという概念はない コンストラクタ定義+newによってインスタンスを生成する。 ES6以前ではclass構文が実装がされていなかったので、prototypeという機能 ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...