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}/>

• 1

然后走了一圈一摸一样的流程完成了刷新

---

卸载姿势

 
卸载方法也是从外向内触发，点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 中，最常使用的两个。当然啦，还有其它的部分，那就交给客官们自行研究和推敲它们的使用时机咯！

二.props和state

上面讲完了生命周期，我们对props和state的不同点以及相同点作一个总结，加深大家理解。

相同点

1.不管是props还是state的改变，都会引发render的重新渲染。

2.都能由自身组件的相应初始化函数设定初始值。

不同点

1.初始值来源：state的初始值来自于自身的getInitalState（constructor）函数；props来自于父组件或者自身getDefaultProps（若key相同前者可覆盖后者）。

2.修改方式：state只能在自身组件中setState，不能由父组件修改；props只能由父组件修改，不能在自身组件修改。

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

以上总结盗用本站另一位小编的图来解释O(∩_∩)O~：

本章结束。打广告打广告了，喜欢全栈开发的猿友们，请不要忘记动手扫一扫下面的二维码关注我们哟O(∩_∩)O~。我们会继续不定期推出有关于全栈的相关文章，敬请期

作者：sidiWang
链接：https://www.jianshu.com/p/986bcbcd02aa
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。