美文网首页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 native-组件的生命周期

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