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

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

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

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

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

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

3、共同點(diǎn)

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

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

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

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

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

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

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

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

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

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

新增：getDerivedStateFromProps，getSnapshotBeforeUpdate

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

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

constructor -> getDerivedStateFromProps -> render -> componentDidMount

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

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

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

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

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

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

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

注意：

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

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

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

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

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

引起二次渲染。

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

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

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

作用：

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

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

注意：

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

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

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

異步處理：

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

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

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

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

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

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

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

作用：

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

比判斷是否需要渲染

注意：

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

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

作用：

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

注意：

a、組件名稱首字母要大寫

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

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

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

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

作用：

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

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

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

作用：

a、setState

b、操作dom

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

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

作用：

a、setState

b、操作dom

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

注意：

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

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

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

注意：這里邊setState是無效的, 不應(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論