Halo

A magic place for coding

0%

React Native生命周期

React Native生命周期

  要想学会React Native编程,了解其组件的生命周期是很重要的。什么时候初始化组件,什么时候拉取数据,什么时候渲染,这些都与组件的生命周期密切相关。在这篇博客,我将简单地介绍React Native的生命周期。

生命周期

  组件的几个重要生命周期顺序如下(调用次序自上而下):

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

  这里有一个很基本的概念就是:数据只能加载到已经挂载的组件中。接下来我将会分析我们在每一个周期一般会做什么。

constructor

  这是组件初始化最开始的阶段,此时组件还没有挂载到网页上。在这个阶段可以做state的初始化工作,但并不加载数据。

componentWillMount

  在这个阶段中,组件仍然没有被挂载,在这里调用setState方法并不会出发重渲染,所以也无法加载数据。这个方法比较少用。

render

  在这个方法,就是组件进行挂载的阶段,框架会生成真实的DOM节点,这里一般是定义页面的元素,并不会涉及到数据的加载。

componetDidMount

  这个方法是在组件已经完全挂载到页面上才会被调用,所以能够保证数据的加载。此外,在这个方法里面调用setState会触发重渲染,所以我们一般都会选择在这个函数中加载外部数据。

小结

  了解React Native组件的生命周期对于coding有非常大的帮助,我们需要选择在正确的时间加载外部数据,否则就会出现页面加载后没有真实的数据。欢迎大家转发、评论,谢谢!

Welcome to my other publishing channels