首頁 > web前端 > js教程 > 主體

React Native元件的生命週期多長

php中世界最好的语言
發布: 2018-04-18 11:32:35
原創
1342 人瀏覽過

這次帶給大家React Native元件的生命週期多長,React Native元件生命週期的注意事項有哪些,下面就是實戰案例,一起來看一下。

這裡有一篇React Native元件生命週期簡介為大家帶來,相信這對於大家在React Native元件時候會有很大的幫助,感興趣的下面一起來看看。

就像 Android 開發中的 View 一樣,React Native(RN) 中的元件也有生命週期(Lifecycle)。所謂生命週期,就是一個物件從開始生成到最後消亡所經歷的狀態,理解生命週期,是合理開發的關鍵。 RN 元件的生命週期整理如下

如圖,可以把元件生命週期大致分成三個階段:

  • # 第一階段:是元件第一次繪製階段,如圖中的上面虛線框內,在這裡完成了元件的載入和初始化;

  • 第二階段:是元件在運行和交互階段,如圖中左下角虛線框,這個階段組件可以處理用戶交互,或者接收事件更新界面;

  • ##第三階段:是元件卸載消亡的階段,如圖中右下角的虛線框中,這裡做一些元件的清理工作。

生命週期

回呼函數

以下來詳細介紹生命週期中的各回呼函數。

getDefaultProps

在元件建立之前,會先呼叫 getDefaultProps(),這是全域呼叫一次,嚴格來說,這不是元件的生命週期的一部分。在元件被建立並載入候,先呼叫 getInitialState(),來初始化元件的狀態。

componentWillMount

然後,準備載入元件,會呼叫 componentWillMount(),其原型如下:

void componentWillMount()
登入後複製
這個函數呼叫時機是在元件創建,並初始化了狀態之後,在第一次繪製 render() 之前。可以在這裡做一些業務初始化操作,也可以設定元件狀態。這個函數在整個生命週期中只被呼叫一次。

componentDidMount

在元件第一次繪製之後,會呼叫 componentDidMount(),通知元件已經載入完成。函數原型如下:

void componentDidMount()
登入後複製
這個函數呼叫的時候,其虛擬 DOM 已經建置完成,你可以在這個函數開始取得其中的元素或子元件了。需要注意的是,RN 框架是先呼叫子元件的 componentDidMount(),然後呼叫父元件的函數。從這個函數開始,就可以和 JS 其他框架互動了,例如設定計時 setTimeout 或 setInterval,或是發起網路請求。這個函數也是只被呼叫一次。這個函數之後,就進入了穩定運行狀態,等待事件被觸發。

componentWillReceiveProps

# 如果元件收到新的屬性(props),就會呼叫 componentWillReceiveProps(),其原型如下:

void componentWillReceiveProps( 
 object nextProps
)
登入後複製
輸入參數 nextProps 是即將被設定的屬性,舊的屬性還是可以透過 this.props 來取得。在這個回呼函數裡面,你可以根據屬性的變化,透過呼叫this.setState() 來更新你的元件狀態,這裡呼叫更新狀態是

安全性的,並不會觸發額外的render()調用。如下:

componentWillReceiveProps: function(nextProps) { 
 this.setState({
  likesIncreasing: nextProps.likeCount > this.props.likeCount
 });
}
登入後複製
shouldComponentUpdate

# 當元件接收到新的屬性和狀態改變的話,都會觸發呼叫 shouldComponentUpdate(...),函數原型如下:

boolean shouldComponentUpdate( 
 object nextProps, object nextState
)
登入後複製
輸入參數 nextProps 和上面的 componentWillReceiveProps 函數一樣,nextState 表示元件即將更新的狀態值。這個

函數的回傳值決定是否需要更新元件,如果 true 表示需要更新,繼續走後面的更新流程。否者,則不更新,直接進入等待狀態。

預設情況下,這個函數永遠回傳 true 用來保證資料變化的時候 UI 能夠同步更新。在大型專案中,你可以自己重載這個函數,透過檢查變化前後屬性和狀態,來決定 UI 是否需要更新,能有效提升應用程式效能。

componentWillUpdate

如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),其函数原型如下:

void componentWillUpdate( 
 object nextProps, object nextState
)
登入後複製

输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。

componentDidUpdate

调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:

void componentDidUpdate( 
 object prevProps, object prevState
)
登入後複製

因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState。

componentWillUnmount

当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),其函数原型如下:

void componentWillUnmount()
登入後複製

在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。

总结

到这里,RN 的组件的完整的生命都介绍完了,在回头来看一下前面的图,就比较清晰了,把生命周期的回调函数总结成如下表格:

生命周期 调用次数 能否使用 setSate()
getDefaultProps 1(全局调用一次)
getInitialState 1
componentWillMount 1
render >=1
componentDidMount 1
componentWillReceiveProps >=0
shouldComponentUpdate >=0
componentWillUpdate >=0
componentDidUpdate >=0
componentWillUnmount 1

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



以上是React Native元件的生命週期多長的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板