首頁 > web前端 > js教程 > 主體

React組件生命週期實例分析

小云云
發布: 2018-01-29 11:31:26
原創
1950 人瀏覽過

本文主要跟大家分享React元件生命週期,React元件的生命週期有一堆相關的函數,其實就是一推的鉤子函數。在React組件所建立的各個階段觸發特定的鉤子函數。希望能幫助大家。

可以先大概看一下下面這張圖:
React組件生命週期實例分析

#constructor

#建構函數,在建立元件的時候呼叫一次。

constructor(props, context)
登入後複製

componentWillMount

#在元件掛載之前呼叫一次。如果在這個函數裡面呼叫setState,render()知道state會發生變化,並且只渲染一次。

void componentWillMount()
登入後複製

render

render是一個React元件所不可或缺的核心函數。不要在render裡面修改state。也不要去讀寫DOM或與伺服器交互,保持render()方法的純淨。

ReactElement render()
登入後複製

componentDidMount

#在元件掛載之後呼叫一次。這時候,子元件也都掛載好了,可以在這裡使用refs。

void componentDidMount()
登入後複製

shouldComponentUpdate

#這個方法在初始化render時不會執行,當props或state發生變化時執行。函數預設回傳true,需要重新render。返回false,就不會重新render了。 componentWillUpdate和componentDidUpdate方法也不會被呼叫。在比較複雜的應用程式裡,有一些資料的改變並不影響介面展示,可以在這裡做判斷,優化渲染效率。

boolean shouldComponentUpdate(
    object nextProps, object nextState
)
登入後複製

componentWillUpdate

#shouldComponentUpdate傳回true之後,componentWillUpdate會被呼叫。要特別注意的是,在這個函數裡面,不要用this.setState來修改狀態。不然這個函數會無限循環執行。這個函數呼叫之後,就會把nextProps和nextState分別設定在this.props和this.state。緊接著這個函數,就會呼叫render()來更新介面了。

void componentWillUpdate(
  object nextProps, object nextState
)
登入後複製

componentDidUpdate

#除了首次render之後呼叫componentDidMount,其它render結束之後都是呼叫componentDidUpdate。

void componentDidUpdate()
登入後複製

componentWillReceiveProps

#props是父元件傳遞給子元件的。父元件發生render的時候子元件就會呼叫componentWillReceiveProps(不管props有沒有更新,也不管父子元件之間有沒有資料交換)。在這個回呼函數裡面,你可以根據屬性的變化,透過呼叫this.setState()來更新你的元件狀態,舊的屬性還是可以透過this.props來取得,這裡呼叫更新狀態是安全的,並不會觸發額外的render調用。

void componentWillReceiveProps(nextProps) {
    this.setState({...});
}
登入後複製

componentWillUnmount

#當元件要被從介面移除的時候,就會呼叫componentWillUnmount(),在這個函數中,可以做一些組件相關的清理工作,例如取消計時器、網路請求等。

void componentWillUnmount()
登入後複製

下面是React元件生命週期的測試範例

var React = require('react');
var ReactDOM = require('react-dom');

class Parent extends React.Component {
  constructor(){
    super()
    console.log("%cparent -- constructor","color:green");
    this.state = {
      name : 'Lucy'
    }
  }

  componentWillMount(){
    console.log("%cparent -- componentWillMount","color:green");
  }

  componentDidMount(){
    console.log("%cparent -- componentDidMount","color:green");
  }

  componentWillReceiveProps(){
    console.log("%cparent -- componentWillReceiveProps","color:green");
  }

  shouldComponentUpdate(){
    console.log("%cparent -- shouldComponentUpdate","color:green");
    return true;
  }

  componentWillUpdate(){
    console.log("%cparent -- componentWillUpdate","color:green");
  }

  componentDidUpdate(){
    console.log("%cparent -- componentDidUpdate","color:green");
  }

  componentWillUnmount(){
    console.log("%cparent -- componentWillUnmount","color:green");
  }

  changeName(){
    this.setState({name : 'Jone'})
  }

  unmountComponent(){
    ReactDOM.unmountComponentAtNode(document.getElementById("app"));
  }

  render(){
    console.log("%cparent -- render","color:green");
    return(
      <p style={{border:&#39;1px solid #000&#39;,color:&#39;green&#39;}}>
        <h2>Parent:</h2>
        <h3>hello {this.state.name}</h3>
        <button onClick={this.changeName.bind(this)}>state改变</button>
        <button onClick={this.unmountComponent.bind(this)}>卸载组件</button>
        <Child props1="haha"></Child>
      </p>
    )
  }
}


class Child extends React.Component {
  constructor(){
    super()
    console.log("  %cchild -- constructor","color:blue");
    this.state = {
    }
  }

  componentWillMount(){
    console.log("  %cchild -- componentWillMount","color:blue");
  }

  componentDidMount(){
    console.log("  %cchild -- componentDidMount","color:blue");
  }

  componentWillReceiveProps(){
    console.log("  %cchild -- componentWillReceiveProps","color:blue");
  }

  shouldComponentUpdate(){
    console.log("  %cchild -- shouldComponentUpdate","color:blue");
    return true;
  }

  componentWillUpdate(){
    console.log("  %cchild -- componentWillUpdate","color:blue");
  }

  componentDidUpdate(){
    console.log("  %cchild -- componentDidUpdate","color:blue");
  }

  componentWillUnmount(){
    console.log("  %cchild -- componentWillUnmount","color:blue");
  }

  changeName(){
    this.setState({name : 'Jone'})
  }

  render(){
    console.log("  %cchild -- render","color:blue");
    return(
      <p style={{border:&#39;1px solid #000&#39;,margin:&#39;10px&#39;,color:&#39;blue&#39;}}>
        <h2>Child:</h2>
      </p>
    )
  }
}

ReactDOM.render(
  <Parent></Parent>,
  document.getElementById('app')
);
登入後複製

測試範例截圖如下:

React組件生命週期實例分析

改變父元件的state:
React組件生命週期實例分析

#卸載元件後:
React組件生命週期實例分析

#相關推薦:

微信小程式生命週期詳解

React元件的生命週期函數是什麼

React Native 中元件生命週期的簡單介紹

以上是React組件生命週期實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!