React-Native生命周期的触发场景和一些小建议
转载请注明出处:王亟亟的大牛之路把王者荣耀删了后这几天回到了举铁,遛鸟,打球,睡觉的正常节奏,然后卡了看之前写的一些东西,发现生命周期没写,那么就补一篇(虽然搜搜一大堆,但是残缺总不合适,再加点建议点那就和别人的不同了) 老规矩案例地址:https://github.com/ddwhan0123/Useful-Open-Source-Android(最近把时间选择器/日历这一块更新了好多内容) React-Native控件的生命周期
各个生命周期触发过程上图为demo效果图 初次加载 依次触发了父控件的构造函数,componentwillMount,render,子控件的构造函数,子控件的componentwillMount,render,componentwillMount,最后才是父控件的componentwillMount 可以看出,初次的渲染周期是从外向内逐步渲染,内部完成后才算整体结束。 UI 刷新 点击事件触发了页面的状态机放生了变化,我们来看看每一步做了什么 1.首先是用户的点击触发 2.这方法做了一个事,把事件和值传递给reducer 3.reducer把必然的结果算完后有了个新的 4.比对值确实不同所以shouldComponentUpdate(nextProps,nextState)方法的返回值为true 5.因为返回值为true所以主控件触发render()方法 (主控件没复写componentWillUpdate()和componentDidUpdate()两个方法) 6.因为父控件给子控件传递的值正好也变了也就触发了子控件的刷新方法 <SonComponent sonValue={this.state.showText.data + this.state.intvalue}/>
然后走了一圈一摸一样的流程完成了刷新 卸载姿势 这次的demo在上次redux的demo基础上做的修改,主要是阐明子组件和父组件的关系,源码地址:https://github.com/ddwhan0123/ReduxDemo 在各个生命周期建议做的事constructor()方法里初始化state 注意,不要在 constructor 或者 render 里 setState(),這是因为 constructor 已含 this.state={} ,而 render 里 setState 会造成setState -> render -> setState -> render 有问题可以微信联系,当然得注明来意,不添加备注不会通过,谢谢(私人微信 非诚勿扰) 以后会同步微信发布,扫麦麦的码可以关注 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |