React中生命周期的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)React中生命周期的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

React的生命周期

兩張圖帶你理解 React的生命周期

React的生命周期（舊）

class Life extends React.Component{
      // 構(gòu)造器
      constructor(props){
        console.log('Life構(gòu)造器---constructor');
        super(props)
        this.state={num:0}
      }
      // 計(jì)算+1功能
      add=()=>{
        const {num} = this.state
        this.setState({num:num+1})
      }
      // 刪除組件
      death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      force=()=>{
        this.forceUpdate()
      }
      // 將要掛載
      componentWillMount(){
        console.log('Life將要掛載---componentWillMount');
      }
      // 已經(jīng)掛載
      componentDidMount(){
        console.log('Life已經(jīng)掛載---componentDidMount');
      }
      // 刪除觸發(fā)
      componentWillUnmount(){
        console.log('Life刪除觸發(fā)---componentWillUnmount');
      }
      // 是否應(yīng)該改變數(shù)據(jù)
      shouldComponentUpdate(){
        console.log('Life是否改變數(shù)據(jù)---shouldComponentUpdate');
        return true
      }
      // 將要改變數(shù)據(jù)
      componentWillUpdate(){
        console.log('Life將要改變數(shù)據(jù)---componentWillUpdate');
      }
      // 改變數(shù)據(jù)
      componentDidUpdate(){
        console.log('Life改變數(shù)據(jù)---componentDidUpdate');
      }
      render(){
        console.log('Life---render');
        const {num} = this.state
        return(
          <div>
          <h2>計(jì)數(shù)器：{num}</h2> 
          <button onClick={this.add}>點(diǎn)我+1</button> 
          <button onClick={this.death}>刪除</button> 
          <button onClick={this.force}>不更改任何狀態(tài)的數(shù)據(jù)，強(qiáng)制更新</button> 
          </div>
        )
      }
    }
    // 渲染頁面
    ReactDOM.render(<Life />, document.getElementById('text'))

掛載步驟

更新步驟

刪除

總結(jié)： 初始化階段: 由ReactDOM.render()觸發(fā)—初次渲染
1. constructor() ---構(gòu)造器
2. componentWillMount() ---將要掛載
3. render() ---render
4. componentDidMount() ---掛載時(shí)更新階段: 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
1. shouldComponentUpdate() ---是否要進(jìn)行更改數(shù)據(jù)
2. componentWillUpdate() ---將要更新數(shù)據(jù)
3. render()
4. componentDidUpdate() ---更新數(shù)據(jù)卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
componentWillUnmount() ---卸載

React的生命周期（新）

生命周期的三個(gè)階段（新）

初始化階段: 由ReactDOM.render()觸發(fā)—初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()更新階段: 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
1. componentWillUnmount()

重要的勾子

1.render：初始化渲染或更新渲染調(diào)用
2.componentDidMount：開啟監(jiān)聽, 發(fā)送ajax請(qǐng)求
3.componentWillUnmount：做一些收尾工作, 如: 清理定時(shí)器

即將廢棄的勾子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate

現(xiàn)在使用會(huì)出現(xiàn)警告，下一個(gè)大版本需要加上UNSAFE_前綴才能使用，以后可能會(huì)被徹底廢棄，不建議使用。

關(guān)于“React中生命周期的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。