React公式チュートリアルで入門メモ
super()
サブクラスのコンストラクタを定義する際は常に super を呼ぶ必要があります。constructor を持つ React のクラスコンポーネントでは、すべてコンストラクタを super(props) の呼び出しから始めるべきです。
super - クラス - JavaScript Primer
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}
イミュータビリティ(immutability: 不変性)はなぜ必要?
イミュータビリティ: 不変性
ミューテート: 書き換え(内部データの書き換え)
チュートリアルではsquare配列のコピーを作成して、コピーを変更した。
これは何でなのか?イミュータビリティを知ると分かりそう。
一般的に変化するデータに対するアプローチは2種類ある。
- データの値を直接いじってデータを**ミューテート(mutate: 書き換え)**する。
- 望む変更を加えた新しいデータのコピーで古いデータを置き換える。
ミューテートを伴うデータの変化
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}
ミューテートを伴わないデータの変化
var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};
最終的な結果は同じだけど、直接データのミューテート(内部データの書き換え)をしないことで、いくつかの利点がある。
直接データのミューテートを(内部データの書き換え)をしないことの利点3点
1. 複雑な機能が簡単に実装できる
イミュータビリティにより、複雑な機能がとても簡単になる。
2. 変更の検出
ミュータブルなオブジェクトは中身が直接書き換えられるため、変更があったかどうかの検出が困難。
ミュータブルなオブジェクト変更の検出のためには、以前のコピーと比較してオブジェクトツリーの全体を操作する必要がある。
イミュータブルなオブジェクトでの変更の検知はとても簡単。
参照しているイミュータブルなオブジェクトが前と別のものであれば、変更があったということ。
3. Reactの再レンダータイミングの決定
イミュータビリティの主な利点は、Reactでpure componentを構築しやすくなるということ。(?)
イミュータブルなデータは変更があったかどうか簡単に分かるため、
コンポーネントをいつ再レンダーすべきなのか決定しやすくなる。
shouldComponentUpdate()およびpure componentをどのように作成するかについては、パフォーマンス最適化にて。
関数コンポーネント
Reactにおける関数コンポーネントとは、renderメソッドだけを有して自身のstateを持たないコンポネントを、よりシンプルに書く方法。
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button
className="square"
oonClick={() => this.props.onClick()} >
{this.state.value}
</button>
);
}
}
関数コンポーネント化
function Square(props) {
return (
<button
className="square"
onClick={() => props.onClick}>
{props.value}
</button>
);
}
this.props
はprops
へ。
onClick={() => this.props.onClick()}
をonClick={props.onClick}
に書き換えている。