React生命周期函數(shù)圖解介紹
生命周期的三個(gè)階段
1.創(chuàng)建時(shí)（掛載階段）
①執(zhí)行時(shí)機(jī)：組件創(chuàng)建時(shí)（頁面加載時(shí)）
②執(zhí)行順序：constructor()->render()->componentDidMount（）
import React, { Component } from 'react'
export default class extends Component {
constructor(){
super()
console.log("constructor");//第一個(gè)打印
}
componentDidMount(){
console.log("componentDidMount");//第三個(gè)
}
render() {
console.log("render");//第二個(gè)
return (
<div></div>
)
}
}2.更新時(shí)（更新階段）
①執(zhí)行時(shí)機(jī)：1.setState（）2.forceUpdate（）3.組件接收到新的props，這三者任意一種變化，組件就會(huì)重新渲染
3.卸載時(shí)（卸載階段）
①執(zhí)行時(shí)機(jī)：組件從頁面中消失
不常用生命周期函數(shù)
1.static getDerivedStatesFromProps( nextProps, pervState) 靜態(tài)方法生命周期函數(shù)
①執(zhí)行時(shí)機(jī)：會(huì)在調(diào)用render方法之前調(diào)用，并且在初始掛載、更新時(shí)都會(huì)被調(diào)用。它應(yīng)返回一個(gè)對(duì)象來更新state，如果返回的是null則不更新任何內(nèi)容。
②使用靜態(tài)方法，可以強(qiáng)制開發(fā)者在render之前只做無副作用的操作，而且能做的操作局限在props和state決定新的state而已。
2.shouldCompontentUpdate(nextProps, nextState) 是否要更新組件時(shí)觸發(fā)的函數(shù)
①判斷是否需要更新，主要用來優(yōu)化性能，調(diào)用this.forceUpdate會(huì)無視這個(gè)鉤子，強(qiáng)制更新。
可以通過比較this.props和nextProps、this.state和nextState來判斷狀態(tài)是否發(fā)生改變；狀態(tài)發(fā)生變化，組件會(huì)進(jìn)入渲染流程，renturn false可以阻止組件更新
②父組件的重新渲染會(huì)導(dǎo)致組件重新渲染?？梢酝ㄟ^此鉤子函數(shù)限制子組件是否需要更新。
3.getSnapshotBeforeUpdate(prevProps, prevState) 保存狀態(tài)快照
①主要用來代替componentWillUpdate生命周期函數(shù)。
②執(zhí)行時(shí)機(jī)：會(huì)在最終的render之前被調(diào)用，它與componentDidUpdate函數(shù)中的元素狀態(tài)是一致的
到此這篇關(guān)于React生命周期函數(shù)圖解介紹的文章就介紹到這了,更多相關(guān)React生命周期函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
create-react-app全家桶router?mobx全局安裝配置
這篇文章主要為大家介紹了create-react-app全家桶router?mobx全局安裝配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
react-router實(shí)現(xiàn)跳轉(zhuǎn)傳值的方法示例
這篇文章主要給大家介紹了關(guān)于react-router實(shí)現(xiàn)跳轉(zhuǎn)傳值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
這篇文章主要為大家詳細(xì)介紹了React處理復(fù)雜圖片樣式的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐記錄
這篇文章主要介紹了Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
react實(shí)現(xiàn)移動(dòng)端二級(jí)路由嵌套詳解
這篇文章主要介紹了react移動(dòng)端二級(jí)路由嵌套的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本篇文章主要介紹了React Native懸浮按鈕組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2018-04-04
基于React.js實(shí)現(xiàn)簡單的文字跑馬燈效果
剛好手上有一個(gè)要實(shí)現(xiàn)文字跑馬燈的react項(xiàng)目，然后ant-design上面沒有這個(gè)組件，于是只能自己手?jǐn)]一個(gè)，文中的實(shí)現(xiàn)方法講解詳細(xì)，希望對(duì)大家有所幫助2023-01-01
react-router-dom入門使用教程(前端路由原理)
這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07