Reactに関するメモ | 業務プログラムの実践学習

１．ReactでComponentのRenderが行われるタイミング

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

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

２．JSX

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

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

３．コンポーネントの切替

・
・
render: function() {
    var whichComponent;
    if (this.props.mode == 'A') {
        whichComponent = <ComponentA />;
    } else if (this.props.mode == 'B') {
        whichComponent = <ComponentB />;
    }
    return (
      <div>
        {whichComponent}
      </div>
    );
・
・

・

render: function() {

var whichComponent;

if (this.props.mode == 'A') {

whichComponent = <ComponentA />;

} else if (this.props.mode == 'B') {

whichComponent = <ComponentB />;

}

return (

<div>

{whichComponent}

</div>

);

・

４．アロー関数

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

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

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

通常の無名関数との違い

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

５．Stateless Functional Componentsの記述方法

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

（ポイント）

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

（JSXを複数行で書く場合）

const HelloMessage = (params) => (
  <div>
    Hello {params.text}
  </div>
);
※引数paramsでpropsを受け取る

const HelloMessage = (params) => (

<div>

Hello {params.text}

</div>

);

※引数paramsでpropsを受け取る

（変数などを指定する場合）

const HelloMessage = (params) => {
  let text = params.text;
  return (
    <div>
      Hello {text}
    </div>
  );
};
※引数paramsでpropsを受け取る

const HelloMessage = (params) => {

let text = params.text;

return (

<div>

Hello {text}

</div>

);

};

※引数paramsでpropsを受け取る

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

定義
 <Home title="書籍１" name="山田 太郎" />

Stateless関数（引数{title, name}でpropsを受け取る）
const Home = ({title, name}) => (
  <div>
    <h1> {title} </h1>
    <h1> {name}  </h1>
  </div>
)

定義

Stateless関数（引数{title, name}でpropsを受け取る）

const Home = ({title, name}) => (

<div>

<h1> {title} </h1>

</div>

)

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

定義
 <Home title="書籍１" name="山田 太郎" />

Stateless関数（引数paramsでpropsを受け取る）
const Home = (params) => (
  <div>
    <h1> {params.title} </h1>
    <h1> {params.name}  </h1>
  </div>
)

定義

Stateless関数（引数paramsでpropsを受け取る）

const Home = (params) => (

<div>

<h1> {params.title} </h1>

<h1> {params.name} </h1>

</div>

)

{…param} の意味

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

var params = { x: 1, y: 1, z:1 };
<Component {...params} title="aaaa"/>

class Component extends Component{
  console.log(this.props.x);
  console.log(this.props.y);
  console.log(this.props.z);
  console.log(this.props.title);
}

var params = { x: 1, y: 1, z:1 };

class Component extends Component{

console.log(this.props.x);

console.log(this.props.y);

console.log(this.props.z);

console.log(this.props.title);

}

インラインのstyle

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

（例1）
<button className="btn btn-default" style={{color:"gray"}}/>

（例2）
let buttonStyle = { color: 'red' };
<input type="button" style={buttonStyle} value="Click Me" />

（例1）

（例2）

let buttonStyle = { color: 'red' };

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

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