這次帶給大家React Native元件的生命週期多長,React Native元件生命週期的注意事項有哪些,下面就是實戰案例,一起來看一下。
這裡有一篇React Native元件生命週期簡介為大家帶來,相信這對於大家在React Native元件時候會有很大的幫助,感興趣的下面一起來看看。
就像 Android 開發中的 View 一樣,React Native(RN) 中的元件也有生命週期(Lifecycle)。所謂生命週期,就是一個物件從開始生成到最後消亡所經歷的狀態,理解生命週期,是合理開發的關鍵。 RN 元件的生命週期整理如下
如圖,可以把元件生命週期大致分成三個階段:
# 第一階段:是元件第一次繪製階段,如圖中的上面虛線框內,在這裡完成了元件的載入和初始化;
第二階段:是元件在運行和交互階段,如圖中左下角虛線框,這個階段組件可以處理用戶交互,或者接收事件更新界面;
void componentWillMount()
void componentDidMount()
void componentWillReceiveProps( object nextProps )
componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); }
boolean shouldComponentUpdate( object nextProps, object 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中文網其他相關文章!