React（JSX）をES6で書くときに気をつけること #React

React初心者がJSXで開発するときに気づいたことを五月雨に…。
ドキュメントを読んだり、いろんな記事を読んだりするなかで、
自分なりに解釈したので、間違っていることも多数あるかと思いますが備忘録的に。

コンポーネントのライフサイクル

DOM要素が読み込まれる（更新する）前は、componentWillMount（componentWillUpdate）、
DOM要素が読み込まれた（更新された）後は、componentDidMount（componentDidUpdate）。

コンポーネントがマウントされたとき
componentWillMount → componentDidMount
コンポーネントのpropsが変更されたとき
componentWillReceiveProps
コンポーネントのstateが変更されたとき
componentWillUpdate → componentDidUpdate
コンポーネントがアンマウントされるとき
componentWillUnMount

参考: Component Specs and Lifecycle

propsとstate

数字、文字列、配列等結構なんでも代入できます。便利。
使い分けについて、様々な意見があるかとは思いますが、
stateは、変更されたら自動的にrenderが走り、DOMが再描画される。
propsは、変更されても自動的にrenderが走ることはない。という点で使い分けてみています。

props

propsは、コンポーネントがマウントされていないときに、コンポーネントに対して値を設定できる。
設定していたpropsを変更する場合、componentWillReceiveProps で、props変更後の処理を記述できる。

state

stateは、コンポーネントがマウントされているときに、
イベント等によって、コンポーネントの状態を変化させ、自動的にrenderを再読み込みする。

render

renderの中でif文

カッコが多いのでコピペ用

{(() => {
　　if(this.state.view === 'top') {
     return (
       <Top/>
     );
 }
})()}

イベントを定義するときは、bind(this)

onClickなどイベントを定義するときは、constructor内でbind(this)で定義する

constructor(props, context) {
 super(props, context);
 this._clickItemHdl = this._clickItemHdl.bind(this);
}

参考: Refactoring React Components to ES6 Classes

classはclassName

理解してはいるものの、つい忘れがち…。

<li>
  <a href="javascript: void(0);" onClick={this._clickItemHdl}>テスト1</a>
</li>

styleはキャメルケースで{{}}2つずつ

とはいえ、Material-uiのインラインスタイル以外は、classNameでクラスを定義して、
CSSで記述する方が無難かと思います。

<li style={{fontSize: '20px',
            color: 'pink',
            marginBottom: '20px'
}}>
  <a href="javascript: void(0);" onClick={this._clickItemHdl} >テスト2</a>
</li>

renderで返すことができるのはDOM1つだけ

renderに定義できるテンプレートは、DOM要素1つだけです。

たとえば、コンポーネントが複数並列に並ぶような、次のようなコードは動きません。

render() {
    return (
      <Header />
      <Main />
      <Footer />
    );
  }

回避するためには、これらを何かの要素（div）等で囲むことが必要です。

render() {
    return (
　　　　　　　　　　　　<div>
        <Header />
        <Main />
        <Footer />
     </div>
    );
  }

閉じタグを忘れずに

img要素で忘れやすいです。

<img src="hoge/hoge.jpg" />

Reactで開発してよかったなと思ったこと

1つのJSXにDOMテンプレートと、機能を両方まとめてかける

HTMLとjQueryを使用して実装する場合、HTMLにDOM要素を記述し、JavaScriptで機能を定義する必要がありました。
Reactの場合、読み込まれるDOMと、それに付与される機能を1つのJSXにまとめられるため、コンポーネントのカプセル化できました。