老生常談js-react組件生命周期
組件的生命周期可分成三個(gè)狀態(tài)：
•Mounting：已插入真實(shí) DOM
•Updating：正在被重新渲染
•Unmounting：已移出真實(shí) DOM
生命周期的方法有：
•componentWillMount 在渲染前調(diào)用,在客戶端也在服務(wù)端。
•componentDidMount : 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過(guò)this.getDOMNode()來(lái)進(jìn)行訪問(wèn)。 如果你想和其他JavaScript框架一起使用，可以在這個(gè)方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請(qǐng)求等操作(防止異部操作阻塞UI)。
•componentWillReceiveProps 在組件接收到一個(gè)新的prop時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。
•shouldComponentUpdate 返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。
可以在你確認(rèn)不需要更新組件時(shí)使用。
•componentWillUpdate在組件接收到新的props或者state但還沒(méi)有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
•componentDidUpdate 在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。
•componentWillUnmount在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。
（DVA）定義組件一般有三種方式：
// 1. 傳統(tǒng)寫(xiě)法
const App = React.createClass({});
// 2. es6 的寫(xiě)法
class App extends React.Component({});
// 3. stateless 的寫(xiě)法（我們推薦的寫(xiě)法）
const App = (props) => ({});
其中第1種是我們（DVA）不推薦的寫(xiě)法，第2種是在你的組件涉及 react 的生命周期方法的時(shí)候采用這種寫(xiě)法，而第3種則是我們一般推薦的寫(xiě)法。
以上這篇老生常談js-react組件生命周期就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用React手寫(xiě)一個(gè)對(duì)話框或模態(tài)框的方法示例
這篇文章主要介紹了使用React手寫(xiě)一個(gè)對(duì)話框或模態(tài)框的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
關(guān)于react-router/react-router-dom v4 history不能訪問(wèn)問(wèn)題的解決
這篇文章主要給大家介紹了關(guān)于react-router/react-router-dom v4 history不能訪問(wèn)問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
教你如何實(shí)現(xiàn)在react項(xiàng)目中嵌入Blazor
這篇文章主要介紹了如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor,通過(guò)這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中，并且使用方便，需要的朋友可以參考下2023-01-01
react數(shù)據(jù)管理中的setState與Props詳解
setState?是?React?中用于更新組件狀態(tài)（state）的方法,本文給大家介紹react數(shù)據(jù)管理中的setState與Props知識(shí),感興趣的朋友跟隨小編一起看看吧2023-10-10
react組件中debounce防抖功能失效問(wèn)題解決辦法
在React組件中,如果使用useState管理searchKey,每次輸入變化都會(huì)導(dǎo)致組件重新渲染,從而生成新的debounce函數(shù),導(dǎo)致防抖功能失效,解決方法是使用useRef定義searchKey為非響應(yīng)式數(shù)據(jù),從而維持debounce函數(shù)的穩(wěn)定,確保防抖功能有效,感興趣的朋友跟隨小編一起看看吧2024-10-10
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-12-12
本文主要介紹了React組件中默認(rèn)封裝了很多屬性，有的是提供給開(kāi)發(fā)者操作的，其中有三個(gè)屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀2023-03-03
關(guān)于React項(xiàng)目中的PDF展示解決方案
這篇文章主要介紹了關(guān)于React項(xiàng)目中的PDF展示解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能
這篇文章主要介紹了react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
React自定義hooks同步獲取useState的最新?tīng)顟B(tài)值方式
這篇文章主要介紹了React自定義hooks同步獲取useState的最新?tīng)顟B(tài)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03