[React Js] React 的組件 (Component) 的生命週期

通常在 React 的組件 (Component) 中,有三個重要的操作:

  • 建立組件
  • 更新組件
  • 刪除組件

而這些操作各自的流程,就是 React 的 生命週期,下面會根據不同操作來個別紀錄:


建立組件:

constructor() :

  • 執行建立組件的 建構式(constructor)

componentWillMount() :

  • 正要把 React Element 放到畫面上,組件 在渲染 之前

render() :

  • 將 React Element 渲染到畫面上,組件 正在 被 渲染

componentDidMount() :

  • React Element 以渲染在畫面上,組件 在渲染 完成之後

代碼如下:

class Mycomponent extends React.Component{

 constructor(){
  // 執行建構式...
 }

 componentWillMount(){
  // 組件渲染之前...
 }

 render(){
  // 渲染 組件
 }

 componentDidMount(){
  // 組件渲染完成之後...
 }

}

更新組件:

使用 setState() 的方法時,進行觸發

componentWillUpdate()

  • 組件(Component) 正要被 更新之前

render()

  • 將 React Element 渲染到畫面上,組件 正在 被 渲染

componentDidUpdate()

  • 組件更新完成,渲染完成之後

代碼如下:

class Mycomponent extends React.Component{


 componentWillUpdate(){
  // 組件進行更新,渲染之前...
 }

 render(){
  // 組件進行更新,渲染 組件
 }

 componentDidUpdate(){
  // 組件進行更新,組件渲染完成之後...
 }

}

刪除組件

componentWillUnMount():

  • 組件即將被 刪除之前
class Mycomponent extends React.Component{

 componentWillUnMount(){
  // 組件即將被 刪除之前 ...
 }

}

上述提到的 生命週期 中的方法,皆是 React Element 中,提供的 物件 , 我們可以很輕鬆的來覆寫他

範例編碼 (簡易計時器) :

window.addEventListener('load',()=>{
  ReactDOM.render(
    React.createElement(MyComponent),
    document.body
  )
})

class MyComponent extends React.Component{

  constructor(props){
    super(props);
    this.state = {'time':1};
  }

  componentWillMount(){
    window.setInterval(()=>{
      this.setState((currentState,currentProps)=>{
        return {'content': currentState.time += 1}
      })
    },1000)
  }

  render(){
    return React.createElement('h1' ,null,this.state.time)
  }

}

Facebook 功能: