React的生命周期到底是怎么一回事？

sutaking 發布于2019-08-22 11:08 / 2900人閱讀

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

盡量全面詳細的整理一下React的生命周期中的知識點。

組件

組件是獨立的封裝的可以復用的一個小部件，它是React的核心思想之一。通過劃分組件，可以將一個頁面劃分成獨立的多個可復用的組件，各個組件通過嵌套、組合形成一個完整的頁面。

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

創建組件

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

無狀態組件

Functional Component也稱為無狀態組件，它多用于純展示組件，這種組件只負責根據傳入的props來渲染組件，而不涉及state狀態管理。

在大部分React代碼中，大多數組件被寫成無狀態的組件，通過簡單組合可以構建成其他的組件等；這種通過多個簡單然后合并成一個大應用的設計模式被提倡。

無狀態組件可以通過函數形式或者ES6的箭頭函數來創建：

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

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

無狀態組件有以下幾個特點：

代碼可讀性更好

組件不會被實例化，渲染性能提升

無生命周期方法

只能輸入props，同樣的輸入一定會有同樣的輸出

所以，在項目中如果不需要進行狀態管理，應該盡量寫成無狀態組件的形式。

有狀態組件

現在主流的創建有狀態組件的形式是通過ES6的Class來創建，取代React.createClass：

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

這是最簡潔的一個組件，它需要使用到內部狀態state。

當組件需要使用內部狀態時或者需要使用生命周期方法時就需要使用有狀態組件。

組件的生命周期

React組件的生命周期可以分為掛載、渲染和卸載這幾個階段，當渲染后的組件更新后，會重新渲染組件，直到卸載。先分階段來看看每個階段有哪些生命周期函數。

掛載階段（Mounting）

屬于這個階段的生命周期函數有：

constructor()

componentWillMount()

render()

componentDidMount()

constructor()

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

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

在constructor()函數內，首先必須執行super()，否則this.props將是未定義，會引發異常。

然后，如果有必要，可以進行：

state的初始化

方法的綁定

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

componentWillMount()

這個函數按照駝峰法的命名規則可以理解為“組件即將被掛載”，所以這個函數是組件首次渲染（render）前調用的。

在每次頁面加載、刷新時，或者某個組件第一次展現時都會調用這個函數。通常地，我們推薦使用constructor()來替代。

注意：在這個函數中，不可以調用setState來修改狀態。

render()

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

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

當這個函數被調用時，需要檢查this.props和this.state并且返回一個元素（有且只有一個元素），這個元素可能是一個原生DOM元素，也有可能是另一個React組件。

可以在state或props狀態為空時試著返回一個null或者false來聲明不想渲染任何東西。

在這個函數中，不應該改變組件的狀態，也就是不執行this.setState，需要保持render()函數的純凈。

在這個函數中，可以對props進行調用并組合，但不可修改。

componentDidMount()

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

這個函數在組件加載渲染完成后立即調用，此時頁面上已經渲染出真實的DOM了，可以在這個函數中訪問到真實的DOM（可以通過this.refs來訪問真實DOM）。

在這個階段，還可以做一件事，可以修改state了?。。?/p>

而且，異步獲取數據在這個階段執行也是比較合理的，獲取數據之后setState，然后重新渲染組件。

更新階段（Updating）

屬性或狀態的改變會觸發一次更新。當一個組件在被重新渲染時，這些方法將會被調用：

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

componentWillReceiveProps()

已加載的組件在props發生變化時調用，若需要更新狀態，可能需要對比this.props和nextProps然后在該方法中使用this.setState來處理狀態的改變。

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

該函數只監聽props的改變，this.setState不會觸發這個函數。

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

shouldComponentUpdate()

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

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

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

這個函數使用需謹慎，react官方文檔中說道，在未來這個函數返回false可能仍然使得組件重新渲染。

componentWillUpdate()

這個函數看名字就和componentWillMount很像，它執行的階段也很像。在接收到新的props或者state之后，這個函數就會在render前被調用。

同樣的，在這個函數中不能使用this.setState()。如果需要更新狀態，請在componentWillReceiveProps中調用this.setState()。

render()

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

在函數的性質上來說，兩者毫無區別，只不過是在生命周期的不同階段的調用。

前一個render是在組件第一次加載時調用的，也就是初次渲染，可以理解為mount；

后一個render是除去第一次之后調用的，也就是再渲染，re-render；

componentDidUpdate()

同樣地，這個方法是在組件re-render之后調用的，該方法不會在初始化的時候調用。和componentDidMount一樣，在這個函數中可以使用this.refs獲取真實DOM。

還可以修改state哦，不過會導致組件再次re-render。

卸載階段（Unmounting）

該方法將會在 component 從DOM中移除時調用

componentWillUnmount()

componentWillUnmount()

卸載階段就很簡單了，就這一個生命周期函數，在組件被卸載和銷毀之前立刻調用。

在這個函數中，應該處理任何必要的清理工作，比如銷毀定時器、取消網絡請求、清除之前創建的相關DOM節點等。

生命周期流程圖

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

云服務器 GPU云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91835.html

參與知乎 live — 編寫優雅的前端業務代碼總結

摘要：知乎原地址編寫優雅的前端業務代碼前言當我們在寫業務代碼的時候，我們到底在寫什么其實是對交互的一些處理。遍歷，通過事件委派，將事件綁定在上。事件綁定濫用使用進行統一管理。寫代碼要說人話。知乎 live 原地址：編寫優雅的前端業務代碼前言當我們在寫業務代碼的時候，我們到底在寫什么？其實是對交互的一些處理。所有的交互都是基于用戶或者瀏覽器的一些行為來觸發的，比如渲染頁面，在頁面onl...

CNZPH 2019-08-22 17:22 評論0 收藏0
全面了解 React 新功能: Suspense 和 Hooks

摘要：他們的應用是比較復雜的，組件樹也是非常龐大，假設有一千個組件要渲染，每個耗費一千個就是由于是單線程的，這里都在努力的干活，一旦開始，中間就不會停。悄悄的, React v16.7 發布了。 React v16.7: No, This Is Not The One With Hooks. showImg(https://segmentfault.com/img/bVblq9L?w=97...

Baaaan 2019-08-23 14:14 評論0 收藏0
JS每日一題：react中類組件和函數式組件中有什么不同?

摘要：期中類組件和函數式組件中有什么不同在中創建組件的形式有三種純函數式定義的無狀態組件定義的組件定義的組件今天我們要聊的是純函數式定義的無狀態組件及類組件的到底有什么不同分別在什么場景下適合使用首先我們來看一下用上述方法如何來創建一個組件定義的 20190306期 react中類組件和函數式組件中有什么不同? 在react中創建組件的形式有三種純函數式定義的無狀態組件 React.cr...

Java_oldboy 2019-08-26 13:32 評論0 收藏0
一篇文章教你讀懂UI繪制流程

摘要：最近有好多人問我沒信心去深造了，找不到好的工作，其實我以一個他們進行回復，發現他們主要是內心比較浮躁，要知道技術行業永遠缺少的是高手。至此整體繪制過程我們就已經非常清楚了。我門可以根據這種繪制的流程來操作自己的自定義組件。最近有好多人問我Android沒信心去深造了，找不到好的工作，其實我以一個他們進行回復，發現他們主要是內心比較浮躁，要知道技術行業永遠缺少的是高手。建議先閱讀淺談A...

ghnor 2019-08-16 12:30 評論0 收藏0
React setState源碼實現理解

摘要：新的值回調函數。官方注解是給組件做個標記需要重新渲染，并且將可選的回調函數添加到函數列表中，這些函數將在重新渲染的時候執行。一共做了兩件事一是通過執行方法來更新組件二是若方法傳入了回調函數則將回調函數存入隊列。 Q1 setState改變狀態之后，不會立即更新state值。所以，如果改變state值，react是什么時候進行組件的更新呢？setState()到底做了一些什么呢？ A1 ...

xietao3 2019-08-23 18:21 評論0 收藏0