React学習5（lifecycle hooks）

Lifecycle Hooks

ReactのLifecycle hooksでよく用いられるものはだいたい次の通り。

• Mount
  • constructor
  • render
  • componentDidMount
• Update
  • render
  • componentDidUpdate
• Unmount
  • componentDidUnmount

Mounting phase

constructor, render, componentDidMountの順番で呼ばれる。 render内で読み込まれる子孫コンポーネントは、親から子へと下るように呼ばれる。

Lifecycle.jsx

import React, { Component } from 'react'

class Lifecycle extends Component {
  state = {
    something: '',
  }

  constructor(props) {
    super(props)
    console.log('Lifecycle - Constructor')
    // `this.setState()` cannot be used here since it can be used after rendering
    this.state = this.props.something
  }

  render() {
    // Every children components are rendered recursively
    console.log('Lifecycle - Rendered')
    // return <>Something</>
  }

  componentDidMount() {
    console.log('Lifecycle - Mounted')
    // Make ajax call and set states
    this.setState({ something: 'something' })
  }
}

export default Lifecycle

Updating phase

あるコンポーネントのstateやpropsに変更が生じたときに呼ばれるフェーズ。 つまり再度renderがされ、Virtual DOMで変更された部分だけがアップデートされる。

componentDidMount内で直前のstateやpropsの変化を検知して、ajaxリクエストなどを投げる などというような使い方ができる。

Lifecycle.jsx

import React, { Component } from 'react'

class Lifecycle extends Component {
  state = {
    something: {
      value: 0,
    },
  }

  render() {
    console.log('Lifecycle - Rendered')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('prevProps', prevProps)
    console.log('prevState', prevState)
    if (prevProps.something.value !== this.props.something.value) {
      // Make ajax call and get new data from the server
    }
  }
}

export default Lifecycle

Unmounting phase

タイマー処理やイベントリスナーの解除などを行うときによく使用されるフェーズ。

import React, { Component } from 'react'

class Lifecycle extends Component {
  state = {
    something: {
      value: 0,
    },
  }

  render() {
    console.log('Lifecycle - Rendered')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('prevProps', prevProps)
    console.log('prevState', prevState)
    if (prevProps.something.value !== this.props.something.value) {
      // Make ajax call and get new data from the server
    }
  }

  componentWillUnmount() {
    console.log('Lifecycle - Unmount')
    // Clean up times or listeners
  }
}

export default Lifecycle