摘要：在中，組件基本由三個(gè)部分組成屬性狀態(tài)以及生命周期方法。在生命周期中是必須的，是渲染組件用的。返回就是緊接著以下的生命周期函數(shù)返回表示組件不需要重新渲染，不再執(zhí)行任何生命周期函數(shù)包括。生命周期流程圖原文地址

盡量全面詳細(xì)的整理一下React的生命周期中的知識(shí)點(diǎn)。

組件是獨(dú)立的封裝的可以復(fù)用的一個(gè)小部件，它是React的核心思想之一。通過(guò)劃分組件，可以將一個(gè)頁(yè)面劃分成獨(dú)立的多個(gè)可復(fù)用的組件，各個(gè)組件通過(guò)嵌套、組合形成一個(gè)完整的頁(yè)面。

在React中，組件基本由三個(gè)部分組成：屬性（props）、狀態(tài)（state）以及生命周期方法。可以將組件簡(jiǎn)單地看作一個(gè)“狀態(tài)機(jī)”，根據(jù)不同的state和props呈現(xiàn)不同的UI，通過(guò)與用戶的交互實(shí)現(xiàn)不同的狀態(tài)，然后重新渲染組件，UI可以跟隨數(shù)據(jù)變化而變化。

組件常分為兩種：Class Component和Functional Component。

Functional Component也稱為無(wú)狀態(tài)組件，它多用于純展示組件，這種組件只負(fù)責(zé)根據(jù)傳入的props來(lái)渲染組件，而不涉及state狀態(tài)管理。

在大部分React代碼中，大多數(shù)組件被寫成無(wú)狀態(tài)的組件，通過(guò)簡(jiǎn)單組合可以構(gòu)建成其他的組件等；這種通過(guò)多個(gè)簡(jiǎn)單然后合并成一個(gè)大應(yīng)用的設(shè)計(jì)模式被提倡。

無(wú)狀態(tài)組件可以通過(guò)函數(shù)形式或者ES6的箭頭函數(shù)來(lái)創(chuàng)建：

// 函數(shù)
function HelloFunctional(props){
  return 
hello {props.name}
;
}

// ES6箭頭函數(shù)
const HelloFunctional = (props) => (
hello {props.name}
);

無(wú)狀態(tài)組件有以下幾個(gè)特點(diǎn)：

代碼可讀性更好

組件不會(huì)被實(shí)例化，渲染性能提升

無(wú)生命周期方法

只能輸入props，同樣的輸入一定會(huì)有同樣的輸出

所以，在項(xiàng)目中如果不需要進(jìn)行狀態(tài)管理，應(yīng)該盡量寫成無(wú)狀態(tài)組件的形式。

現(xiàn)在主流的創(chuàng)建有狀態(tài)組件的形式是通過(guò)ES6的Class來(lái)創(chuàng)建，取代React.createClass：

Class HelloClass extends React.Component{
  constructor(){
    this.state = {
      name:"axuebin"
    }
  }
  render(){
    return (
hello {this.state.name}
);
  }
}

這是最簡(jiǎn)潔的一個(gè)組件，它需要使用到內(nèi)部狀態(tài)state。

當(dāng)組件需要使用內(nèi)部狀態(tài)時(shí)或者需要使用生命周期方法時(shí)就需要使用有狀態(tài)組件。

React組件的生命周期可以分為掛載、渲染和卸載這幾個(gè)階段，當(dāng)渲染后的組件更新后，會(huì)重新渲染組件，直到卸載。先分階段來(lái)看看每個(gè)階段有哪些生命周期函數(shù)。

屬于這個(gè)階段的生命周期函數(shù)有：

constructor()

componentWillMount()

render()

componentDidMount()

constructor() {
  super();
  this.state = {name: "axuebin"};
  this.handleClick = this.handleClick.bind(this); 
}

這個(gè)階段就是組件的初始化，constructor()可以理解為組件的構(gòu)造函數(shù)，從組件的類class實(shí)例化一個(gè)組件實(shí)例。這個(gè)函數(shù)是組件形成時(shí)就被調(diào)用的，是生命周期中最先執(zhí)行的。

在constructor()函數(shù)內(nèi)，首先必須執(zhí)行super()，否則this.props將是未定義，會(huì)引發(fā)異常。

然后，如果有必要，可以進(jìn)行：

state的初始化

方法的綁定

如果不需要這兩步，可以直接省略constructor函數(shù)。

這個(gè)函數(shù)按照駝峰法的命名規(guī)則可以理解為“組件即將被掛載”，所以這個(gè)函數(shù)是組件首次渲染（render）前調(diào)用的。

在每次頁(yè)面加載、刷新時(shí)，或者某個(gè)組件第一次展現(xiàn)時(shí)都會(huì)調(diào)用這個(gè)函數(shù)。通常地，我們推薦使用constructor()來(lái)替代。

注意：在這個(gè)函數(shù)中，不可以調(diào)用setState來(lái)修改狀態(tài)。

render() {
  return(
    
hello {this.state.name} {this.props.age}
  )
}

render()在生命周期中是必須的，是渲染組件用的。

當(dāng)這個(gè)函數(shù)被調(diào)用時(shí)，需要檢查this.props和this.state并且返回一個(gè)元素（有且只有一個(gè)元素），這個(gè)元素可能是一個(gè)原生DOM元素，也有可能是另一個(gè)React組件。

可以在state或props狀態(tài)為空時(shí)試著返回一個(gè)null或者false來(lái)聲明不想渲染任何東西。

在這個(gè)函數(shù)中，不應(yīng)該改變組件的狀態(tài)，也就是不執(zhí)行this.setState，需要保持render()函數(shù)的純凈。

在這個(gè)函數(shù)中，可以對(duì)props進(jìn)行調(diào)用并組合，但不可修改。

componentDidMount() {
  this.setState({name:"xb"});
}

這個(gè)函數(shù)在組件加載渲染完成后立即調(diào)用，此時(shí)頁(yè)面上已經(jīng)渲染出真實(shí)的DOM了，可以在這個(gè)函數(shù)中訪問(wèn)到真實(shí)的DOM（可以通過(guò)this.refs來(lái)訪問(wèn)真實(shí)DOM）。

在這個(gè)階段，還可以做一件事，可以修改state了！??！

而且，異步獲取數(shù)據(jù)在這個(gè)階段執(zhí)行也是比較合理的，獲取數(shù)據(jù)之后setState，然后重新渲染組件。

屬性或狀態(tài)的改變會(huì)觸發(fā)一次更新。當(dāng)一個(gè)組件在被重新渲染時(shí)，這些方法將會(huì)被調(diào)用：

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

已加載的組件在props發(fā)生變化時(shí)調(diào)用，若需要更新?tīng)顟B(tài)，可能需要對(duì)比this.props和nextProps然后在該方法中使用this.setState來(lái)處理狀態(tài)的改變。

需要注意的是，有些情況下，即使props未改變也會(huì)觸發(fā)該函數(shù)，所以一定要先比較this.props和nextProps再做操作。

該函數(shù)只監(jiān)聽(tīng)props的改變，this.setState不會(huì)觸發(fā)這個(gè)函數(shù)。

componentWillReceiveProps(nextProps){
  if (this.props.color !== nextProps.color){
    this.setState({});
  }
}

這個(gè)函數(shù)只返回true或false，表示組件是否需要更新（重新渲染）。

返回true就是緊接著以下的生命周期函數(shù)；

返回false表示組件不需要重新渲染，不再執(zhí)行任何生命周期函數(shù)（包括render）。

這個(gè)函數(shù)使用需謹(jǐn)慎，react官方文檔中說(shuō)道，在未來(lái)這個(gè)函數(shù)返回false可能仍然使得組件重新渲染。

這個(gè)函數(shù)看名字就和componentWillMount很像，它執(zhí)行的階段也很像。在接收到新的props或者state之后，這個(gè)函數(shù)就會(huì)在render前被調(diào)用。

同樣的，在這個(gè)函數(shù)中不能使用this.setState()。如果需要更新?tīng)顟B(tài)，請(qǐng)?jiān)?b>componentWillReceiveProps中調(diào)用this.setState()。

又是一次的render。這和掛載階段的render有什么區(qū)別呢？

在函數(shù)的性質(zhì)上來(lái)說(shuō)，兩者毫無(wú)區(qū)別，只不過(guò)是在生命周期的不同階段的調(diào)用。

前一個(gè)render是在組件第一次加載時(shí)調(diào)用的，也就是初次渲染，可以理解為mount；

后一個(gè)render是除去第一次之后調(diào)用的，也就是再渲染，re-render；

同樣地，這個(gè)方法是在組件re-render之后調(diào)用的，該方法不會(huì)在初始化的時(shí)候調(diào)用。和componentDidMount一樣，在這個(gè)函數(shù)中可以使用this.refs獲取真實(shí)DOM。

還可以修改state哦，不過(guò)會(huì)導(dǎo)致組件再次re-render。

該方法將會(huì)在 component 從DOM中移除時(shí)調(diào)用

componentWillUnmount()

卸載階段就很簡(jiǎn)單了，就這一個(gè)生命周期函數(shù)，在組件被卸載和銷毀之前立刻調(diào)用。

在這個(gè)函數(shù)中，應(yīng)該處理任何必要的清理工作，比如銷毀定時(shí)器、取消網(wǎng)絡(luò)請(qǐng)求、清除之前創(chuàng)建的相關(guān)DOM節(jié)點(diǎn)等。

原文地址：http://axuebin.com/blog/2017/...