谈谈从0开始快速学习React Native(二)

原创 2016年08月31日 15:26:16

React Native生命周期

ReactNative生命周期图

各个函数的介绍:

getDefaultProps:

在组件创建之前,会先调用 getDefaultProps() ,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 getInitialState() ,来初始化组件的状态。
设置组件属性的默认值,在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 `props` 中的某个键,则此处返回的对象中的相应属性将会合并到 `this.props` (使用 in 检测属性)。

注意:
该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。通常用于为组件初始化默认属性。

getInitialState

object getInitialState()
初始化组件状态,在组件挂载之前调用一次。返回值将会作为 this.state的初始值。

注意:通常在该方法中对组件的状态进行初始化。
一般我们都会使用this.state.XX获取当前状态的值,使用this.setState({key:value})来改变状态。

componentWillMount

这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。可以在这里做一些业务初始化操作和一次消耗内存的操作,也可以设置组件状态。

注意:这个函数在整个生命周期中只被调用一次,也是在渲染之前唯一一次能够改变state的一个函数。

render

ReactComponent render()
render() 方法是必须的。
当该方法被回调的时候,会检测 this.propsthis.state,并返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件(比如 <div /> 或者 React.DOM.div()),也可以是自定义的复合组件。
你也可以返回 null 或者 false 来表明不需要渲染任何东西。实际上,React 渲染一个<noscript>标签来处理当前的差异检查逻辑。当返回 null 或者 false 的时候,this.getDOMNode() 将返回 null
render()函数应该是纯粹的,也就是说该函数不修改组件的 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互(例如通过使用 setTimeout)。如果需要和浏览器交互,在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。

注意:不要在render()函数中做复杂的操作,更不要进行网络请求,数据库读写,I/O等操作。

componentDidMount

在组件第一次绘制之后,会调用 componentDidMount() ,通知组件已经加载完成。这个函数调用的时候,其虚拟 DOM 已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的 componentDidMount() ,然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval ,或者发起网络请求。

注意:这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。

componentWillReceiveProps

在组件接收到新的 props 的时候调用componentWillReceiveProps() 。在初始化渲染的时候,该方法不会调用。
用此函数可以作为 react 在 prop 传入之后, render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

componentWillReceiveProps: function(nextProps) {  
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

注意:
这里调用更新状态是安全的,并不会触发额外的 render() 调用。

shouldComponentUpdate

shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state,将要渲染之前调用,该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

注意:重写次方你可以根据实际情况,来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件。

componentWillUpdate

componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。

注意:你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps

componentDidUpdate

componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。

注意:该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

componentWillUnmount

componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。

注意:在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

版权声明:本文为博主原创文章,未经博主允许不得转载。

谈谈从0开始快速学习React Native(一)

React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 我可以说...
  • qizhenshuai
  • qizhenshuai
  • 2016年08月30日 17:32
  • 291

移动客户端开发快速上手ReactNative的学习路线

1. HTML(学习时间30分钟): 或多或少,大家肯定对HTML还是有所了解的,在开始前端之旅前,有必要系统的扫一下基础,推荐教程:http://www.jb51.net/shouce/htm...
  • JoeySheng
  • JoeySheng
  • 2016年07月15日 15:24
  • 1445

React从零开始

Facebook 发布的React框架采用了不同的
  • tommystudio
  • tommystudio
  • 2015年04月12日 16:17
  • 1213

qt5学习问题笔记(从零开始)

学习中遇到的问题集锦 学习资料是> 1.安装qt5 for vs2010后,无法编译程序           编译时, cl.exe 找不到, 重装一次好了          重装后, 编译时, ...
  • jiht594
  • jiht594
  • 2015年03月06日 21:14
  • 1705

React从零学起

原文请戳 初接触React,除了不习惯其组件化的设计原则外,往往它所‘依赖’的众多module也会让初学者感到困惑,使得不知从何学起。此文只是我对React的一些浅析,希望能帮助想要学习React...
  • kkkkkxiaofei
  • kkkkkxiaofei
  • 2016年05月19日 14:04
  • 1344

unity3d从零开始(一):初识unity3d

记录自己学习unity3d的历程。 1、简介         在unity网站http://unity3d.com/unity/download 下载unity3d(我的版本是4.5.3)...
  • u011476173
  • u011476173
  • 2014年08月21日 22:25
  • 1383

从零开始 React Native (2) ES6面向对象编程

主要知识点: 模板字符串 箭头函数 解构赋值 Symbol 第七种数据类 class 关键字 语法糖 继承 (原型继承 原型继承的问题)(构造函数继承 )(组合继承) 下面都是代码样例 看看能打印什...
  • liudao7994
  • liudao7994
  • 2017年05月03日 14:40
  • 429

从零开始学Java之线程详解(1):原理、创建

Java线程:概念与原理 一、操作系统中线程和进程的概念 现在的操作系统是多任务操作系统。多线程是实现多任务的一种方式。 进程是指一个内存中运行的应用程序,每个进程都有自己独...
  • j_a_v_a_guan
  • j_a_v_a_guan
  • 2015年08月23日 14:35
  • 781

react-native学习路线总结

本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。 首先当然还是介绍一下rea...
  • u014168594
  • u014168594
  • 2016年09月21日 17:23
  • 6846

ReactNative从学习到放弃——准备工作

ReactNative是Facebook刚出的一个可以跨平台(Android和ios)开发的控件,现在非常流行,虽然还有很多坑,不过学习一下应用到项目中某些模块还是很不错的。所以我这个小菜鸟就准备学习...
  • zjm0518
  • zjm0518
  • 2016年08月05日 19:11
  • 1014
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:谈谈从0开始快速学习React Native(二)
举报原因:
原因补充:

(最多只允许输入30个字)