normcore.dev

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種類ある。

  1. データの値を直接いじってデータを**ミューテート(mutate: 書き換え)**する。
  2. 望む変更を加えた新しいデータのコピーで古いデータを置き換える。

ミューテートを伴うデータの変化

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}に書き換えている。

← Back to home