最近工作一直很忙，一是在调研ReactNative相关的东西，还有就是正在学习python，一个做Android开发的，学python干嘛？我以前也是这么想，现在发觉，确实有用，不论是测试还是爬虫，学会了python不求人，之后如果有机会我也会分享一些关于python的基本语法啥的。
言归正传，这次还是说ReactNative。

---

生命周期

说到生命周期，做过Android或iOS开发的同学，肯定会明白，就是onStart，onCreate什么的。RN中的组件也是有生命周期的，所谓生命周期，就是一个组件从开始生成到最后消亡所经历的状态。
来一张经典的图看看：

如图，可以把组件生命周期大致分为三个阶段，下面详细讲解一下。

第一阶段

这部分主要是第一次绘制阶段，你可以理解为初始化阶段，这里主要有5个方法：

getDefaultProps

组件实例创建前调用，多个实例间共享引用。父组件传过的Props在这里被接受。

getInitalState

组件示例创建的时候调用的第一个函数。在这里可以给state进行赋值

这里简单介绍一下,state与props的区别，props主要是从父组件中传入的参数，state是组件内部的属性，可以用坐标值位，或者组件内数据的标识，关于这两个属性的基本知识，可以往下看，会有更详细的解释。

componentWillMount

在render前，getInitalState之后调用。这个函数在整个生命周期中只被调用一次,用作改变state的状态。

render

组件渲染函数，会返回一个Virtual DOM，只允许返回一个最外层容器组件。在这里实现组件的布局，只渲染组件，不修改状态不执行逻辑操作。

componentDidMount

在render渲染之后，通知组件已经加载完成。RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。

第二阶段

这时已经进入了稳定阶段，是是组件在运行和交互阶段，这个阶段组件可以处理用户交互，或者接收事件更新界面。

componentWillReceiveProps

props改变 主要是父容器的改变将会调用该函数。新的props将会作为参数传递进来，老的props可以根据this.props来获取。我们可以在该函数中对state作一些处理。

注意：在该函数中更新state不会引起二次渲染。

shouldComponentUpdate

该函数传递过来两个参数，新的state和新的props。state和props的改变都会调到该函数。该函数主要对传递过来的nextProps和nextState作判断。如果返回true则重新渲染，如果返回false则不重新渲染。在某些特定条件下，我们可以根据传递过来的props和state来选择更新或者不更新，从而提高效率。

对于，当参数更新的时候，需要进行部分改变的需求，可以在这里实现。比如你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

componentWillUpdate

与componentWillMount方法类似，组件上会接收到新的props或者state渲染之前，调用该方法。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。

render

不多说了，跟初始化的时候功能一样。

componentDidUpdate

和初始化时期的componentDidMount类似，在render之后，真实DOM生成之后调用该函数。传递过来的是当前的props和state。

第三阶段

这就是消亡的阶段，主要进行清理和释放的工作。
这个阶段只有一个方法：

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()。在这里进行一些相关的销毁操作，比如定时器，监听等等。

props和state

相同点

• 这俩的改变都会引起重新渲染
• 都可以用作组件渲染的数据来源

不同点：

• state的初始值来自于自身内部的设置，props来自于父组件传递进来或者自身getDefaultProps（若key相同前者可覆盖后者）。

• state只能在自身组件中setState，不能由父组件修改；props只能由父组件修改，不能在自身组件修改。

• props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件；state代表的是一个组件内部自身的状态，只能在自身组件中存在。

总结

这篇文章主要是对ReactNative的一些基础概念进行总结，如果感兴趣的同学，可以重写这些方法，打印log或者toast，进行比对。

---

如果你也做ReactNative开发，并对ReactNative感兴趣，欢迎关注我的公众号，加入我们的讨论群：