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的更多相关文章

  1. [RN] 02 - Overview: React Native Practice of 50 lectures

    观看笔记:零基础 React Native 实战开发视频 50讲 本篇效果:RN入门,整体认识 基本原理 # 1 React到RN # 2 一个简单的例子 /** * Sample React Nat ...

  2. 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 ...

  3. React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  4. React Native官方DEMO

    官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法. 运行官方DEMO步骤如下 安装react native环境 React Native项目源 ...

  5. React Native ——实现一个简单的抓取github上的项目数据列表

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...

  6. React Native For Android 架构初探

    版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...

  7. [React Native] Basic iOS Routing -- NavigatorIOS

    Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...

  8. [转] 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 ...

  9. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

随机推荐

  1. Lab_1:练习4——分析bootloader加载ELF格式的OS的过程

    一.实验内容 通过阅读bootmain.c,了解bootloader如何加载ELF文件.通过分析源代码和通过qemu来运行并调试bootloader&OS, bootloader如何读取硬盘扇 ...

  2. JavaSE 面试题: 类初始化和实例初始化等

    JavaSE 面试题 类初始化和实例初始化等 class Father { private int i = test(); private static int j = method(); stati ...

  3. 『Tree nesting 树形状压dp 最小表示法』

    Tree nesting (CF762F) Description 有两个树 S.T,问 S 中有多少个互不相同的连通子图与 T 同构.由于答案 可能会很大,请输出答案模 1000000007 后的值 ...

  4. NET MVC 上传文件

    1.HTML @using (Html.BeginForm("UploadFile", "Student", FormMethod.Post, new { en ...

  5. Vue3.0结合bootstrap做多页面应用(1)创建项目

    本人主要做c# winform应用,刚接触vue,发现用vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquer ...

  6. C# LINQ干掉for循环

    public void OldSum() { ; ; i < ; i++) { sum0 += i; } Assert.AreEqual(, sum0); } public void NewSu ...

  7. 利用cv与matplotlib.pyplot读图片与显示图片

    import matplotlib.pyplot as pltimport cv2 as cva=cv.imread('learn.jpg')cv.imshow('learn',a)fig=plt.f ...

  8. MySQL常用sql语句大全

    创建数据库 1 create database dbname; 删除数据库 1 drop database dbname; 选择数据库 1 use dbname; 创建表 12345678 CREAT ...

  9. 使用MQ消息队列的优缺点

    前言 公司的项目一直都是在使用MQ的,但是由于使用的功能很简单,所以一直都是知其然不知其所以然,作为一个程序猿有必要了解每一个使用的技术,为什么使用它?它的优点是什么?缺点是什么?等等... 使用mq ...

  10. Vue学习之Webpack小结(十二)

    一.nrm: nrm是专门用来管理和快速切换私人配置的registry; nrm提供了一些最常用的npm包镜像地址,能够让我们快速的切换安装包时候的服务器地址: 二.镜像: 原来   包    刚一开 ...