React
創建組件的過程中,會調用一個render
方法,以及觸發若干生命周期的方法。本文主要和大家講一講這些生命周期的方法是何時被執行的。理解組件的生命周期,當組件被創建或銷毀時,可以執行某些操作。此外,當 props
和 state
發生改變的時候,你可以利用這些生命周期的鉤子來改變你的組件。
生命周期
為了清楚的了解生命周期,我們需要明白 組件初始化 ,state
改變 , props
改變 , 組件卸載 ,以及調用 forceUpdate()
時,哪些鉤子函數會被執行。
組件初始化
constructor()
React
組件的構造函數將會在裝配之前被調用。當為一個React.Component
子類定義構造函數時,你應該在任何其他的表達式之前調用super(props)
。否則,this.props在構造函數中將是未定義。
構造函數是初始化狀態的合適位置。若你不初始化狀態且不綁定方法,那你也不需要為你的React組件定義一個構造函數。
可以基于屬性來初始化狀態。這樣有效地“分離(forks)”屬性并根據初始屬性設置狀態。這有一個有效的React.Component
子類構造函數的例子:
constructor(props) { super(props); this.state = { color: props.initialColor }; }
componentWillMount()
componentWillMount()
componentWillMount()
在裝配發生前被立刻調用。其在render()
之前被調用,因此在這方法里同步地設置狀態將不會觸發重渲。避免在該方法中引入任何的副作用或訂閱。
這是唯一的會在服務端渲染調起的生命周期鉤子函數。通常地,我們推薦使用constructor()
來替代。
render()
render()
方法是必須的。
當被調用時,其應該檢查this.props
和 this.state
并返回以下類型中的一個:
React元素。 通常是由 JSX 創建。該元素可能是一個原生DOM組件的表示,如<p />,或者是一個你定義的合成組件。
字符串和數字。 這些將被渲染為 DOM 中的 text node。
Portals。 由 ReactDOM.createPortal 創建。
null。 什么都不渲染。
布爾值。 什么都不渲染。(通常存在于 return test && <Child />寫法,其中 test 是布爾值。)
當返回null
或 false
時,ReactDOM.findDOMNode(this)
將返回 null
。render()
函數應該純凈,意味著其不應該改變組件的狀態,其每次調用都應返回相同的結果,同時不直接和瀏覽器交互。若需要和瀏覽器交互,將任務放在componentDidMount()階段或其他的生命周期方法。保持render() 方法純凈使得組件更容易思考。
注意
若shouldComponentUpdate()
返回false
,render()
函數將不會被調用。
componentDidMount()
componentDidMount()
componentDidMount()
在組件被裝配后立即調用。初始化使得DOM節點應該進行到這里。若你需要從遠端加載數據,這是一個適合實現網絡請求的地方。在該方法里設置狀態將會觸發重渲。
State Changes
shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)
使用shouldComponentUpdate()
以讓React
知道當前狀態或屬性的改變是否不影響組件的輸出。默認行為是在每一次狀態的改變重渲,在大部分情況下你應該依賴于默認行為。
當接收到新屬性或狀態時,shouldComponentUpdate()
在渲染前被調用。默認為true
。該方法并不會在初始化渲染或當使用forceUpdate()
時被調用。
當他們狀態改變時,返回false
并不能阻止子組件重渲。
注意:如果只定義方法,不寫任何返回值,會提示:shouldComponentUpdate(): Returned undefined instead of a boolean value.
注意即使屬性未有任何改變,React
可能也會調用該方法,因此若你想要處理改變,請確保比較當前和之后的值。這可能會發生在當父組件引起你的組件重渲。
在裝配期間,React并不會調用帶有初始屬性的componentWillReceiveProps
方法。其僅會調用該方法如果某些組件的屬性可能更新。調用this.setState
通常不會觸發componentWillReceiveProps
。
componentWillUpdate()
componentWillUpdate(nextProps, nextState)
當接收到新屬性或狀態時,componentWillUpdate()
為在渲染前被立即調用。在更新發生前,使用該方法是一次準備機會。該方法不會在初始化渲染時調用。
注意你不能在這調用this.setState()
,若你需要更新狀態響應屬性的調整,使用componentWillReceiveProps()
代替。
注意:若shouldComponentUpdate()返回false,componentWillUpdate()將不會被調用。
componentDidUpdate()
componentDidUpdate(nextProps, nextState)
當接收到新屬性或狀態時,componentWillUpdate()
為在渲染前被立即調用。在更新發生前,使用該方法是一次準備機會。該方法不會在初始化渲染時調用。
注意:你不能在這調用this.setState()
,若你需要更新狀態響應屬性的調整,使用componentWillReceiveProps()
代替。注意:若
shouldComponentUpdate()
返回false
,componentWillUpdate()
將不會被調用。
Props Changes
componentWillReceiveProps()
componentWillReceiveProps(nextProps)
componentWillReceiveProps()
在裝配了的組件接收到新屬性前調用。若你需要更新狀態響應屬性改變(例如,重置它),你可能需對比this.props
和nextProps
并在該方法中使用this.setState()
處理狀態改變。
注意:即使屬性未有任何改變,React
可能也會調用該方法,因此若你想要處理改變,請確保比較當前和之后的值。這可能會發生在當父組件引起你的組件重渲。
在裝配期間,React
并不會調用帶有初始屬性的componentWillReceiveProps
方法。其僅會調用該方法如果某些組件的屬性可能更新。調用this.setState
通常不會觸發componentWillReceiveProps
。
Unmounting
componentWillUnmount()
componentWillUnmount()
componentWillUnmount()
在組件被卸載和銷毀之前立刻調用。可以在該方法里處理任何必要的清理工作,例如解綁定時器,取消網絡請求,清理任何在componentDidMount
環節創建的DOM元素。
forceUpdate
默認情況,當你的組件或狀態發生改變,你的組件將會重渲。若你的render()
方法依賴其他數據,你可以通過調用forceUpdate()
來告訴React組件需要重渲。
調用forceUpdate()
將會導致組件的 render()
方法被調用,并忽略shouldComponentUpdate()
。這將會觸發每一個子組件的生命周期方法,涵蓋,每個子組件的shouldComponentUpdate()
方法。若當標簽改變,React僅會更新DOM。
通常你應該嘗試避免所有forceUpdate()
的用法并僅在render()
函數里從this.props
和this.state
讀取數據。
forceUpdate() Example
// forceUpdate() Example class App extends React.Component{ constructor(){ super(); this.forceUpdateHandler = this.forceUpdateHandler.bind(this); }; componentWillUpdate() { console.info('componentWillUpdate called'); } componentDidUpdate() { console.info('componentDidUpdate called'); } forceUpdateHandler(){ this.forceUpdate(); }; render(){ return( <p> <button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button> <h4>Random Number : { Math.random() }</h4> </p> ); } } ReactDOM.render(<App />, document.getElementById('app'));
相關推薦:
React組件Dragact 0.1.4詳解
React組件生命周期實例分析
React組件的生命周期函數是什么
以上就是React組件生命周期詳解的詳細內容,更多請關注php中文網其它相關文章!