当应用启动，React Native 在内存中维护着一个虚拟 DOM，组件的生命周期就是指组件初始化并挂载到虚拟 DOM 为起始，到组件从虚拟 DOM 卸载为终结。生命周期的方法就是组件在虚拟DOM中不同状态的描述。
RN组件的生命周期
从上图所示，组件的生命周期分为三个阶段，分别是挂载（mounting）、更新（updating）和卸载（Unmounting），其中挂载和更新阶段都会调用rander方法进行绘制。
挂载
挂载指的是组件的实例被创建并插入到DOM中，挂载会调用如下方法：
constructor()
constructor() 方法是 RN 组件的构造方法，它在 RN 组件被加载前先被调用。当我们的组件继承自React.Component 类时，需要在构造方法中最先调用 super(props) 。如果不需要初始化 state，则不需要实现构造方法。
在构造方法中初始化state，如下所示：
constructor(props) {
super(props);
this.state = {
text: '构造方法'
};
}
componentWillMount()
componentWillMount() 方法在挂载前被立即调用。它在 render() 方法前被执行，因此，在 componentWillMount() 方法中设置 state 并不会导致重新被渲染。它只会被执行一次，通常情况下，建议使用 constructor() 方法来代替它。
render()
该方法是必须的，一旦调用，则会去检查 this.props 和 this.state 的数据并返回一个 React 元素。 render() 方法中不应该修改组件的 props 和state，因为 render() 是“纯洁的”，这意味着每次调用该方法时都会返回相同的结果。render() 方法在更新阶段也会被调用，前提是 shouldComponentUpdate() 方法返回true。
componentDidMount()
componentDidMount() 方法在组件被挂载后立即调用，在 render() 方法后被执行。开发者可以在这个方法中获取其中的元素或者子组件，需要注意的是，子组件的 componentDidMount() 方法会在父组件的 componentDidMount() 方法之前调用。
如果需要从网络加载数据显示到界面上，在这里进行网络请求是一个不错的选择。在 componentDidMount() 中设置 state 将会被重新渲染。
更新
改变 props 或者 state 时可以导致更新，当一个组件被重新渲染时，会调用如下方法:
componentWillReceiveProps(nextProps)
componentWillReceiveProps() 方法会在挂载的组件接收到新的 props 时被调用，它接收一个 Object 类型参数 nextProps ，表示新的 props 。通常在这个方法中接收新的 props 值，并根据 props 的变化，通过调用 this.setState() 来更新组件 state ，this.setState() 不会触发 render() 方法的调用。
在挂载的过程中，初始的 props 并不会触发调用 componentWillReceiveProps() 方法，这个方法只会在组件中的 props 更新时被调用，另外，调用 this.setState() 也不会触发调用 componentWillReceiveProps() 。
shouldComponentUpdate(nextProps, nextState)
当组件接收到新的 props 和 state 时，shouldComponentUpdate() 方法被调用，它接收两个Object参数，nextProps 是新的 props，nextState 是新的 state。
shouldComponentUpdate() 方法默认返回 true，用来保证数据变化时，组件能够重新渲染。你也可以重载这个方法，通过检查变化前后 props 和 state ，来决定组件是否需要重新渲染。如果返回false，则组件不会被重新渲染，也不会调用本方法后面的 componentWillUpdate() 和componentDidUpdate() 方法。
componentWillUpdate(nextProps, nextState)
如果组件 props 或者 state 改变，并且此前的 shouldComponentUpdate() 方法返回为 true，则会调用该方法。componentWillUpdate() 方法会在组件重新渲染前被调用，因此，可以在这个方法中为重新渲染做一些准备工作。需要注意的是，在这个方法中，不能使用 this.setState 来更改 state ，如果想要根据 props 来更改 state ，需要在 componentWillReceiveProps() 方法中去实现，而不是在这里。
componentDidUpdate(prevProps, prevState)
组件重新渲染完成后会调用 componentDidUpdate() 方法。两个参数分别是渲染前的 props 和渲染前的 state。这个方法也适合写网络请求，比如可以将当前的 props 和 prevProps 进行对比，发生变化则请求网络。
卸载
卸载就是从 DOM 中删除组件，会调用如下方法:
componentWillUnmount()
componentWillUnmount() 方法在组件卸载和销毁之前被立即调用。可以在这个方法中执行必要的清理工作，比如，关掉计时器、取消网络请求、清除组件装载中创建的 DOM 元素等等。
网友评论