一、使用环境
- Mac 电脑 系统10.14.2
- Xcode9.4
- react-native-cli版本 2.0.1
- react-native: 0.57.3
- webstorm
二、ReactNative提供了哪些组件
基础组件
View 基础组件
Text 文本组件
Image 图片组件
TextInput 输入框组件
ScrollView 滚动组件
StyleSheet CSS布局组件交互组件
Button 按钮组件
Picker 选择器组件
Slider 滑动组件
Switch开关组件列表组件
FlatList 高性能的滚动列表组件
SectionList 类似FlatList，但是多了分组显示
更多组件使用查看ReactNative组件与API
三、ReactNative组件的生命周期
- 任何组件都具有生命周期,而掌握生命周期的流程是我们程序搬运工的基本素质;
- ReactNative组件生命周期可大致分为三个阶段创建、运行、销毁
1.创建阶段,组件实例化阶段
调用顺序如下:
1.1 在实例化组件的时候调用构造函数constructor
- 调用一次
- 可以初始化数据state
- 注意需要加 super.props(); 初始化父类
//1.初始化调用 一次
constructor(props) {
super(props);
this.state = {
age: 0,
name: '生命周期',
}
console.warn('调用constructor');
}
1.2 即将加载组件的时候调用 componentWillMount
- 调用一次
- render()之前调用
- 该函数适合于需要在本地读取一些数据用于显示
//2.即将加载组件调用 一次
componentWillMount(): void {
console.warn('调用componentWillMount');
}
1.3 渲染组件render
- 多次调用
- 对state变量与属性进行检查, 重新渲染时候调用这个方法
- 如果不想渲染页面,可以返回null 或者false
//3.渲染组件调用 多次
render() {
console.warn('调用render()');
return (
<View>
<Button title={'刷新页面'} onPress={()=>{
this.changeAgeEvent();
}}></Button>
<Text>年龄:{this.state.age}</Text>
</View>
)
}
1.4 加载组件完成的时候调用componentDidMount
- render()之后,调用一次
- 一般可以用作发送网络请求
// 4.组件加载完成调用 一次
componentDidMount(): void {
console.warn('调用componentDidMount');
}
创建阶段效果:
image.png
2. 运行阶段
2.1 componentWillReceiveProps
扫描二维码关注公众号，回复：
5200095 查看本文章
- 当props(属性)发生改变或者接受到新的props时，该函数被调用，并接受一个输入参数，类型为Object，存放新的props，可以通过this.props访问
- 作用: 拦截props属性并操作
- 在这个函数中改变state, 不会立即渲染,需等方法执行完毕一起渲染
//5.改变属性时候调用props
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
console.warn('调用componentWillReceiveProps');
}
2.2 shouldComponentUpdate
- 需要刷新组件的时候,比如改变props/state时候调用
- 控制是否刷新组件,调用render(), 返回false不调用
- 如果不进行渲染，那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行
- 系统默认是true
// 6.需要刷新组件的时候调用,比如改变props/state 控制是否刷新组件
shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
console.warn('shouldComponentUpdate');
return true;
}
2.3 componentWillUpdate
- 组件即将更新时候调用
- shouldComponentUpdate返回true 才会调用
- 尽量不要调用this.setState()与改变props,易造成死循环
// 7.组件即将刷新
componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
console.warn('调用componentWillUpdate');
}
2.4 componentDidUpdate
- 在重新渲染render之后调用
- shouldComponentUpdate返回true 才会调用
- 尽量不要调用this.setState()与改变props,易造成死循环
// 8. 组件刷新之后
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
console.warn('调用componentDidUpdate');
}
运行阶段调用效果
image.png
3. 销毁/卸载组件阶段
componentWillUnmount
- 组件即将销毁的时候调用
- 作用: 移除观察者,清楚数据等
//9. 组件即将销毁的时候调用, 清楚数据
componentWillUnmount(): void {
console.warn('调用componentWillUnmount');
}
4.其他方法
componentDidCatch
- render函数渲染出错,调用该函数
- 作用: 收集错误信息
//10. render出错调用该函数
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
console.warn('调用componentDidCatch')
}
5.生命周期完整流程
image.png
完整生命周期代码
class LifeCycleComponent extends Component {
//1.初始化调用 一次
constructor(props) {
super(props);
this.state = {
age: 0,
name: '生命周期',
}
console.warn('调用constructor');
}
//2.即将加载组件调用 一次
componentWillMount(): void {
console.warn('调用componentWillMount');
}
//3.渲染组件调用 多次
render() {
console.warn('调用render()');
return (
<View>
<Button title={'刷新页面'} onPress={()=>{
this.changeAgeEvent();
}}></Button>
<Text>年龄:{this.state.age}</Text>
</View>
)
}
// 4.组件加载完成调用 一次
componentDidMount(): void {
console.warn('调用componentDidMount');
}
// 方法 改变state age
changeAgeEvent(){
//按钮点击一次 改变状态中age的值,进行一次render()
this.setState((prevState, callback)=>{
return{age: prevState.age +1}
});
}
//5.改变属性时候调用props 没有顺序
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
console.warn('调用componentWillReceiveProps');
}
// 6.需要刷新组件的时候调用,比如改变props/state 控制是否刷新组件
shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
console.warn('调用shouldComponentUpdate');
return true;
}
// 7.组件即将刷新
componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
console.warn('调用componentWillUpdate');
}
// 8. 组件刷新之后
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
console.warn('调用componentDidUpdate');
}
//9. 组件即将销毁的时候调用, 清楚数据
componentWillUnmount(): void {
console.warn('调用componentWillUnmount');
}
//10. render出错调用该函数
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
console.warn('调用componentDidCatch')
}
}
其他资料
ReactNative从零开始笔记1-初始化项目
ReactNative从零开始笔记2-组件的生命周期
ReactNative从零开始笔记3-state(状态)与props(属性)
ReactNative从零开始笔记4-PropTypes使用
ReactNative从零开始笔记5-组件传值(父子组件/兄弟组件)
ReactNative从零开始笔记6-导航页面传值（正传和逆传）