2019独角兽企业重金招聘Python工程师标准>>>

React-Native原理及组件生命周期

原理概述

React Native 不是黑科技，我们写的代码总是以一种非常合理，可以解释的方式的运行着，只是绝大多数人没有理解而已。接下来我们以android 平台为例，简单的解释一下 React Native 的原理。

首先要明白的一点是，即使使用了 React Native，我们依然需要 andriod平台的相关组件框架，调用的是 java代码。总之，JavaScript 只是辅助，它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid 完全没有关系，它只不过是以 JavaScript 的形式告诉 java 该执行什么代码。
其次，React Native 能够运行起来，全靠 java和 JavaScript 的交互。对于没有接触过 JavaScript 的人来说，非常有必要理解 JavaScript 代码如何被执行。

我们知道 C 系列的语言，经过编译，链接等操作后，会得到一个二进制格式的可执行文，所谓的运行程序，其实是运行这个二进制程序。而 JavaScript 是一种脚本语言，它不会经过编译、链接等操作，而是在运行时才动态的进行词法、语法分析，生成抽象语法树(AST)和字节码，然后由解释器负责执行或者使用 JIT 将字节码转化为机器码再执行。整个流程由 JavaScript 引擎负责完成。而React Native采用的js引擎就是著名的javascriptCore引擎，至于js引擎的介绍可以参考 js引擎介绍

文字说了一大堆，可能还不如大佬们画的一张图：

启动流程图：

大佬们的图还是有些复杂，对于初入门的小白来说，下图或许更合适

通过上图不难看出，通信的核心部分就是Bridge和Webkit这两块东西了。

组件生命周期

说几个比较重要的方法：
- constructor()：一般在构造函数中初始化state；
- componentDidMount()：该方法在render()方法后自动调用，网络请求一般放在这个方法中
- shouldComponentUpdate()：该方法返回一个boolean值，用来决定是否需要重新渲染组件，默认返回true，你可以自己重写此方法，通过条件判断来决定你是否需要更新组件
- componentWillUnmount()：在组件被移除前调用，在该方法中，释放一些不需要的资源，比如停止定时器
学习了3种定义组件的方法

ES6方式定义，也就是现在最常用的方法，通过继承Component，目前也比较推荐该方法
ES5方式定义，看视频是可以的，但是我自己写的时候，在运行时报错，尚未找到原因，所以就不贴代码了，我搞明白了后再补充
通过函数式的方法来定义。这种方式定义出来的组件是无状态的，即没有state，也不能使用this，因为没有this指针。而且因为它本身就是一个函数，所以组件没有完整意义的生命周期方法

转载于:https://my.oschina.net/u/933928/blog/1935000

React-Native原理及生命周期相关推荐

Servlet运行原理以及生命周期
Servlet运行原理 Servlet生命周期定义了一个Servlet如何被加载.初始化,以及它怎样接收请求.响应请求,提供服务.在讨论Servlet生命周期之前,先让我们来看一下这几个方法: 1. ...
JavaWeb第一讲 Servlet的工作原理及生命周期
Servlet的工作原理及生命周期 (一)Tomcat容器模型 Servlet的运行离不开Tomcat,那我们先弄清楚Tomcat的容器模型. 由上图可以看出,在Tomcat下有一个Container ...
2011年9月19日面试重点：asp.net运行原理和生命周期
面试重点:asp.net运行原理和生命周期 1.ispostback回调机制 isPostBack=false !IsPostBack==ture 当前页面是第一次加载 IsPostBack 由于用户 ...
React 重温之组件生命周期
生命周期任何事物都不会凭空产生,也不会无故消亡.一个事物从产生到消亡经理的各个阶段,我们称之为生命周期. 具体到我们的前端组件上来,一个组件的生命周期可以大体分为创建.更新.销毁这个三个阶段. 本 ...
React新旧版本生命周期对比
React新旧版本生命周期对比 ❶ 过时生命周期: ① componentWillMount ② componentWillReceiveProps ③ componentWillUpdate ❷ 即 ...
native react 更新机制_React Native - 组件的生命周期详解（附：各阶段调用的方法）...
一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...
servlet工作原理_Servlet 生命周期、工作原理
Servlet 生命周期:Servlet 加载--->实例化--->服务--->销毁. init():在Servlet的生命周期中,仅执行一次init()方法.它是在服务器装入Ser ...
react学习笔记(8)生命周期回顾与再认识
生命周期生命周期是一个组件从创建到销毁的过程. 当组建实例被创建并且插入到DOM中,需要调用的函数,就是生命周期函数. 也就是说,组件加载完成前后.组件更新数据.组件销毁,所触发的一系列的方法. 1 ...
PHP的工作原理和生命周期
表层分析 php是以请求/响应为周期运行服务端应用程序,当请求进入应用程序,流程如下: php的每一个请求都会重复以上的交互. 底层分析 php的运行模式有两种:web模式和cli模式.无论是哪种公众 ...

React-Native原理及生命周期

React-Native原理及组件生命周期

原理概述

组件生命周期

React-Native原理及生命周期相关推荐

最新文章

热门文章