分析React中組件的生命周期

這篇文章主要講解了“分析React中組件的生命周期”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“分析React中組件的生命周期”吧！

初始化

在組件初始化階段會執行

00001. constructor

00002. static getDerivedStateFromProps()

00003. componentWillMount() / UNSAFE_componentWillMount()

00004. render()

00005. componentDidMount()

更新階段

props或state的改變可能會引起組件的更新，組件重新渲染的過程中會調用以下方法：

00001. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

00002. static getDerivedStateFromProps()

00003. shouldComponentUpdate()

00004. componentWillUpdate() / UNSAFE_componentWillUpdate()

00005. render()

00006. getSnapshotBeforeUpdate()

00007. componentDidUpdate()

卸載階段

00001. componentWillUnmount()

錯誤處理

00001. componentDidCatch()

各生命周期詳解

1.constructor(props)

React組件的構造函數在掛載之前被調用。在實現React.Component構造函數時，需要先在添加其他內容前，調用super(props)，用來將父組件傳來的props綁定到這個類中，使用this.props將會得到。

官方建議不要在constructor引入任何具有副作用和訂閱功能的代碼，這些應當使用componentDidMount()。

constructor中應當做些初始化的動作，如：初始化state，將事件處理函數綁定到類實例上，但也不要使用setState()。如果沒有必要初始化state或綁定方法，則不需要構造constructor，或者把這個組件換成純函數寫法。

當然也可以利用props初始化state，在之后修改state不會對props造成任何修改，但仍然建議大家提升狀態到父組件中，或使用redux統一進行狀態管理。

constructor(props) {

  super(props);

  this.state = {

    isLiked: props.isLiked

  };}

2.static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps 是react16.3之后新增，在組件實例化后，和接受新的props后被調用。他必須返回一個對象來更新狀態，或者返回null表示新的props不需要任何state的更新。

如果是由于父組件的props更改，所帶來的重新渲染，也會觸發此方法。

調用steState()不會觸發getDerivedStateFromProps()。

之前這里都是使用constructor+componentWillRecieveProps完成相同的功能的

3. componentWillMount() / UNSAFE_componentWillMount()

componentWillMount()將在React未來版本(官方說法 17.0)中被棄用。UNSAFE_componentWillMount()在組件掛載前被調用，在這個方法中調用setState()不會起作用，是由于他在render()前被調用。

為了避免副作用和其他的訂閱，官方都建議使用componentDidMount()代替。這個方法是用于在服務器渲染上的唯一方法。這個方法因為是在渲染之前被調用，也是惟一一個可以直接同步修改state的地方。

4.render()

render()方法是必需的。當他被調用時，他將計算this.props和this.state，并返回以下一種類型：

00001. React元素。通過jsx創建，既可以是dom元素，也可以是用戶自定義的組件。

00002. 字符串或數字。他們將會以文本節點形式渲染到dom中。

00003. Portals。react 16版本中提出的新的解決方案，可以使組件脫離父組件層級直接掛載在DOM樹的任何位置。

00004. null，什么也不渲染

00005. 布爾值。也是什么都不渲染。

當返回null,false,ReactDOM.findDOMNode(this)將會返回null，什么都不會渲染。

render()方法必須是一個純函數，他不應該改變state，也不能直接和瀏覽器進行交互，應該將事件放在其他生命周期函數中。 如果shouldComponentUpdate()返回false，render()不會被調用。

5. componentDidMount

componentDidMount在組件被裝配后立即調用。初始化使得DOM節點應該進行到這里。

通常在這里進行ajax請求

如果要初始化第三方的dom庫，也在這里進行初始化。只有到這里才能獲取到真實的dom.

6.componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)

官方建議使用getDerivedStateFromProps函數代替componentWillReceiveProps。當組件掛載后，接收到新的props后會被調用。如果需要更新state來響應props的更改，則可以進行this.props和nextProps的比較，并在此方法中使用this.setState()。

如果父組件會讓這個組件重新渲染，即使props沒有改變，也會調用這個方法。

React不會在組件初始化props時調用這個方法。調用this.setState也不會觸發。

7.shouldComponentUpdate(nextProps, nextState)

調用shouldComponentUpdate使React知道，組件的輸出是否受state和props的影響。默認每個狀態的更改都會重新渲染，大多數情況下應該保持這個默認行為。

在渲染新的props或state前，shouldComponentUpdate會被調用。默認為true。這個方法不會在初始化時被調用，也不會在forceUpdate()時被調用。返回false不會阻止子組件在state更改時重新渲染。

如果shouldComponentUpdate()返回false，componentWillUpdate,render和componentDidUpdate不會被調用。

官方并不建議在shouldComponentUpdate()中進行深度查詢或使用JSON.stringify()，他效率非常低，并且損傷性能。

8.UNSAFE_componentWillUpdate(nextProps, nextState)

在渲染新的state或props時，UNSAFE_componentWillUpdate會被調用，將此作為在更新發生之前進行準備的機會。這個方法不會在初始化時被調用。

不能在這里使用this.setState()，也不能做會觸發視圖更新的操作。如果需要更新state或props，調用getDerivedStateFromProps。

9.getSnapshotBeforeUpdate()

在react render()后的輸出被渲染到DOM之前被調用。它使您的組件能夠在它們被潛在更改之前捕獲當前值（如滾動位置）。這個生命周期返回的任何值都將作為參數傳遞給componentDidUpdate（）。

10.componentDidUpdate(prevProps, prevState, snapshot)

在更新發生后立即調用componentDidUpdate()。此方法不用于初始渲染。當組件更新時，將此作為一個機會來操作DOM。只要您將當前的props與以前的props進行比較（例如，如果props沒有改變，則可能不需要網絡請求），這也是做網絡請求的好地方。

如果組件實現getSnapshotBeforeUpdate()生命周期，則它返回的值將作為第三個“快照”參數傳遞給componentDidUpdate()。否則，這個參數是undefined。

11.componentWillUnmount()

在組件被卸載并銷毀之前立即被調用。在此方法中執行任何必要的清理，例如使定時器無效，取消網絡請求或清理在componentDidMount中創建的任何監聽。

12.componentDidCatch(error, info)

錯誤邊界是React組件，可以在其子組件樹中的任何位置捕獲JavaScript錯誤，記錄這些錯誤并顯示回退UI，而不是崩潰的組件樹。錯誤邊界在渲染期間，生命周期方法以及整個樹下的構造函數中捕獲錯誤。

如果類組件定義了此生命周期方法，則它將成錯誤邊界。在它中調用setState()可以讓你在下面的樹中捕獲未處理的JavaScript錯誤，并顯示一個后備UI。只能使用錯誤邊界從意外異常中恢復; 不要試圖將它們用于控制流程。

錯誤邊界只會捕獲樹中下面組件中的錯誤。錯誤邊界本身不能捕獲錯誤。

PureComponent

PureComponnet里如果接收到的新屬性或者是更改后的狀態和原屬性、原狀態相同的話，就不會去重新render了 在里面也可以使用shouldComponentUpdate，而且。是否重新渲染以shouldComponentUpdate的返回值為最終的決定因素。

import React, { PureComponent } from 'react'

class YourComponent extends PureComponent {

  ……

}

ref

React提供的這個ref屬性，表示為對組件真正實例的引用，其實就是ReactDOM.render()返回的組件實例,ref可以掛載到組件上也可以是dom元素上。

· 掛到組件(class聲明的組件)上的ref表示對組件實例的引用。不能在函數式組件上使用 ref 屬性，因為它們沒有實例：

· 掛載到dom元素上時表示具體的dom元素節點。

在React 最新的版本中，要使用ref, 需要使用React.createRef方法先生成一個ref。

import React, { Component, createRef } from 'react'import ReactDOM from 'react-dom'class App extends Component {

  constructor() {

    super()

    // 創建inputRef    this.inputRef=createRef()

  }

  componentDidMount () {

    console.log(this.inputRef.current) // <input type="text">  }

  render () {

    return (

        <div>

        {/* 關聯ref和dom */}

        <input type="text" ref={this.inputRef} />

      </div>

    )

  }}ReactDOM.render(

    <App/>,

  document.getElementById('root'))

React Hooks

React Hooks 是 React 16.7.0-alpha 版本推出的新特性, 有了React Hooks，在 react 函數組件中，也可以使用類組件（classes components）的 state 和 組件生命周期。通過下面幾個例子來學習React Hooks。

· State Hook

// useState是react包提供的一個方法import React, { useState } from "react";import ReactDOM from "react-dom";const Counter = () => {

  // useState 這個方法可以為我們的函數組件擁有自己的state，它接收一個用于初始 state 的值，返回一對變量。這里我們把計數器的初始值設置為0, 方法都是以set開始  const [count, setCount] = useState(0);

  return (

    <div>

      <p>你點擊了{count}次</p>

      <button onClick={() => setCount(count + 1)}>點擊</button>

    </div>

  );};const rootElement = document.getElementById("root");ReactDOM.render(<Counter />, rootElement);

· Effect Hook

// useState是react包提供的一個方法import React, { useState, useEffect } from "react";import ReactDOM from "react-dom";const Counter = () => {

  // useState 這個方法可以為我們的函數組件擁有自己的state，它接收一個用于初始 state 的值，返回一對變量。這里我們把計數器的初始值設置為0, 方法都是以set開始  const [count, setCount] = useState(0);

  // 類似于componentDidMount或者componentDidUpdate:  useEffect(() => {

    // 更改網頁的標題，還可以做其它的監聽    document.title = `你點擊了${count}次`;

  });

  return (

    <div>

      <p>你點擊了{count}次</p>

      <button onClick={() => setCount(count + 1)}>點擊</button>

    </div>

  );};const rootElement = document.getElementById("root");ReactDOM.render(<Counter />, rootElement);

· React Hooks 的規則

· 只能在頂層調用Hooks。不要在循環，條件或嵌套函數中調用Hook。

· 不要從常規JavaScript函數中調用Hook。只在React函數式組件調用Hooks。

· 自定義hooks可以選擇講解

· react 內置hooks api

· Basic Hooks

· useState

· useEffect

· useContext

· Additional Hooks

· useReducer

· useCallback

· useMemo

· useRef

· useImperativeHandle

· useLayoutEffect

· useDebugValue

感謝各位的閱讀，以上就是“分析React中組件的生命周期”的內容了，經過本文的學習后，相信大家對分析React中組件的生命周期這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！