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にまとめられるため、コンポーネントのカプセル化できました。