老生常談js-react組件生命周期
組件的生命周期可分成三個狀態(tài)：
•Mounting：已插入真實 DOM
•Updating：正在被重新渲染
•Unmounting：已移出真實 DOM
生命周期的方法有：
•componentWillMount 在渲染前調(diào)用,在客戶端也在服務(wù)端。
•componentDidMount : 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。
•componentWillReceiveProps 在組件接收到一個新的prop時被調(diào)用。這個方法在初始化render時不會被調(diào)用。
•shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用forceUpdate時不被調(diào)用。
可以在你確認不需要更新組件時使用。
•componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用。在初始化時不會被調(diào)用。
•componentDidUpdate 在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。
•componentWillUnmount在組件從 DOM 中移除的時候立刻被調(diào)用。
（DVA）定義組件一般有三種方式：
// 1. 傳統(tǒng)寫法
const App = React.createClass({});
// 2. es6 的寫法
class App extends React.Component({});
// 3. stateless 的寫法（我們推薦的寫法）
const App = (props) => ({});
其中第1種是我們（DVA）不推薦的寫法，第2種是在你的組件涉及 react 的生命周期方法的時候采用這種寫法，而第3種則是我們一般推薦的寫法。
以上這篇老生常談js-react組件生命周期就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Next+React項目啟動慢刷新慢的解決方法小結(jié)
本文主要介紹了Next+React項目啟動慢刷新慢的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
這篇文章主要為大家介紹了react組件中過渡動畫的問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了React.js入門學(xué)習(xí)第一篇，詳細解析React.js基礎(chǔ)知識，全方位的了解React.js，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了手把手教您實現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了React Hooks如何主動更新Hooks組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進入到了 commit 階段，本章將講解 commit 階段執(zhí)行過程源碼2022-11-11
簡談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
用React實現(xiàn)一個類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細介紹如何用React實現(xiàn)一個類 chatGPT 的交互式問答組件的方法，文中有詳細的代碼示例，對我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了React中的refs的使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02