2020-11-24

react-native  组件的生命周期

 

 

 

 

组件生命周期

调用顺序：

1.1 构造函数(constructor)

1、第一个语句必须是super(props)。

2、contructor将在任意一个RN组件被加载之前优先调用，并且只会调用一次。

3、该函数最大的作用是定义该组件当中需要使用的状态机变量 。

constructor(props) {
    super(props);
    this.myProperty1 = 'test';
    this.myProperty2 = true;
    this.state = {//定义状态机变量
    inputedNum: '',
    inputedPW: ''
    };
    this.updatePW = this.updatePW.bind(this);
    this.jumpToWaiting = this.jumpToWaiting.bind(this);
}
复制代码

1.2 componentWillMount

1、该函数原型为componentWillMount()

2、该函数整个过程中只执行一次

3、该函数会在初始渲染前执行，即在render被调用之前调用

4、该函数执行后render就会调用。

5、如果在render中改变了某些状态机变量，那么RN不会执行渲染，而是等待该函数执行完毕后再次渲染。

6、子组件中同样拥有该方法，并会在父组件执行完毕后执行，该函数无返回值。

7、该函数适合于需要在本地读取一些数据用于显示，那么在render执行前调用是一个很好的时机。

1.3 render(渲染函数)

1、调用该方法，先对状态机变量与属性进行检查。

2、如果开发者不想渲染界面的话，可以在此处返回null或者false。

3、该方法适用于进行界面的JSX代码编写，因此不适合在此处对状态机变量进行修改或者访问服务器。

1.4 componentDidMount

1、该函数会在render渲染完毕之后调用，整个过程只执行一次。

2、该函数执行后，开发者就可以对界面上的组件或者子组件进行各种操作了。

3、该函数的应用场景适用于在移动端应用启动之后需要访问网络进行某些数据获取。

截止到此处，一个RN应用基本上启动运行了，接下来将处在运行中状态：

1.5 componentWillReceiveProps

1、该函数的原型为componentWillReceiveProps(nextProps);

2、当props(属性)发生改变或者接受到新的props时，该函数被调用，并接受一个输入参数，类型为Object，存放新的props，原先反生改变的旧的props仍然可以通过this.props访问。

3、该函数在RN初次被渲染的时候不会被调用。

4、如果在该函数当中对状态机变量进行了修改，RN不会立即渲染页面，而是会等待该方法执行完毕后一起渲染。

1.6 shouldComponentUpdate:（组件是否需要更新）

1、该函数原型 : boolean shouldComponentUpdate(nextProps,nextState);

2、当props(属性)或者状态(state)发生改变的时候会触发该函数，分别对应接收的两个参数，根据返回的布尔值来决定是否需要对页面进行重新渲染，如果不进行渲染，那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。

3、该函数默认会返回true。

4、应用场景：可以在该函数中编写一些逻辑来判断渲染类型，来阻值一些没有必要的重新渲染，达到提升应用运行效率的目的。

1.7 componentWillUpdate

1、该方法原型与上一方法相同，在重新渲染前会调用该方法，为渲染进行准备工作。

2、该函数无返回值。

3、注意：在该方法中，不应该对状态机变量进行修改，要改变，也应该在1.1.5当中进行。

1.8 componentDidUpdate

该函数会在重新渲染render之后调用，传入上个方法必须的两个参数即可。

1.9 componentWillUnmount:

该方法会在RN卸载之前调用，无参无返回值，在该方法中，需要对该组件当中申请或者订阅的某些资源与消息进行释放。 父子组件渲染顺序，或者方法执行顺序，下面的是介绍，主要看图一目了然😂~

默认渲染流程

先执行父视图渲染前的操作constructor(), componentWillMount()，至渲染方法render(), 然后会开始初始化子视图，即执行子视图的constructor,componentWillMount(),紧接着render,然后，子视图渲染完毕后，开始执行componentDidMount(),渲染完毕子视图后渲染父视图，然后执行父视图的componentDidMount（）；再有子视图类推。

(注意：网络请求不要再willMount中请求，如果界面复杂，可能会在渲染完毕之前回调，推荐在componentDidMount中使用)

状态发生改变的流程

当属性发生变化的时候，类似上面，先收到消息componentWillReceiveProps，然后判断是否渲染shouldComponentUpdate，接着将要渲染componentDidUpdate,然后render，接下来开始准备渲染子视图，开始收到消息componentWillReceiveProps，然后判断是否渲染shouldComponentUpdate，接着将要渲染componentDidUpdate,然后render，最后回调子视图的componentDidUpdate(),再接着父视图的componentDidUpdate();

父子组件渲染流程：

父组件:componentWillMount->render->componentDidMount

父子组件：componentWillMount(父)->componentWillMount(子)->render->componentDidMount(子)->componentDidMount(父)