React (Native) Rendering Lifecycle
How Does React Native Work?
The idea of writing mobile applications in JavaScript feels a little odd. How is it possible to use React in a mobile environment? In order to understand the technical underpinnings of React Native, first we’ll need to recall one of React’s features, the Virtual DOM.
In React, the Virtual DOM acts as a layer between the developer’s description of how things ought to look, and the work done to actually render your application onto the page. To render interactive user interfaces in a browser, developers must edit the browser’s DOM, or Document Object Model.
Let’s come to React Native now. Instead of rendering to the browser’s DOM, React Native invokes Objective-C APIs to render to iOS components, or Java APIs to render to Android components. This sets React Native apart from other cross-platform app development options, which often end up rendering web-based views.
This is all possible because of the “connector,” which provides React with an interface into the host platform’s native UI elements. React components return markup from their render function, which describes how they should look. With React for the Web, this translates directly to the browser’s DOM. For React Native, this markup is translated to suit the host platform, so a <View> might become an Android-specific TextView.
React Native currently supports iOS and Android. Because of the abstraction layer provided by the Virtual DOM, React Native could target other platforms, too—someone just needs to write the connector.
Rendering Lifecycle
If you are used to working in React, the React lifecycle should be familiar to you. When React runs in the browser, the render lifecycle begins by mounting the React components.
After that, React handles the rendering and re-rendering of the component as necessary.
For the render phase, the function returns HTML markup from a React component’s render method, which React then renders directly into the page.
For React Native, the lifecycle is the same, but the rendering process is slightly different, because React Native depends on the bridge. The bridge translates JavaScript calls and invokes the host platform’s underlying APIs and UI elements (i.e. in Objective-C or Java, as appropriate). Because React Native doesn’t run on the main UI thread, it can perform these asynchronous calls without impacting the user’s experience.
http://www.discoversdk.com/blog/how-react-native-works
React (Native) Rendering Lifecycle的更多相关文章
- [RN] 02 - Overview: React Native Practice of 50 lectures
观看笔记:零基础 React Native 实战开发视频 50讲 本篇效果:RN入门,整体认识 基本原理 # 1 React到RN # 2 一个简单的例子 /** * Sample React Nat ...
- Xamarin vs React Native vs Ionic vs NativeScript: Cross-platform Mobile Frameworks Comparison
CONTENTS Reading time: 14 minutes Cross-platform mobile development has long been a viable alternati ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- React Native官方DEMO
官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法. 运行官方DEMO步骤如下 安装react native环境 React Native项目源 ...
- React Native ——实现一个简单的抓取github上的项目数据列表
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...
- React Native For Android 架构初探
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...
- [React Native] Basic iOS Routing -- NavigatorIOS
Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...
- [转] React Native Navigator — Navigating Like A Pro in React Native
There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
随机推荐
- 大一C语言课程设计——班级档案管理系统
记录我在大一第二学期期末做的C语言课程毕业设计 1. 班级档案管理系统运用到的主要结构体 typedef struct birthday //出生日期{int year;int month;int d ...
- Java Base64Utils
Java Base64Utils /** * <html> * <body> * <P> Copyright 1994 JsonInternational</ ...
- 一款比较强大的jquery表格插件Datatables
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 链接:http://www.datatables.club/ 本人无聊时发现的一款用 ...
- 【转】2019年7月份,阿里最新Java高频面试真题汇总
技术一面(23问)技术二面(3大块)JAVA开发技术面试中可能问到的问题(17问)JAVA方向技术考察点(33快)项目实战(7大块)必会知识(48点)面试小技巧注意事项1. 阿里技术一面 Java I ...
- SQL 查询表外键_T-Sql 2016——级联删除外键查询
SELECT fk.name AS foreign_key_name, oSub.name AS table_name, SubCol.name AS table_column, oMain.name ...
- MySQL之SQL演练(四)
一:准备数据 1.创建数据表 -- 创建 "京东" 数据库 create database jing_dong charset=utf8; -- 使用 "京东" ...
- 【转载】如何删除Windows远程桌面保存的账号密码数据
在Windows系统中,无论是win7.win8还是win10系统,都可使用Windows系统自带的远程桌面连接工具来远程服务器,很多时候Windows远程桌面在连接一次后会自动保存连接的账号密码等信 ...
- js实现数组去重(方式大汇总)
方法一:循环判断当前元素与其后面所有元素对比是否相等,如果相等删除:(执行速度慢) var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5]; function remove ...
- HTML5中重新定义的 b 和 i 元素
HTML5强调元素的语义,而非表现.b和i元素是早期HTML遗留下来的产物,它们分别用于将文本变为粗体和斜体(那时CSS还未出现). 当时的规范建议编码人员用strong替代b,用em替代i.不过,事 ...
- Android studio module生成jar包,module中引用的第三方库没有被引用,导致java.lang.NoClassDefFoundError错误。
android studio 创建了一个Module生成jar包,这个module中有引用一些第三方的类库,比如 gson,volley等. 但是生成的jar包里,并没有将gson,volley等第三 ...