ReactNative Component 生命周期

ReactNative Component 生命周期

生命周期方法

    //
    // Component Specs and Lifecycle
    // ----------------------------------------------------------------------

    interface ComponentLifecycle<P, S> {
        componentWillMount?(): void;
        componentDidMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, prevContext: any): void;
        componentWillUnmount?(): void;
    }

生命周期方法调用

组件在初始化时会触发5个钩子函数：

1. getDefaultProps()
   设置默认的props，es6中用dufaultProps设置组件的默认属性。这个函数在组件被创建时调用一次。它的返回值会成为this.props的初始值。在这之后，如果父组件指定了组件的props中的某些值，这些值将会与this.props的初始值合并，如果有相同的键，父组件指定的键将覆盖初始值的键。
   getDefaultProps()返回的任何复杂对象都将会在组件的各个实例间共享，而不是每个实例拥有一个拷贝。
2. getInitialState()
   在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。
3. componentWillMount()
   在React Native组件的生命周期中，组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次。它在初始渲染（render函数被React Native框架调用执行）前被执行，当它执行之后，render函数会马上被React Native框架调用执行。如果在这个函数里调用setState函数改变了某些状态机变量的值，React Native框架不会执行渲染操作，而是等待这个函数执行完成后再执行初始渲染。
   React Native组件的子组件也有componentWillMount函数，并且会在父组件的componentWillMount函数之后被调用。
   这个函数无参数并且不需要任何返回值。
   如果开发者需要从本地存储中读取数据用于显示，那么在这个函数里进行读取是一个很好的时机。
4. render()
   react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
5. componentDidMount()
   在React Native组件的生命周期中，这个函数只会被执行一次。它在初始渲染执行完成后会马上被调用。可以通过this.getDOMNode()获取和操作dom节点。
   React Native组件的子组件也有componentDidMount函数，并且会在父组件的componentDidMount函数之前被调用。在React Native组件生命周期的这个时间点之后，开发者可以通过子组件的引用来访问、操作任何子组件。
   这个函数无参数并且不需要任何返回值。
   如果React Native应用需要在程序启动显示初始界面后从网络侧获取数据，那么把从网络侧获取数据的代码放在这个函数里是一个不错的选择。

在更新时也会触发5个钩子函数：

1. componentWillReceivePorps(nextProps)
   React Native组件的初始渲染执行完成后，当React Native组件接收到新的props时，这个函数将被调用。这个函数接收一个object参数，object里的是新的props。
   在这个函数中，老的props可以通过this.props访问，新的props在传入的object中。如果在这个函数中通过调用this.setState函数改变某些状态机变量的值，React Native框架不会执行对这些状态机变量改变的渲染，而是等componentWillReceiveProps函数执行完成后一起渲染。
2. shouldComponentUpdate(nextProps, nextState)
   react性能优化非常重要的一环。React Native组件的初始渲染执行完成后，当React Native组件接收到新的props或者state时，这个函数将被调用。这个函数接收两个object参数，其中第一个是新的props，第二个是新的state。我们可以设置在此对比前后两个props和state是否相同，然后返回一个布尔值，告诉React Native框架针对这次改变，React Native是否需要重新渲染本组件。如果相同则返回false阻止更新（相应的本组件的componentWillUpdate和componentDidUpdate函数也不会被调用），因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤（例如在componentWillReceivePorps中强制更新则会跳过此函数）。
   React Native组件默认的shouldComponentUpdate函数总是返回true值。如果开发者遵从了“视状态机变量为‘不可变的常量’”这个开发规则，那么开发者可以提供自己的shouldComponentUpdate，在函数中比较新老版本的state和props，判断是否需要进行重新渲染。
   通过这个函数来阻止无必要的重新渲染，是提高React Native应用程序性能的一大技巧。
3. componentWillUpdate(nextProps, nextState)
   React Native组件的初始渲染执行完成后，React Native框架在重新渲染React Native组件前会调用这个函数。开发者可以在这个函数中为即将发生的重新渲染做一些准备工作，但开发者不能在这个函数中通过this.setState再次改变状态机变量的值。如果需要改变，则在componentWillReceiveProps函数中进行改变。
   重新render()
4. componentDidUpdate(preProps, preState)
   React Native组件的初始渲染执行完成后，React Native框架在重新渲染React Native组件后会调用这个函数。此时可以获取dom节点。
   传入的两个参数是渲染前的props和state。
5. componentWillUnmount()
   组件将要卸载时调用，一些事件监听和定时器需要在此时清除。