摘要:組件生命周期此文章適合之前的版本,,添加了一些新的生命周期函數,同時準備廢棄一些會造成困擾的生命周期函數。每個生命周期階段調用的鉤子函數會略有不同。
React組件生命周期
此文章適合 React@17 之前的版本,React@16.3.0,添加了一些新的生命周期函數,同時準備廢棄一些會造成困擾的生命周期函數。所有如果在React@17 發布之前,這篇文章還是適用的。
新的生命周期請看官網 blog 文章 React v16.3.0: New lifecycles and context API。
組件會隨著組件的 props 和 state 改變而發生變化,它的 DOM 也會有相應的變化。
</>復制代碼
一個組件就是一個狀態機:對于特定的輸入,它總會返回一致的輸出。
React組件提供了生命周期的鉤子函數去響應組件不同時刻的狀態,組件的生命周期如下:
實例化
存在期
銷毀期
鉤子函數是我們重點關注的地方,下面來詳細了解下生命周期下的鉤子函數調用順序和作用。每個生命周期階段調用的鉤子函數會略有不同。下面的圖片或許對你有幫助。
可以查看 CodePen 在線 Demo React 生命周期
實例化首次調用組件時,有以下方法會被調用(注意順序,從上到下先后執行):
getDefaultProps
這個方法是用來設置組件默認的 props,組件生命周期只會調用一次。但是只適合 React.createClass 直接創建的組件,使用 ES6/ES7 創建的這個方法不可使用, ES6/ES7 可以使用下面方式:
</>復制代碼
// es7
class Component {
static defaultProps = {}
}
// 或者也可以在外面定義es6
// Compnent.defaultProps
getInitialState
設置state初始值,在這個方法中你已經可以訪問到 this.props。 getInitialState 只適合 React.createClass 使用。使用 ES6 初始化state方法如下:
</>復制代碼
class Component extends React.Component{
constructor(props){
super(props);
this.state = {
render: true,
}
}
}
或者這樣
</>復制代碼
class Component extends React.Component{
state = {
render: true
}
render(){return false;}
}
componentWillMount
改方法會在組件首次渲染之前調用,這個是在 render 方法調用前可修改 state 的最后一次機會。這個方法很少用到。
render
這個方法以后大家都應該會很熟悉,JSX 通過這里,解析成對應的虛擬 DOM,渲染成最終效果。格式大致如下:
</>復制代碼
class Component extends React.Component{
render(){
return (
)
}
}
?
componentDidMount
這個方法在首次真實的 DOM 渲染后調用(僅此一次)當我們需要訪問真實的 DOM 時,這個方法就經常用到。如何訪問真實的 DOM 這里就不想說了。當我們需要請求外部接口數據,一般都在這里處理。
存在期實例化后,當props或者state發生變化時,下面方法依次被調用:
componentWillReceiveProps
沒當我們通過父組件更新子組件 props 時(這個也是唯一途徑),這個方法就會被調用。
</>復制代碼
componentWillReceiveProps(nextProps){}
shouldComponentUpdate
字面意思,是否應該更新組件,默認返回 true。當返回 false 時,后期函數就不會調用,組件不會在次渲染。
</>復制代碼
shouldComponentUpdate(nextProps,nextState){}
componentWillUpdate
字面意思組件將會更新,props 和 state 改變后必調用。
render
跟實例化時的render一樣,不多說
componentDidUpdate
這個方法在更新真實的 DOM 成功后調用,當我們需要訪問真實的 DOM 時,這個方法就也經常用到。
銷毀期銷毀階段,只有一個函數被調用:
componentWillUnmount
沒當組件使用完成,這個組件就必須從DOM中銷毀,此時該方法就會被調用。當我們在組件中使用了 setInterval,那我們就需要在這個方法中調用 clearInterval。如果手動使用了 addEventListener 綁定了事件,也需要解綁事件。
參考文章An Introduction to Life Cycle Events in?React.js
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80278.html
摘要:卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數這些方法會在組件初始化的時候被調用,只跟實例的創建有關。 前言:React 的版本從 v15 到 v16.3 ,再到v16.4,現在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入,而最令人困惑的卻是它的生命周期,新舊生命周期函數混雜在一起,難免會讓許多新來者有很多困惑。所以這一篇我們來...
摘要:所以對于組件更新階段的組件生命周期,我們簡單提及并且提供一些資料給大家。這里為了知識的完整,補充關于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期 本文作者:胡子大哈本文原文:http://huziketang.com/books/react...
摘要:組件生命周期構造方法是對類的默認方法,通過命令生成對象實例時自動調用該方法。該生命周期可以發起異步請求,并。后廢棄該生命周期,可以在中完成設置渲染組件是一個組件必須定義的生命周期,用來渲染。該生命周期內可以進行。 React組件生命周期 constructor( ) 構造方法 constructor是ES6對類的默認方法,通過 new 命令生成對象實例時自動調用該方法。并且,該方法是...
摘要:因為是深入系列文章,本文不會仔細介紹每個生命周期方法的使用,而是會重點講解在使用組件生命周期時,經常遇到的疑問和錯誤使用方式。父組件發生更新導致的組件更新,生命周期方法的調用情況同上所述。 文:徐超,《React進階之路》作者授權發布,轉載請注明作者及出處 React 深入系列4:組件的生命周期 React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深...
摘要:本文主要介紹之后的生命周期。該方法有兩個參數和返回值為對象不需要返回整體,把需要改變的返回即可。必須有一個返回值,返回的數據類型可以有。此生命周期主要用于優化性能。最后,說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始,生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...
閱讀 3527·2021-09-27 13:35
閱讀 3565·2019-08-29 17:09
閱讀 2433·2019-08-26 11:30
閱讀 707·2019-08-26 10:32
閱讀 540·2019-08-26 10:23
閱讀 1200·2019-08-26 10:20
閱讀 3157·2019-08-23 15:26
閱讀 3562·2019-08-23 14:33