一宪潮、使用環(huán)境
- Mac 電腦 系統(tǒng)10.14.2
- Xcode9.4
- react-native-cli版本 2.0.1
- react-native: 0.57.3
- webstorm
二、ReactNative提供了哪些組件
基礎(chǔ)組件
View 基礎(chǔ)組件
Text 文本組件
Image 圖片組件
TextInput 輸入框組件
ScrollView 滾動組件
StyleSheet CSS布局組件列表組件
FlatList 高性能的滾動列表組件
SectionList 類似FlatList梯轻，但是多了分組顯示
更多組件使用查看ReactNative組件與API
三尽棕、ReactNative組件的生命周期
- 任何組件都具有生命周期,而掌握生命周期的流程是我們程序搬運工的基本素質(zhì);
- ReactNative組件生命周期可大致分為三個階段創(chuàng)建、運行滔悉、銷毀
1.創(chuàng)建階段,組件實例化階段
調(diào)用順序如下:
1.1 在實例化組件的時候調(diào)用構(gòu)造函數(shù)constructor
- 調(diào)用一次
- 可以初始化數(shù)據(jù)state
- 注意需要加 super.props(); 初始化父類
//1.初始化調(diào)用 一次
constructor(props) {
super(props);
this.state = {
age: 0,
name: '生命周期',
}
console.warn('調(diào)用constructor');
}
1.2 即將加載組件的時候調(diào)用 componentWillMount
- 調(diào)用一次
- render()之前調(diào)用
- 該函數(shù)適合于需要在本地讀取一些數(shù)據(jù)用于顯示
//2.即將加載組件調(diào)用 一次
componentWillMount(): void {
console.warn('調(diào)用componentWillMount');
}
1.3 渲染組件render
- 多次調(diào)用
- 對state變量與屬性進行檢查, 重新渲染時候調(diào)用這個方法
- 如果不想渲染頁面,可以返回null 或者false
//3.渲染組件調(diào)用 多次
render() {
console.warn('調(diào)用render()');
return (
<View>
<Button title={'刷新頁面'} onPress={()=>{
this.changeAgeEvent();
}}></Button>
<Text>年齡:{this.state.age}</Text>
</View>
)
}
1.4 加載組件完成的時候調(diào)用componentDidMount
- render()之后,調(diào)用一次
- 一般可以用作發(fā)送網(wǎng)絡(luò)請求
// 4.組件加載完成調(diào)用 一次
componentDidMount(): void {
console.warn('調(diào)用componentDidMount');
}
創(chuàng)建階段效果:
image.png
2. 運行階段
2.1 componentWillReceiveProps
- 當props(屬性)發(fā)生改變或者接受到新的props時回官，該函數(shù)被調(diào)用，并接受一個輸入?yún)?shù)笛坦，類型為Object苔巨，存放新的props，可以通過this.props訪問
- 作用: 攔截props屬性并操作
- 在這個函數(shù)中改變state, 不會立即渲染,需等方法執(zhí)行完畢一起渲染
//5.改變屬性時候調(diào)用props
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
console.warn('調(diào)用componentWillReceiveProps');
}
2.2 shouldComponentUpdate
- 需要刷新組件的時候,比如改變props/state時候調(diào)用
- 控制是否刷新組件,調(diào)用render(), 返回false不調(diào)用
- 如果不進行渲染侄泽，那么該方法后續(xù)的componentWillUpdate與componentDidUpdate都不會被執(zhí)行
- 系統(tǒng)默認是true
// 6.需要刷新組件的時候調(diào)用,比如改變props/state 控制是否刷新組件
shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
console.warn('shouldComponentUpdate');
return true;
}
2.3 componentWillUpdate
- 組件即將更新時候調(diào)用
- shouldComponentUpdate返回true 才會調(diào)用
- 盡量不要調(diào)用this.setState()與改變props,易造成死循環(huán)
// 7.組件即將刷新
componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
console.warn('調(diào)用componentWillUpdate');
}
2.4 componentDidUpdate
- 在重新渲染render之后調(diào)用
- shouldComponentUpdate返回true 才會調(diào)用
- 盡量不要調(diào)用this.setState()與改變props,易造成死循環(huán)
// 8. 組件刷新之后
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
console.warn('調(diào)用componentDidUpdate');
}
運行階段調(diào)用效果
image.png
3. 銷毀/卸載組件階段
componentWillUnmount
- 組件即將銷毀的時候調(diào)用
- 作用: 移除觀察者,清楚數(shù)據(jù)等
//9. 組件即將銷毀的時候調(diào)用, 清楚數(shù)據(jù)
componentWillUnmount(): void {
console.warn('調(diào)用componentWillUnmount');
}
4.其他方法
componentDidCatch
- render函數(shù)渲染出錯,調(diào)用該函數(shù)
- 作用: 收集錯誤信息
//10. render出錯調(diào)用該函數(shù)
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
console.warn('調(diào)用componentDidCatch')
}
5.生命周期完整流程
image.png
完整生命周期代碼
class LifeCycleComponent extends Component {
//1.初始化調(diào)用 一次
constructor(props) {
super(props);
this.state = {
age: 0,
name: '生命周期',
}
console.warn('調(diào)用constructor');
}
//2.即將加載組件調(diào)用 一次
componentWillMount(): void {
console.warn('調(diào)用componentWillMount');
}
//3.渲染組件調(diào)用 多次
render() {
console.warn('調(diào)用render()');
return (
<View>
<Button title={'刷新頁面'} onPress={()=>{
this.changeAgeEvent();
}}></Button>
<Text>年齡:{this.state.age}</Text>
</View>
)
}
// 4.組件加載完成調(diào)用 一次
componentDidMount(): void {
console.warn('調(diào)用componentDidMount');
}
// 方法 改變state age
changeAgeEvent(){
//按鈕點擊一次 改變狀態(tài)中age的值,進行一次render()
this.setState((prevState, callback)=>{
return{age: prevState.age +1}
});
}
//5.改變屬性時候調(diào)用props 沒有順序
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
console.warn('調(diào)用componentWillReceiveProps');
}
// 6.需要刷新組件的時候調(diào)用,比如改變props/state 控制是否刷新組件
shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
console.warn('調(diào)用shouldComponentUpdate');
return true;
}
// 7.組件即將刷新
componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
console.warn('調(diào)用componentWillUpdate');
}
// 8. 組件刷新之后
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
console.warn('調(diào)用componentDidUpdate');
}
//9. 組件即將銷毀的時候調(diào)用, 清楚數(shù)據(jù)
componentWillUnmount(): void {
console.warn('調(diào)用componentWillUnmount');
}
//10. render出錯調(diào)用該函數(shù)
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
console.warn('調(diào)用componentDidCatch')
}
}
其他資料
ReactNative從零開始筆記1-初始化項目
ReactNative從零開始筆記2-組件的生命周期
ReactNative從零開始筆記3-state(狀態(tài))與props(屬性)
ReactNative從零開始筆記4-PropTypes使用
ReactNative從零開始筆記5-組件傳值(父子組件/兄弟組件)
ReactNative從零開始筆記6-導(dǎo)航頁面?zhèn)髦担ㄕ齻骱湍鎮(zhèn)鳎?/a>
