React基礎性總結(一)：組件的生命週期及執行順序

時間 2020-07-06

標籤 react 基礎性總結組件生命週期執行順序欄目 React 简体版

原文原文鏈接

「關注 前端開發社區 ，回覆"1"便可加入 前端技術交流羣，回覆 "2"便可免費領取 500G前端乾貨！html

做者：前端林子 https://cloud.tencent.com/developer/article關注‘前端開發社區’天天精選好文 — 做者：前端林子 https://cloud.tencent.com/developer/article
關注‘前端開發社區’天天精選好文

本文做爲React總結系列的第一篇文章，會總結組件的生命週期及執行順序，涉及內容比較基礎。在後面的系列文章中則會總結React Hooks等內容。前端

1.七個可選的生命週期

說明：react

componentWillMount()

僅在render()方法前被調用一次，若是在該方法中調用了setState方法去改變組件的狀態值，那麼調用render()後，將會直接看到改變過了的狀態值，而且不論狀態值怎麼改變，componentWillMount()都不會再被調用。web

componentDidMount()

僅在render()方法後被當即調用一次，相對於父組件而言，該方法在子組件中會先被調用。若是須要使用一些JaveScript框架或者相似於setInterval()這樣的方法，建議在該方法內使用。ajax

shouldComponentUpdate(object nextProps, object nextState)

在首次渲染調用render()方法時不會被調用，後面在接受到新的state或者props時，在render()方法前被調用。爲防止一些潛在的bug，該方法默認老是返回true。若是肯定state及props改變後不須要渲染組件，那麼也能夠指定返回false，須要注意的是，這樣的結果會致使後面的render()、componentWillUpdate()、componentDidUpdate()都不會被調用。不過，React官方建議這個方法僅用來作優化性能，不要用這個方法來阻止渲染，由於可能會產生bug。數組

例如React內置的PureComponent的類，當咱們的組件繼承於它時，組件更新時就會默認先比較新舊屬性和狀態，從而決定組件是否更新。值得注意的是，PureComponent進行的是淺比較，因此組件狀態或屬性改變時，都須要返回一個新的對象或數組babel

componentWillReceiveProps(object nextProps)

在初始渲染調用render()方法時不會被調用，當接收到一個新的props時，該方法被調用。另外，若是改變一個狀態的值，則會觸發render()方法。所以能夠在這個方法裏調用setState()方法去改變一個狀態的值，當該方法接收到新的props時，setState()就能夠避免一次額外的render()了。app

componentWillUpdate(object nextProps, object nextState)

在初始渲染調用render()方法時不會被調用，當接收到新的props及state時，在render()方法以前被調用。框架

不要在此方法再去更新props 或者 statedom

componentDidUpdate(object prevProps, object prevState)

在初始渲染調用render()方法時不會被調用，當組件更新被刷新到DOM以後被當即調用。

能夠在這裏訪問，並修改 DOM

componentWillUnmount()

在組件從DOM上卸載前被調用，在這個方法裏面，主要是完成一些清除操做，好比說清除掉一些過期了的定時器等。

2.執行順序

getDefaultProps()，調用1次
getInitialState()，調用1次
componentWillMount()，調用1次
render()，調用>=1次
componentDidMount()：調用1次
componentWillReceiveProps(object nextProps)，調用>=0次
ShouldComponentUpdate(object nextProps, object nextState)，調用>=0次
componentWillUpdate(object nextProps, object nextState)，調用>=0次
render()，調用>=1次
componentDidUpdate(object prevProps, object prevState)，調用>=0次
componentWillUnmount()，調用1次

3.實例

<!DOCTYPE html>
 <html>   <head>   <script src="https://fb.me/react-15.2.0.js"></script>   <script src="https://fb.me/react-dom-15.2.0.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>   </head>  <body>   <div id="app-container"></div>   <script type="text/babel">  var SubCounter = React.createClass({  componentWillReceiveProps:function() {  console.log('九、子組件將要接收到新屬性');  },   shouldComponentUpdate:function(newProps, newState) {  console.log('十、子組件是否須要更新');  if (newProps.number < 5) return true;  return false  },   componentWillUpdate:function() {  console.log('十一、子組件將要更新');  },   componentDidUpdate:function() {  console.log('1三、子組件更新完成');  },   componentWillUnmount:function() {  console.log('1四、子組件將卸載');  },   render:function() {  console.log('十二、子組件掛載中');  return (  <p>{this.props.number}</p>  )  }  });   var Counter = React.createClass({   getInitialState:function(){  return(  this.state={  number:0  }  )  },   componentWillMount:function(){  console.log('三、父組件掛載以前');  },   componentDidMount:function(){  console.log('五、父組件掛載完成');  },   shouldComponentUpdate:function(newProps, newState) {  console.log('六、父組件是否須要更新');  if (newState.number<15) return true;  return false  },   componentWillUpdate:function() {  console.log('七、父組件將要更新');  },   componentDidUpdate:function() {  console.log('八、父組件更新完成');  },   handleClick : function(){  this.setState({  number: this.state.number + 1  })  },  render:function() {  console.log('四、render(父組件掛載)');  return (  <div>  <p>{this.state.number}</p>  <button onClick={this.handleClick}>+</button>  {this.state.number<10?<SubCounter number={this.state.number}/>:null}  </div>  )  }  });   ReactDOM.render(<Counter />, document.getElementById('app-container'));   </script>  </body>  </html> 複製代碼

結果：

4. 其餘

constructor(props){}

constructor(props){
 super(props);  this.state = {} } 複製代碼

在React組件掛載以前，會調用它的構造函數。在爲 React.Component 子類實現構造函數時，應先調用 super()，並傳入參數props。構造函數中，能夠經過this.state來初始化組件內部的state（注意這裏不是setState()方法來設置state），還能夠爲事件處理函數綁定實例：

constructor(props) {
 super(props);  // 注意：不要在這裏調用 this.setState()  this.state = { counter: 0 };  this.handleClick = this.handleClick.bind(this); } 複製代碼

defaultProps

用於爲class組件添加默認的props，示例：

class sayHello extends React.Component {
 render() {  return (  <h1>Hello,{this.props.name}</h1>  );  } }  sayHello.defaultProps = {  name:"Peter" } 複製代碼

propTypes 進行類型檢測

PropTypes 提供一系列驗證器，可用於確保組件接收到的prop值是有效的。當傳入的 prop 值類型不正確時，JavaScript 控制檯將會顯示警告。示例：

import PropTypes from 'prop-types';
class sayHello extends React.Component {  render() {  return (  <h1>Hello,{this.props.name}</h1>  );  } }  sayHello.propTypes = {  name: PropTypes.string }; 複製代碼