ReactNative从零开始笔记2-组件的生命周期

一、使用环境

  • Mac 电脑 系统10.14.2
  • Xcode9.4
  • react-native-cli版本 2.0.1
  • react-native: 0.57.3
  • webstorm
二、ReactNative提供了哪些组件

更多组件使用查看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

  • 当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-导航页面传值(正传和逆传)

推荐阅读更多精彩内容