React Native学习笔记

React native-组件的生命周期

2017-05-05  本文已影响54人  abbcea03a430

一 组件加载过程

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 )。

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

上一篇 下一篇

猜你喜欢

热点阅读