[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)
  }

}