微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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 中,最常使用的两个。当然啦,还有其它的部分,那就交给客官们自行研究和推敲它们的使用时机咯!

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐