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

クラスコンポーネントは、コンポーネントのライフサイクル中の特定の時点で実行される関数を定義できます。 それらを使用すると、コンポーネントをより細かく制御できます。 Reactで利用可能なライフサイクル機能の概要は次のとおりです。

componentWillMount

componentWillMount コンポーネントが初めてレンダリングされる前に呼び出されます。 これを使用して呼び出すことができます setState 最初のレンダリングの前。

class Scorecard extends Component {
  componentWillMount() {
    this.setState({score: 0});
  }

  render() {
    const {playerName} = this.props;
    // `this.state` defaults to null, but since it'll be set in
    // `componentWillMount`, it can safely be destructured.
    const {score} = this.state;
    const message = `Current Score: ${score}`;
    return (
      <div>
        <h1>{playerName}</h1>
        <div>{message}</div>
      </div>
    );
  }
}

componentDidMount

componentDidMount コンポーネントが初めてレンダリングされた後に呼び出されます。 これは、コンポーネントが表示されるとすぐに非同期操作を開始するために使用できます。

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentDidMount() {
    // You'd probably want to send an AJAX call or something,
    // but let's say they get 1000 points after the first second.
    setTimeout(() => this.setState({score: 1000}), 1000);
  }
}

componentWillReceiveProps

componentWillReceiveProps コンポーネントが新しい小道具を受け取ったとき、ただしレンダリングする前に呼び出されます。 あなたは呼び出すことができます setState 保留中のレンダリングがすでに1つあるため、ここで別の再レンダリングを発生させることはありません。

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentWillReceiveProps(nextProps) {
    // `nextProps` is the new props, while `this.props` are the old ones.
    const {playerName} = this.props;
    // It is entirely possible that the new `playerName` is the same as the old one.
    if (nextProps.playerName !== playerName) {
      // Changing your name resets the score to zero.
      this.setState({score: 0});
    }
  }
}

shouldComponentUpdate

shouldComponentUpdate 小道具または状態が変更された後（および後に呼び出されます componentWillReceiveProps）、ただしレンダリングする前。 これは、ブール値を返すことが期待されるという点で、ライフサイクル関数の中でユニークです。 falseの場合、 render 呼び出されません。 これは、不要なレンダリングをスキップしてCPUを節約するのに非常に役立ちます。

class Scorecard extends Component {
  // Other functions omitted for brevity.
  shouldComponentUpdate(nextProps, nextState) {
    // Same as `componentWillReceiveProps`, `nextProps` is the
    // new props and `this.props` is the old.
    const {playerName} = this.props;
    // Ditto for `nextState` and `this.state`.
    const {score} = this.state;
    // Only `playerName` and `score` affect the display.
    // If something else changes, re-rendering would be a waste.
    return !(nextProps.playerName === playerName && nextState.score === score);
  }
}

componentWillUpdate

componentWillUpdate コンポーネントがレンダリングされる直前と直後に呼び出されます shouldComponentUpdate. 呼べない setState.

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentWillUpdate(nextProps, nextState) {
    const {playerName} = this.props;
    // If `playerName` changes, log a message.
    if (nextProps.playerName !== playerName) {
      // Note that even though `componentWillReceiveProps` called `setState`, `this.state` is still the original value.
      const {score} = this.state;
      console.log(`${playerName} is now ${nextProps.playerName}.  His score of ${score} is forfeit.`);
    }
  }
}

componentDidUpdate

componentDidUpdate 後に呼び出されます render 終了しました。 他の更新機能と同様に、小道具と状態の新旧両方のバージョンがありますが、代わりに以前のバージョンがパラメーターとして使用されます。

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentDidUpdate(prevProps, prevState) {
    const {playerName} = this.props;
    // You guessed it, `prevProps` are the props as they used to be and `this.props` are what they are now.
    // Ditto for `prevState` and `this.state`.
    if (prevProps.playerName !== playerName) {
      const {score} = prevState;
      console.log(`${playerName} used to be ${prevProps.playerName}.  His former score was ${score}.`);
    }
  }
}

componentWillUnmount

最後に、 componentWillUnmount コンポーネントが削除される前に呼び出されます。 さよならを言うためにそれを使用してください。

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentWillUnmount() {
    console.log('Sayonara!');
  }
}