【React】: React的生命周期

概述

 同時有：

1.1 創建時 的生命周期執行順序

 撰寫以下代碼，從而驗證constructor,render,componentDidMount的順序：

class App5 extends React.Component
{
  constructor(props)
  {
    super(props)

    console.warn("生命周期鉤子函式：constructor")
  }

  componentDidMount()
  {
    console.warn("生命周期鉤子函式：componentDidMount")
  }

  render()
{
  console.warn("生命周期鉤子函式：render")
  return (
<div>
<h3></h3>
<h1>統計豆豆被打的次數：</h1>
<button id='btn'>打豆豆</button>
</div>

  )
}
}

ReactDOM.render(<App5/>,document.getElementById('root9'))

在開發者工具中發現執行順序為：

當然我們對這三個狀態還有以下總結：

備注：不能在render里呼叫setstate的原因是：在render里既能夠更新狀態，也會更新ui，具體可以參考前面的生命周期圖，render里呼叫setstate，而setstate也會繼續呼叫render，這樣就會導致遞回呼叫，從而導致error，

一定要在render里進行呼叫setstate，我們可以采用箭頭函式，同時可以將this從render當中抽離出來，這樣相當于在生命周期的“更新時”再繼續更新Ui,代碼如下：

class AppThree extends React.Component
{

  state={
    count:0
  }

  //組件當中的state，可以通過this.state來進行呼叫
  //使用setState，來修改資料，直接使用this.state.count+1,來修改是行不通的
  //備注：如果直接使用事件抽離的方法，把render函式當中的邏輯抽離出來，但是在當前class的其他
  //的函式當中，是無法呼叫到this的， 因此在其他函式中無法呼叫this.setState是肯定的，

  render(){
    return (
      <div>
        <h1>計數器</h1>

        <button onClick={() => {
          this.setState({
            count:this.state.count+1
          })

        } }>
        +1</button>
        <div>這是一個有狀態組件當中的資料count，{this.state.count}</div>
      </div>
    )
  }
 
}

這樣就可以保證這里的this不是指的render里的this，而是render外部的this，當然還可以將這個this.setstate的邏輯進行抽離出來：

class AppSix extends React.Component
{


  state={
    count:0
  }

  onIncrement = () => 
  {
    this.setState({
      count:this.state.count+1
    })
  }

  render(){
    return (
      <div>
        <h1>計數器</h1>
        {/*在react當中，onclick方法都需要用花括號括起來，再來表示其中的方法，這里的箭頭函式可以直接實作呼叫，只是沒有對這個箭頭函式
        進行命名，也就是令 hello = () => this.onIncrement(),是否命名都一樣的
        */}
        <button onClick={this.onIncrement}>+1</button>
    )
  }
 
}


ReactDOM.render(<AppSix />, document.getElementById('event_six'))

對于componentDidMount,我們可以在里面進行網路請求和dom操作，因為它是等渲染完成后，才開始進行這個生命行程，

1.2 更新時的生命周期

在更新時，也就是值的初始的渲染都完成了，在渲染完成后，用戶如果點擊了界面，網頁如何使用鉤子函式對不同狀態下的網頁進行檢測和更新，有三種情況都會導致組件進行重新渲染，分別是呼叫：

1. New props（新引數被呼叫）
2. setState() 
3. forceUpdate() : 也就是強制更新

class App6 extends React.Component{

constructor(props)
{
  super(props)

  this.state={
    count:0
  }
}

handleClick= () =>
{
  this.setState({
    count:this.state.count+1
  })
}


render()
{
  return (
    <div>
      <h3>5.2 更新時的生命周期</h3>
      <Counter2 count={this.state.count }/>
      <button onClick={this.handleClick}>打豆豆</button>
    </div>

  )

}

}

class Counter2 extends React.Component
{
  render()
  {
    return <h3>統計豆豆被打的次數：{this.props.count}</h3>
  }


}


ReactDOM.render(<App6/>,document.getElementById('root10'))

 這里用到了子組件counter2，并且子組件接受到了引數props，因此在接受到了引數props后，確實會對ui進行更新，也就是進行重新渲染，我們點擊一次按鈕，子組件都會接受到一次引數，這樣打豆豆的次數就會發生變化，

我們可以看到ComponentDidUpdate（）是在render函式之后，才開始執行的，因此有以下的的圖片：

1.3 卸載時的生命周期

 我們在打完豆豆超過3次后，子組件消失，因此可以使用compomentWillUnmount函式，執行清理作業，代碼如下：

class App6 extends React.Component{

constructor(props)
{
  super(props)

  this.state={
    count:0
  }
}

handleClick= () =>
{
  this.setState({
    count:this.state.count+1
  })
}


render()
{
  return (
    <div>
      <h3>5.2 更新時的生命周期</h3>
        {
          this.state.count > 3 ? (
            <p>豆豆被打死了</p>

          ) :(
            <Counter2 count={this.state.count }/>
          )

        }

     
      <button onClick={this.handleClick}>打豆豆</button>
    </div>

  )

}

}

class Counter2 extends React.Component
{
  render()
  {
    console.warn("子組件--更新時--render函式被渲染")
    return <h3>統計豆豆被打的次數：{this.props.count}</h3>
  }

  componentDidUpdate()
  {
    console.warn("子組件--更新時--componentDidUpdate函式被渲染")
    
  }

  componentWillUnmount()
  {
    //我們在父組件當中規定了這個子組件在超過3次之后銷毀，因此銷毀后應該呼叫這個函式
    console.warn("子組件--生命周期鉤子函式： componentWillUnmount")
  }


}


ReactDOM.render(<App6/>,document.getElementById('root10'))

 我們在發現子組件消失后，確實compomentWillUnmount函式被執行了，warning被列印出，

標籤：其他

上一篇：前端vue uni-app多圖片上傳組件，支持單個檔案，多個檔案上傳 步驟條step使用

下一篇：返回列表