转载请注明出处：王亟亟的大牛之路
把王者荣耀删了后这几天回到了举铁，遛鸟，打球，睡觉的正常节奏，然后卡了看之前写的一些东西，发现生命周期没写，那么就补一篇（虽然搜搜一大堆，但是残缺总不合适，再加点建议点那就和别人的不同了）
老规矩案例地址：https://github.com/ddwhan0123/Useful-Open-Source-Android（最近把时间选择器/日历这一块更新了好多内容）
React-Native控件的生命周期
| 方法名 | 作用 | 调用次数 |
|---|---|---|
| constructor | 构造函数，初始化需要的state | 1次 |
| componentWillMount | 控件渲染前触发 | 1次 |
| rander | 渲染控件的方法 | 多次 |
| componentDidMount | 控件渲染后触发 | 1次 |
| componentWillReceiveProps | 组件接收到新的props时被调用 | 多次 |
| shouldComponentUpdate | 当组件接收到新的props和state时被调用 | 多次 |
| componentWillUpdate | props或者state改变，并且此前的shouldComponentUpdate方法返回为 true会调用该方法 | 多次 |
| componentDidUpdate | 组件重新渲染完成后会调用此方法 | 多次 |
| componentWillUnmount | 组件卸载和销毁之前被调用 | 1次 |
各个生命周期触发过程
上图为demo效果图
初次加载
依次触发了父控件的构造函数，componentwillMount，render，子控件的构造函数，子控件的componentwillMount，render，componentwillMount，最后才是父控件的componentwillMount
可以看出，初次的渲染周期是从外向内逐步渲染，内部完成后才算整体结束。
UI 刷新
点击事件触发了页面的状态机放生了变化，我们来看看每一步做了什么
1.首先是用户的点击触发onPress={this.addPress}
2.这方法做了一个事，把事件和值传递给reducer this.props.dispatch(add(this.state.intvalue));
3.reducer把必然的结果算完后有了个新的nextProps.result并且触发shouldComponentUpdate(nextProps,nextState)方法
4.比对值确实不同所以shouldComponentUpdate(nextProps,nextState)方法的返回值为true
5.因为返回值为true所以主控件触发render()方法 (主控件没复写componentWillUpdate()和componentDidUpdate()两个方法)
6.因为父控件给子控件传递的值正好也变了也就触发了子控件的刷新方法
<SonComponent sonValue={this.state.showText.data + this.state.intvalue}/>
然后走了一圈一摸一样的流程完成了刷新
卸载姿势
卸载方法也是从外向内触发，点Home键不会触发（至少当前不触发），双击返回键会触发（任务中心关闭也没触发）。
这次的demo在上次redux的demo基础上做的修改，主要是阐明子组件和父组件的关系，源码地址：https://github.com/ddwhan0123/ReduxDemo
在各个生命周期建议做的事
constructor()方法里初始化state
componentDidMount()方法里跑网/耗时操作
componentWillMount()可在方法里对state进行最后的修改
注意，不要在 constructor 或者 render 里 setState()，這是因为 constructor 已含 this.state={} ，而 render 里 setState 会造成setState -> render -> setState -> render
能做的setState，只要是render前，就放在componentWillMount，render后，就放在 componentDidMount。這两个 function 是 react lifecycle 中，最常使用的两个。当然啦，还有其它的部分，那就交给客官们自行研究和推敲它们的使用时机咯！
有问题可以微信联系，当然得注明来意，不添加备注不会通过，谢谢（私人微信 非诚勿扰）
以后会同步微信发布，扫麦麦的码可以关注
