美文网首页React Native学习笔记
React native-组件的生命周期

React native-组件的生命周期

作者: abbcea03a430 | 来源:发表于2017-05-05 13:22 被阅读54次

一 组件加载过程

1.现调用构造函数constructor

2.然后调用:componentWillMount()组件开始加载

3.接着渲染调用render()函数

4.渲染完成后调用组件加载完成函数:componentDidMount()

二 组件刷新过程

5.每次刷新都会调用shouldComponentUpdate( NEXTPROPS , NEXTSTATE )这个函数,

这个函数return  false就不会去调用render函数渲染界面。

通过NEXTSTATE这个值可以拿到下一个值,只有值符合要求才去刷新,以此来优化性能

6.刷新先调用shouldComponentUpdate( NEXTPROPS , NEXTSTATE )

,然后调用componentWillUpdate( NEXTPROPS , NEXTSTATE ),

然后调用render刷新页面,然后调用componentDidUpdate( NEXTPROPS , NEXTSTATE )表明完成刷新。

三 组件的销毁

7.componentWillUnmount()页面销毁的时候调用,也就是跳转到别的界面会被销毁

四 组件接受属性

8.componentWillReceiveProps( NEXTPROPS )当组件的属性值被改变时会被调用

五 子组件和副组件一起加载的过程

9.当组件中有子组件时,父组件调用完componentWillMount()会选择加载所有子组件如上加载步骤先子组件先构造函数再加载。然后子组件全部加载完成才会调用父组件的componentDidMount()

六 子组件和副组件一起刷新的过程

10.如果父组件刷新,子组件的属性也跟着改变,那么父组件刷新调用完render后,会调用子组件的componentWillReceiveProps( NEXTPROPS ),然后按照刷新步骤,刷新子组件,子组件刷新完成才会调用父组件的componentWillUpdate( NEXTPROPS , NEXTSTATE )。

小结:组件生命周期先加载后刷新

相关文章

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • React native-组件的生命周期

    一 组件加载过程 1.现调用构造函数constructor 2.然后调用:componentWillMount()...

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • react(最近搞了一套react项目的视频 全套 有需

    React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mou...

  • Notes On React - Two

    React 的生命周期   React组件 的生命周期大致可分成四个状态:  - Mounting:装配-组件实例...

  • 006@React组件的生命周期.md

    006@React组件的生命周期.md React Native 是基于组件化开发。弄清楚组件的生命周期对于我们开...

  • React 生命周期

    React 生命周期 初始化周期 组件重新渲染生命周期 组件卸载生命周期

  • react组件的生命周期

    第三单元(react组件的生命周期) 课程目标 灵活掌握react组件的生命周期以及组件的活动过程。 能够灵活使用...

网友评论

    本文标题:React native-组件的生命周期

    本文链接:https://www.haomeiwen.com/subject/upbjtxtx.html