react-native学习过程-生命周期的理解

react-native出来已经好久，我也是从年前开始学习的，由于工作项目紧张的原因，学习的进度有点慢，最近想从新整理跟进一下，一是后面项目可能会用到，同时也是对自己技术的提升。

react-native的环境安装

react-native的环境安装我就不多说了，虽然经过了很多坑，总算是完成，建议开发react-native还是入手一本mac,开发起来会好方便。开发效率soso的。
react-native官网地址
react-native中文社区

编译器的选择

不管做任何开发都需要一款好的编译器，react-native官网推荐使用webstorm或者sublime text。这两款软件我都用过，但是由于在慕课网学习的过程，老师使用的是sublime text,为了呵老师同步，所以后面的学习中也会继续使用sublime text,但是个人认为两者开发都挺不错的，完全看个人的习惯了。

一下是我列出的sublime text的一些安装

• 包管控制 package control

    1.在sublime text中control +~ 打开命令输入官网安装命令
    2.安装完成按住，command+shift+p打开安装窗口
  
    3.输入pci 选中package control install 回车
    4.输入想要安装的插件回车即可
  

• 插件的安装
  1.babel
  2.sublimelinter js语法检查
  3.sublimelinter-contrib-eslint eslint的检查
  4.sublimelinter-jsxhint
  安装之后可以设置jsx语法的高亮，方法如下
  view-syntax-babel-javascript设置高亮

    5.gitgutter git文件仓库代码修改检查
  

• 安装全局eslint检查
  eslint安装说明

    输入如下命令-是用淘宝的源
    npm install -g eslint babel -eslint --registry=http://registry.npm.taobao.org
  

生命周期

现在你可以在本地react-native init projectName 初始化一个项目啦，让我们来看看react-native他的生命周期吧。

安装

• 首先是安装过程中react-native他组建调用的生命周期

1.(获取组建属性)getDefaultProps
2.(初始状态）getInitialState()获取组建的状态值---组建挂载之前调用一次
3.(组建将要挂载)componentWillMount()
4.(渲染)render()
5.(组建已经准备完成)compenentDidMount()

• 然后是组建运行时生命周期
  这中间可能包含两种变化
  1.组建数据刷新或者变化引起的组建刷新的过程
  2.外部传入的属性的时候刷新

1.组建状态变化之后
*(判断组建是否需要更新)shoudComponentUpdate()
*(上面返回true通知下一套更新)compenentWillUpdate()
*(重新渲染)render()
*(完成更新)componentDidUpdate()

2.外部组件传递属性props,属性变化，子组建也需要变化
*(外部props发生变化->)compentWillReceiveProps()
*(判断组建是否需要更新)shoudComponentUpdate()
..........
和上面组建状态变化一样

卸载

1(卸载组建).unMount()
2.(结束的时候，可以处理清除工作)componentWillUnMount()

附图一张，来自慕课网

lifecycle.png