關於 React 小書:ComponentWillMount, ComponentDidMount, ComponentWillUnmount


Posted by YongChenSu on 2020-12-09

簡介

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 元素從頁面中刪除之前調用。

參考資源


#程式導師實驗計畫第四期 #前端 #React #react 小書 #componentWillMount #componentDidMount #componentWillUnmount







Related Posts

[JavaScript ] ES7, ES8, ES10 有趣的 new features

[JavaScript ] ES7, ES8, ES10 有趣的 new features

裝 nuxt 遇到的問題

裝 nuxt 遇到的問題

Web開發學習筆記04—條件運算式(Conditional Statements)

Web開發學習筆記04—條件運算式(Conditional Statements)


Comments