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

1、函數(shù)組件，簡(jiǎn)單的函數(shù)組件像下面這樣，接收Props，渲染DOM，而不關(guān)注其他邏輯

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

函數(shù)組件無(wú)法使用State，也無(wú)法使用組件的生命周期方法，沒(méi)有this，純展示型組件。

建議：在寫(xiě)組件時(shí)，先思考組件應(yīng)不應(yīng)該寫(xiě)成展示型組件，能寫(xiě)成展示型組件的盡量寫(xiě)成展示型。

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

3、共同點(diǎn)

a、無(wú)論是使用函數(shù)或是類來(lái)聲明一個(gè)組件，它決不能修改它自己的 props

b、所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props

c、React是單項(xiàng)數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會(huì)更新

d、屬性 props 是外界傳遞過(guò)來(lái)的，狀態(tài) state 是組件本身的，狀態(tài)可以在組件中任意修改

e、組件的屬性和狀態(tài)改變都會(huì)更新視圖

4、組件定義的注意事項(xiàng)

a、組件名稱必須是大寫(xiě)字母開(kāi)頭

b、組件的返回值只能有一個(gè)根元素

二、class組件不同階段生命周期函數(shù)執(zhí)行順序

1、class組件執(zhí)行順序如下圖

新增：getDerivedStateFromProps，getSnapshotBeforeUpdate

UNSAFE：UNSAFE_componentWillMount，UNSAFE_componentWillUpdate，UNSAFE_componentWillReceiveProps這三個(gè)方法17以后的版本會(huì)去掉

掛載(Mounting)指組件被實(shí)例化并插入到dom中，順序如下：

constructor -> getDerivedStateFromProps -> render -> componentDidMount

更新(Updating)指當(dāng)state變化或者props變化會(huì)引起更新，順序如下：

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

卸載指的是組件被從dom移除，只會(huì)執(zhí)行一個(gè)生命周期:componentWillUnmount

2、constructor()，在 React 組件掛載時(shí)，會(huì)首先調(diào)用它的構(gòu)造函數(shù)。

作用：通常，在 React 中，在構(gòu)造函數(shù)中只做兩件事：

a、通過(guò)給 this.state 賦值對(duì)象來(lái)初始化內(nèi)部 state。

b、為事件處理函數(shù)綁定實(shí)例

注意：

a、在為 React.Component 子類實(shí)現(xiàn)構(gòu)造函數(shù)時(shí)，應(yīng)在其他語(yǔ)句之前前調(diào)用 super(props)。

否則 this.props 在構(gòu)造函數(shù)中可能會(huì)出現(xiàn)未定義的

b、不要在里邊調(diào)用setState

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

作用：可以調(diào)用setState方法，修改state。同步方法會(huì)阻塞,不會(huì)引起二次渲染，異步方法不會(huì)阻塞，會(huì)

引起二次渲染。

注意：該方法已被標(biāo)記為不安全，盡量不使用。

4、getDerivedStateFromProps((props, state), 靜態(tài)方法，為了讓 props 能更新到組件內(nèi)部state 中，掛

載和更新時(shí)都會(huì)調(diào)用。

作用：

a、無(wú)條件的根據(jù) prop 來(lái)更新內(nèi)部 state，也就是只要有傳入 prop 值， 就更新 state

b、只有 prop 值和 state 值不同時(shí)才更新 state 值

注意：

a、不能在方法內(nèi)使用this

b、如果props傳入的內(nèi)容不需要影響到你的state，那么就需要返回一個(gè)null，這個(gè)返回值是必

須的，所以盡量將其寫(xiě)到函數(shù)的末尾

異步處理：

以前，我們可以在props發(fā)生改變的時(shí)候，在componentWillReceiveProps中進(jìn)行異步操作，將

props的改變驅(qū)動(dòng)到state的改變。

react setState操作是會(huì)通過(guò)transaction進(jìn)行合并的，由此導(dǎo)致的更新過(guò)程是batch的，而react

中大部分的更新過(guò)程的觸發(fā)源都是setState，所以render觸發(fā)的頻率并不會(huì)非常頻繁

現(xiàn)在，為了響應(yīng)props的變化，我們應(yīng)該再componentDidUpdate中進(jìn)行異步操作，響應(yīng)變化

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

render執(zhí)行之前被調(diào)用

作用：

a、性能優(yōu)化的生命周期方法，修改后的props和state在該方法都可以拿到，與原props和state對(duì)

比判斷是否需要渲染

注意：

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

6、render()， class 組件中唯一必須實(shí)現(xiàn)的方法，純函數(shù)

作用：

a、組件和dom節(jié)點(diǎn)都寫(xiě)在這里，返回一個(gè)jsx，經(jīng)過(guò)編輯之后是React.createElement的表達(dá)式

注意：

a、組件名稱首字母要大寫(xiě)

b、只能有一個(gè)根節(jié)點(diǎn)

c、可以使用<></>作為根節(jié)點(diǎn)，這個(gè)節(jié)點(diǎn)不會(huì)渲染，React.Fragment的簡(jiǎn)寫(xiě)

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

之前調(diào)用，未伸入測(cè)試，了解僅限與此

作用：

a、它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如，滾動(dòng)位置）。此生命周期的任何

返回值將作為參數(shù)傳遞給 componentDidUpdate()

8、componentDidMount()， 會(huì)在組件掛載后（插入 DOM 樹(shù)中）立即調(diào)用

作用：

a、setState

b、操作dom

c、發(fā)送請(qǐng)求獲取初始數(shù)據(jù)

9、 componentDidUpdate(prevProps, prevState) ，會(huì)在更新(dom已經(jīng)更新)后會(huì)被立即調(diào)用

作用：

a、setState

b、操作dom

c、發(fā)送請(qǐng)求獲取數(shù)據(jù)

注意：

a、setState必須被包裹在一個(gè)條件語(yǔ)句里，否則會(huì)導(dǎo)致死循環(huán)

10、componentWillUnmount()，會(huì)在組件卸載及銷毀之前直接調(diào)用

作用：在這里可以釋放資源, 比如清除定時(shí)器, removeEventListener

注意：這里邊setState是無(wú)效的, 不應(yīng)該調(diào)用

11、getDerivedStateFromError 還未詳細(xì)了解

12、componentDidCatch 還未詳細(xì)了解

三、參考

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

到此這篇關(guān)于React Class組件生命周期的文章就介紹到這了,更多相關(guān)React Class組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論