React學(xué)習(xí)筆記（三），組件的生命周期

React中組件也有生命周期，也就是說也有很多鉤子函數(shù)供我們使用, 組件的生命周期，我們會(huì)分為四個(gè)階段，初始化、運(yùn)行中、銷毀、錯(cuò)誤處理(16.3之后)

初始化

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

00001. constructor

00002. static getDerivedStateFromProps()

00003. componentWillMount() / UNSAFE_componentWillMount()

00004. render()

00005. componentDidMount()

更新階段

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

00001. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

00002. static getDerivedStateFromProps()

00003. shouldComponentUpdate()

00004. componentWillUpdate() / UNSAFE_componentWillUpdate()

00005. render()

00006. getSnapshotBeforeUpdate()

00007. componentDidUpdate()

卸載階段

00001. componentWillUnmount()

錯(cuò)誤處理

00001. componentDidCatch()

各生命周期詳解

1.constructor(props)

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

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

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

當(dāng)然也可以利用props初始化state，在之后修改state不會(huì)對(duì)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之后新增，在組件實(shí)例化后，和接受新的props后被調(diào)用。他必須返回一個(gè)對(duì)象來更新狀態(tài)，或者返回null表示新的props不需要任何state的更新。

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

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

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

3. componentWillMount() / UNSAFE_componentWillMount()

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

為了避免副作用和其他的訂閱，官方都建議使用componentDidMount()代替。這個(gè)方法是用于在服務(wù)器渲染上的唯一方法。這個(gè)方法因?yàn)槭窃阡秩局氨徽{(diào)用，也是惟一一個(gè)可以直接同步修改state的地方。

4.render()

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

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

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

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

00004. null，什么也不渲染

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

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

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

5. componentDidMount

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

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

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

6.componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)

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

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

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

7.shouldComponentUpdate(nextProps, nextState)

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

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

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

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

8.UNSAFE_componentWillUpdate(nextProps, nextState)

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

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

9.getSnapshotBeforeUpdate()

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

10.componentDidUpdate(prevProps, prevState, snapshot)

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

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

11.componentWillUnmount()

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

12.componentDidCatch(error, info)

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

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

錯(cuò)誤邊界只會(huì)捕獲樹中下面組件中的錯(cuò)誤。錯(cuò)誤邊界本身不能捕獲錯(cuò)誤。

PureComponent

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

import React, { PureComponent } from 'react'

?

class YourComponent extends PureComponent {

……

}

ref

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

· 掛到組件(class聲明的組件)上的ref表示對(duì)組件實(shí)例的引用。不能在函數(shù)式組件上使用 ref 屬性，因?yàn)樗鼈儧]有實(shí)例：

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

在React 最新的版本中，要使用ref, 需要使用React.createRef方法先生成一個(gè)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 和 組件生命周期。通過下面幾個(gè)例子來學(xué)習(xí)React Hooks。

· State Hook

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

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

return (

<div>

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

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

</div>

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

· Effect Hook

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

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

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

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

});

return (

<div>

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

<button onClick={() => setCount(count + 1)}>點(diǎn)擊</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

總結(jié)

以上是生活随笔為你收集整理的react取消捕获_React学习笔记（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。