老生常談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)文章
這篇文章主要介紹了使用React手寫一個對話框或模態(tài)框的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決
這篇文章主要給大家介紹了關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。2018-01-01
這篇文章主要介紹了如何實現(xiàn)在react現(xiàn)有項目中嵌入Blazor,通過這個案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項目中，并且使用方便，需要的朋友可以參考下2023-01-01
react數(shù)據(jù)管理中的setState與Props詳解
setState?是?React?中用于更新組件狀態(tài)（state）的方法,本文給大家介紹react數(shù)據(jù)管理中的setState與Props知識,感興趣的朋友跟隨小編一起看看吧2023-10-10
在React組件中,如果使用useState管理searchKey,每次輸入變化都會導致組件重新渲染,從而生成新的debounce函數(shù),導致防抖功能失效,解決方法是使用useRef定義searchKey為非響應(yīng)式數(shù)據(jù),從而維持debounce函數(shù)的穩(wěn)定,確保防抖功能有效,感興趣的朋友跟隨小編一起看看吧2024-10-10
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合2022-12-12
本文主要介紹了React組件中默認封裝了很多屬性，有的是提供給開發(fā)者操作的，其中有三個屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀2023-03-03
這篇文章主要介紹了關(guān)于React項目中的PDF展示解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
react-beautiful-dnd 實現(xiàn)組件拖拽功能
這篇文章主要介紹了react-beautiful-dnd 實現(xiàn)組件拖拽功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08
React自定義hooks同步獲取useState的最新狀態(tài)值方式
這篇文章主要介紹了React自定義hooks同步獲取useState的最新狀態(tài)值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03