Reactの公式チュートリアルで学んだことメモ②（ステートとライフサイクル）

こちらの記事のメモです。

• https://reactjs.org/docs/state-and-lifecycle.html

現在の時刻を表示するコードは、React.Componentの継承クラスを使って以下のようにカプセル化できる。ポイントは以下

• constructorでpropsを引数として受け取る。
• render()でJSXを返す
• 現在の時刻をクラス内で生成する場合はthis.stateを定義する。this.stateはローカルなステートと呼ばれる。
• マウント時（最初にClockクラスがレンダリングされたとき）とアンマウント時（Clockが取り除かれるとき）にコードを実行したい場合はcomponentDidMount()とcomponentWillUnmount()を使う。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

CodePen

ステートの値を変更する場合はsetStage()メソッドを使う。

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

パフォーマンス上の理由で複数のsetState()がまとめて処理される場合がある。this.props とthis.stateの値が非同期に変更される可能性があるため（？ここはよくわからなかった）、setState()内で直接両者を参照するのではなく引数で渡すべし

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

Reactコンポーネントが通常のOOPのクラスと違う点

• 呼び出し側（JSX側）でコンポーネントがクラスか関数か知ることもできない
• 外部からプロパティを操作することができない