關於 React 小書：ComponentWillMount, ComponentDidMount, ComponentWillUnmount

簡介

React.js 提供一系列 lifecycle 的生命週期函數，可讓 component 的更新過程執行操作。

1. shouldComponentUpdate(nextProps, nextState)：可透過該方法決定 component 是否重新渲染。如果返回 false，component 就不會重新渲染。
2. componentWillReciveProps(nextProps)：component 從父組件接受新的 props 前調用。
3. componentWillUpdate()：component 開始重新渲染前調用。
4. componentDidUpdate()：component 重新渲染並且把更改變更到更真實的 DOM 以後調用。
   
   

Component mount 組件掛載

React.js 將 Component 渲染並構造 DOM 元素然後放到頁面的過程稱為組件掛載。

constructor()
render()
// 然後構造 DOM 元素插入頁面

Component mount 的過程再新增兩個方法上去

constructor()
componentWillMount() // 新增的
render()
// 然後構造 DOM 元素插入頁面
componentDidMount() // 新增的

Show or Hide 小書

import React, { Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  componentWillUnmount () {
    console.log('component will unmount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>React 小書</h1>
      </div>
    )
  }
}

class Index extends Component {
  constructor() {
    super()
    this.state = {
      isShowHeader: true
    }
  }

  handleShowOrHide () {
    this.setState({
      isShowHeader: !this.state.isShowHeader
    })
  }

  render() {
    return (
      <div>
        {this.state.isShowHeader ? <Header /> : null}
        <button onClick={this.handleShowOrHide.bind(this)}>
          Show or Hide
        </button>
      </div>
    )
  }
}

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

Component lifecycle 總結

React.js 將 Component 渲染並構造 DOM 元素然後插入頁面的過程稱為組件掛載 (Component mount)。

• componentWillMount：在組件掛載之前，在 Component 調用 render 方法之前調用。
• componentDidMount：組件掛載完成以後，也就是 DOM 元素插入頁面後調用。
• componentWillUnMount：組件對應的 DOM 元素從頁面中刪除之前調用。
  
  

參考資源

• 更新阶段的组件生命周期
• 挂载阶段的组件生命周期（一）