189 8069 5689

reactnative基础-创新互联

react native 的两个核心的属性控制改变组件:props和state。
props是在父组件中进行设置,只要设置完成那么在组件的生命周期就定死了,不会发生改变。
针对数据变化修改的情况,我们需要使用state属性;一般情况下,我们需要在constructor方法中初始化state,然后在你想要修改更新的时候调用setState方法。

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的雷山网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
方法名 作用 调用次数
constructor构造函数,初始化需要的state1次
componentWillMount控件渲染前触发1次
render渲染控件的方法多次
componentDidMount控件渲染后触发1次
componentWillReceiveProps组件接收到新的props时被调用多次
shouldCompentUpdate当组件接收到props和state时被调用多次
componentWillUpdateprops或者state改变,并且此前的shouldComponentUpdate为true会调用该方法多次
componentDidUpdate组件重新渲染完成后会调用此方法多次
componentWillUnmount组件卸载和销毁之前被调用1次

react native的组件的生命周期:
react native基础

从图中可以看出来组件的生命周期有三个阶段:
第一个阶段:初始化项目后,执行构造器,页面加载之后,第一次渲染页面,
第二个阶段:是组件的运行中阶段: 在这个阶段主要点就是:state状态的改变或者props属性的改变, 当state发生改变的时候,会调用shouldComponentUpdate()方法, 这个方法是返回是一个boolean类型,用于判定state状态是否改变,返回ture的时候,接下来将会执行componentWillUpdate()方法更新组件,然后再一次的执行render()方法,渲染页面,之后执行componentDidUpdate()方法,然后如果还有state状态发生改变的会就还是这个流程执行; 但 如果props属性发生改变的时候,就是触发componentWillReceiveProps()方法,然后在执行shouldComponentUpdate()方法,接下来的流程就一样了; 这就是运行中执行的流程;
第三个阶段:组件的卸载,这个期间我现在接触的比较少,因为react native 对这个阶段是自己封装好的,没太用过,先了解以下:
组件卸载的时候,首先执行Unmount()方法,然后执行componentWillUnmount()方法然后就是结束了;
在使用这个地方的时候, 有一个示例:就是对于本地存储的时候,当组件卸载的时候,可以在第三个阶段对 本地储存的数据进行清空操作;

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:reactnative基础-创新互联
链接地址:http://jkwzsj.com/article/csjdhg.html

其他资讯