分析React中組件的生命周期

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

初始化

在組件初始化階段會執(zhí)行

00001. constructor

00002. static getDerivedStateFromProps()

00003. componentWillMount() / UNSAFE_componentWillMount()

00004. render()

00005. componentDidMount()

更新階段

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

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組件的構(gòu)造函數(shù)在掛載之前被調(diào)用。在實現(xiàn)React.Component構(gòu)造函數(shù)時，需要先在添加其他內(nèi)容前，調(diào)用super(props)，用來將父組件傳來的props綁定到這個類中，使用this.props將會得到。

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

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

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

constructor(props) {

  super(props);

  this.state = {

    isLiked: props.isLiked

  };}

2.static getDerivedStateFromProps(nextProps, prevState)

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

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

調(diào)用steState()不會觸發(fā)getDerivedStateFromProps()。

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

3. componentWillMount() / UNSAFE_componentWillMount()

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

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

4.render()

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

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

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

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

00004. null，什么也不渲染

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

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

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

5. componentDidMount

componentDidMount在組件被裝配后立即調(diào)用。初始化使得DOM節(jié)點應(yīng)該進(jìn)行到這里。

通常在這里進(jìn)行ajax請求

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

6.componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)

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

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

React不會在組件初始化props時調(diào)用這個方法。調(diào)用this.setState也不會觸發(fā)。

7.shouldComponentUpdate(nextProps, nextState)

調(diào)用shouldComponentUpdate使React知道，組件的輸出是否受state和props的影響。默認(rèn)每個狀態(tài)的更改都會重新渲染，大多數(shù)情況下應(yīng)該保持這個默認(rèn)行為。

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

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

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

8.UNSAFE_componentWillUpdate(nextProps, nextState)

在渲染新的state或props時，UNSAFE_componentWillUpdate會被調(diào)用，將此作為在更新發(fā)生之前進(jìn)行準(zhǔn)備的機會。這個方法不會在初始化時被調(diào)用。

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

9.getSnapshotBeforeUpdate()

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

10.componentDidUpdate(prevProps, prevState, snapshot)

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

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

11.componentWillUnmount()

在組件被卸載并銷毀之前立即被調(diào)用。在此方法中執(zhí)行任何必要的清理，例如使定時器無效，取消網(wǎng)絡(luò)請求或清理在componentDidMount中創(chuàng)建的任何監(jiān)聽。

12.componentDidCatch(error, info)

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

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

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

PureComponent

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

import React, { PureComponent } from 'react'

class YourComponent extends PureComponent {

  ……

}

ref

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

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

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

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

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

  constructor() {

    super()

    // 創(chuàng)建inputRef    this.inputRef=createRef()

  }

  componentDidMount () {

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

  render () {

    return (

        <div>

        {/* 關(guān)聯(lián)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 函數(shù)組件中，也可以使用類組件（classes components）的 state 和 組件生命周期。通過下面幾個例子來學(xué)習(xí)React Hooks。

· State Hook

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

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

  return (

    <div>

      <p>你點擊了{(lán)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 這個方法可以為我們的函數(shù)組件擁有自己的state，它接收一個用于初始 state 的值，返回一對變量。這里我們把計數(shù)器的初始值設(shè)置為0, 方法都是以set開始  const [count, setCount] = useState(0);

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

    // 更改網(wǎng)頁的標(biāo)題，還可以做其它的監(jiān)聽    document.title = `你點擊了${count}次`;

  });

  return (

    <div>

      <p>你點擊了{(lán)count}次</p>

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

    </div>

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

· React Hooks 的規(guī)則

· 只能在頂層調(diào)用Hooks。不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用Hook。

· 不要從常規(guī)JavaScript函數(shù)中調(diào)用Hook。只在React函數(shù)式組件調(diào)用Hooks。

· 自定義hooks可以選擇講解

· react 內(nèi)置hooks api

· Basic Hooks

· useState

· useEffect

· useContext

· Additional Hooks

· useReducer

· useCallback

· useMemo

· useRef

· useImperativeHandle

· useLayoutEffect

· useDebugValue

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