一、react元件的兩種定義方式

1、函式元件，簡單的函式元件像下面這樣，接收Props，渲染DOM，而不關注其他邏輯

function Welcome(props) {
  return <h1>Hello,{props.name}</h1>;
}

函式元件無法使用State，也無法使用元件的生命週期方法，沒有this，純展示型元件。

建議：在寫元件時，先思考元件應不應該寫成展示型元件，能寫成展示型元件的儘量寫成展示型。

2、class元件，需要繼承React.Component，有State，有生命週期，有this

3、共同點

a、無論是使用函式或是類來宣告一個元件，它決不能修改它自己的 props

b、所有 React 元件都必須是純函式，並禁止修改其自身 props

c、React是單項資料流，父元件改變了屬性，那麼子元件檢視會更新

d、屬性 props 是外界傳遞過來的，狀態 state 是元件本身的，狀態可以在元件中任意修改

e、元件的屬性和狀態改變都會更新檢視

4、元件定義的注意事項

a、元件名稱必須是大寫字母開頭

b、元件的返回值只能有一個根元素

二、class元件不同階段生命週期函式執行順序

1、class元件執行順序如下圖

新增：getDerivedStateFromProps，getSnapshotBeforeUpdate

UNSAFE：UNSAFE_componentWillMount，UNSAFE_componentWillUpdate，UNSAFE_componentWillReceiveProps這三個方法17以後的版本會去掉

掛載(Mounting)指元件被例項化並插入到dom中，順序如下：

constructor -> getDerivedStateFromProps -> render -> componentDidMount

更新(Updating)指當state變化或者props變化會引起更新，順序如下：www.cppcns.com

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

解除安裝指的是元件被從dom移除，只會執行一個生命週期:componentWillUnmount

2、constructor()，在 React 元件掛載時，會首先呼叫它的建構函式。

作用：通常，在 React 中，在建構函式中只做兩件事：

a、通過給 this.state 賦值物件來初始化內部 state。

b、為事件處理函式繫結例項

注意：

a、在為 React.Component 子類實現建構函式時，應在其他語句之前前呼叫 super(props)。

否則 this.props 在建構函式中可能會出現未定義的

b、不要在裡邊呼叫setState

3、componentWillMount()，在 React 元件掛載時render之前。

作用：可以呼叫setState方法，修改state。同步方法會阻塞,不會引起二次渲染，非同步方法不會阻塞，會

引起二次渲染。

注意：該方法已被標記為不安全，儘量不使用。

4、getDerivedStateFromProps((props,state),靜態方法，為了讓 props 能更新到元件內部state 中，掛

載和更新時都會呼叫。

作用：

a、無條件的根據 prop 來更新內部 state，也就是隻要有傳入 prop 值， 就更新 state

b、只有 prop 值和 state 值不同時才更新 state 值

注意：

a、不能在方法內使用this

b、如果props傳入的內容不需要影響到你的state，那麼就需要返回一個null，這個返回值是必

須的，所以儘量將其寫到函式的末尾

非同步處理：

以前，我們可以在props發生改變的時候，在componentWillReceiveProps中進行非同步操作，將

props的改變驅動到state的改變。

react setState操作是會通過transaction進行合併的，由此導致的更新過程是batch的，而react

中大部分的更新過程的觸發源都是setState，所以render觸發的頻率並不會非常頻繁

現在，為了響應props的變化，我們應該再componentDidUpdate中進行非同步操作，響應變化

5、shouldComponentUpdate(nextProps,nextState)，更新時也就是state或props發生變化時，會在

render執行之前被呼叫

作用：

a、效能優化的生命週期方法，修改後的props和state在該方法都可以拿到，與原props和state對

比判斷是否需要渲染

注意：

a、此方法的返回值必須是true或者false，返回false將不執行render

6、render()， class 元件中唯一必須實現的方法，純函式

作用：

a、元件和dom節點都寫在這裡，返回一個x，經過編輯之後是React.createElement的表示式

注意：

a、http://www.cppcns.com元件名稱首字母要大寫

b、只能有一個根節點

c、可以使用<></>作為根節點，這個節點不會渲染，React.Fragment的簡寫

7、getSnapshotBeforeUpdate(prevProps,prevState)，在最近一次渲染輸出（提交到 DOM 節點）

之前呼叫，未伸入測試，瞭解僅限與此

作用：

a、它使得元件能在發生更改之前從 DOM 中捕獲一些資訊（例如，滾動位置）。此生命週期的任何

返回值將作為引數傳遞給 componentDidUpdate()

8、componentDidMount()， 會在元件掛載後（插入 DOM 樹中）立即呼叫

作用：

a、setState

b、操作dom

c、傳送請求獲取初始資料

9、 componentDidUpdate(prevProps,prevState) ，會在更新(dom已經更新)後會被立即呼叫

作用：

a、setState

b、操作dom

c、傳送請求獲取資料

注意：

a、setState必須被包裹在一個條件語句裡，否則會導致死迴圈

10、componentWillUnmount()，會在元件解除安裝及銷燬之前直接呼叫

作用：在這裡可以釋放資源,比如清除定時器,removeEventListener

注意：這裡邊setState是無效的,不應該呼叫

11、getDeriwww.cppcns.comvedStateFromError 還未詳細瞭解

12、componentDidCatch 還未詳細瞭解

三、參考

官方生命週期API https://react.docschina.org/docs/react-component.html

到此這篇關於React Class元件生命週期的文章就介紹到這了,更多相關React Class元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！