React-Native生命周期的触发场景和一些小建议

转载请注明出处：王亟亟的大牛之路

把王者荣耀删了后这几天回到了举铁，遛鸟，打球，睡觉的正常节奏，然后卡了看之前写的一些东西，发现生命周期没写，那么就补一篇（虽然搜搜一大堆，但是残缺总不合适，再加点建议点那就和别人的不同了）

老规矩案例地址：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 中，最常使用的两个。当然啦，还有其它的部分，那就交给客官们自行研究和推敲它们的使用时机咯！

有问题可以微信联系，当然得注明来意，不添加备注不会通过，谢谢（私人微信 非诚勿扰）



以后会同步微信发布，扫麦麦的码可以关注