ReactNative从入门到实战三:生命周期

     从环境搭建到开发运行这两个流程都跑通了，那么接下来我们需要开发了，入门虽然简单，但是我认为我们还是必须要理解RN的生命周期才可以将RN运用的更加的灵活。

这里我记录了我们之前学习的过程，作为笔记供以后参考。好，辣么我们下面进入正题！

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

构建期

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

1、constructor(低版本React是getDefaultProps跟getInitialState,V2.*以上版本都是在constructor中设置)

2、componentWillMount

3、render

4、componentDidMount

constructor

构造函数,每个RN组件都会先执行constructor，在该函数体内，你可以初始化state和一些公共配置

componentWillMount

该方法在首次渲染之前调用，也是再 render 方法调用之前修改 state 的最后一次机会。

render

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

    1.只能通过 this.props 和 this.state 访问数据（不能修改）

    2.可以返回 null,false 或者任何React组件

    3.只能出现一个顶级组件，不能返回一组元素

    4.不能改变组件的状态

    5.不能修改DOM的输出

render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。

componentDidMount

该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

---

执行期

此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用

1、componentWillReceiveProps

2、shouldComponentUpdate

3、componentWillUpdate

4、render

5、componentDidUpdate

componentWillReceiveProps

组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

shouldComponentUpdate

如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

该方法是非必须的，并且大多数情况下没有在开发中使用。

componentWillUpdate

这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。

componentDidUpdate

这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

---

以上就是RN的生命周期了，这里我们掌握了生命周期后，辣么下一篇我们将会讲到state跟props

参考网址:

https://reactjs.org/docs/react-component.html#componentwillreceiveprops

https://segmentfault.com/a/1190000004168886

转载请注明出自：http://www.mrco.cn/article/59f0506ed33deffa4b532589.html