Reactのコンポーネントライフサイクル機能
クラスコンポーネントは、コンポーネントのライフサイクル中の特定の時点で実行される関数を定義できます。 それらを使用すると、コンポーネントをより細かく制御できます。 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> ); } }
setState
を呼び出すと、通常は再レンダリングがトリガーされますが、componentWillMount
で呼び出すと、(そもそもレンダリングされていないため)トリガーされません。
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); } }
componentDidMount
はサーバーレンダリングでは呼び出されません。
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!'); } }