React Native是一套使用 React 构建 Native app 的编程框架

React Native at first sight

what is React Native?

跟据官方的描述, React Native是一套使用 React 构建 Native app 的编程框架. 推出不久便引发了广泛关注, 这也得益于 JavaScript 开放而活跃的技术社区和 React Native 完备的技术体系支持. 本文试图概括的介绍 React Native.

React Native 主要是一套 Runtime, 包括一套 React.js 库使得开发可以用 React 的方式开发, 以及一套 Native 的Ployfill 弥补webkit 渲染&&交互能力的不足.

javascript runtime运行在 JavaScriptCore 上, JavaScriptCore 是WebKit的 JavaScript 引擎, 也就是 Safari 中的 JavaScript 引擎, Apple 把他叫做 Nitro. JSC 自从2008年诞生, 至今做了很多优化, 成熟的执行引擎保证了运行效率. RN 本身没有和 js 引擎绑定, 选择 JavaScriptCore 的原因是 iOS 对 JSC 的天然支持.

how React Native works?

React Native 通过执行javascript, 计算出布局 样式 事件处理的信息, 保存到一个类似于DOM的数据结构(ReactElement tree)中. 通过pure native组件渲染出UI. 事件处理上也是首先native先处理, 再根据javascript的事件监听调用响应的callback. 是将javascript的逻辑能力和native的性能的折中整合.

在组件开发和复用方面, ReactNative 采用了 RequireJS 对组件的组织方式. RequireJS 在 node 中广泛使用, 同 npm 结合让组件的重用变得简单. 一个文件就是一个组件, 组件可以发布到 npm 仓库, 通过配置描述组件名称和版本, 其他开发可以直接引用现有的组件. 同 cocoapods 和 maven 类似, 解决了 js 代码依赖管理和协作的问题.

在组件开发上面, UI 开发方式上面沿用了 React 的优秀设计, React.js 在 javascript 界掀起了一场热潮, 将 面向DOM 的开发方式变为以面向组件的开发. 这倒是和 native 的开发模式很像, 先设计静态组件样式, 再处理交互流程, 抽离可变状态. 但是 React 加上 javascript 的编程能力是 Java 和 OC 不能比的... React 利用 Babel 支持了 ES6的语法, 并为了简化 DOM 的编写设计了 JSX, 这些大大简化了开发量, 并使得开发变得有趣. React 也采用了依赖反转的设计, DOM 重绘, 组件的生命周期, 都是由React.js控制, 开发只需要关心UI 和交互设计, 可以参考 iOS 中的各种生命周期的 delegate 理解.

Native和javascript的通信是通过native调用javascript实现的, 调用只能是单向的, 总是从native到js. 这套机制目前已经比较成熟, 但RN通过实现对象传递和batch处理js回调的方式解决了双向通信和性能的问题, 对于开发者就像能够做到双向的调用一样. 在 Native 部分, RN 提供了 javascirpt 和 Native 通信时对象传递的方案, 并通过单向调用返回注册callback的方式, 让native在恰当的时机回调js方法, 并且通过让Native 组件运行在独立线程的方式和batch调用callback的方式优化整体的性能.

RN 官方提供了很多 Native 的组件, 并且由于其开放性, 网上有很多 react-parts 这些开源的组件库, 开发者可以用他们做出精细的交互设计.

Disadvantage

loadtime问题, 由于RN是以javascript为主体的设计, 页面渲染需要先执行一次javascript render调用. 目前经过一些优化后(framework抽离复用, js资源cache)在iPhone5上面测试简单的页面渲染, js执行的时间要200ms左右, 这个时间主要是在第一次js执行的开销. 这个时间对于用户是可以感知的, 而且会随着js的复杂增长.

内存开销. 由于依赖了js引擎, 在内存占用上会明显高于pure native, 这对于android的低端机而言问题尤其严重.

功耗, 由于额外的js的执行频繁的通信需要的序列化操作都会造成功耗的上升, 虽然没有亲测过具体的差距, 但功耗也是值得关注的问题之一.

虽然存在这些问题, 但动态能力对于native开发而言的诱惑太大, native开发还是需要根据要解决的问题选择合适的技术. 对于js开发而言, 使用自己熟悉的环境能够大幅提升在客户端的体验, 是非常棒的技术.

Reference

https://facebook.github.io/react-native/
http://trac.webkit.org/wiki/JavaScriptCore
http://ariya.ofilabs.com/2012/06/nitro-javascriptcore-and-jit.html
http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
https://news.ycombinator.com/item?id=8964935
http://tadeuzagallo.com/blog/react-native-bridge/

原创文章, 转载请注明来源 http://www.cnblogs.com/hucn/p/5077713.html  http://nickolashu.github.io/2015/10/12/react-native-at-first-sight/

更多文章关注我的个人博客

http://nickolashu.github.io/

分类: 移动

标签: ReactNative

时间： 2024-10-08 15:14:11

React Native是一套使用 React 构建 Native app 的编程框架的相关文章

React Native快速开发 厕所在哪App LBS定位 框架封装

课程目录:第1章 课程大纲和App演示介绍整个课程的内容.业务架构.技术选型以及App的功能演示.第2章 Node.js服务开发介绍了Node.js环境搭建.JSON数据文件的读取以及开发了基础的服务接口.该接口主要提供客户端(含Native端和PC web端)调用,用于数据展示和数据存储.第3章 Node.js开发后台系统讲解了通过调用第二章的接口,开发简易的后台CMS系统.该CMS系统主要用于配置页面数据和存储列表数据.第4章 React Native环境搭建和入门主要讲解React Nat

我的 React Native 技能树点亮计划 の React Native 开发 IDE 选型和配置

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文首发于 InfoQ 移动技术公众号:移动开发前线 由于潜在的商业目的,未经许可不开放全文转载许可,谢谢! React Native 发布一年多了,有不少公司已经在线上产品中或小范围试水,或大范围应用,很多公司或开发者都在为 React Native 的生态系统作出自己的贡献.React Native 的开发基本上是 Javascript + 系统原生开发语言(Java,Objective-C,Swift),原生语言

React系列（一）：React入门

React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据不断变化变得难以操作的问题: 组件化开发,使得开发更加快速: 单向数据流,有利于找到问题: 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新:举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去: JSX的编译方式,将HTML代码和J

React学习笔记-1-什么是react，react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流

Build A Real-Time Twitter Stream with Node and React.js By Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第二章,該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上.如果你沒有看過第一章,概念和起步,我非常建議你繼續看下去之前,回去看看. 今天我們準備創建用 React 來創建一個應用,通過 Isomorphic Javascript. Iso-啥? Isomorphic. Java

react.js 从零开始（七）React （虚拟）DOM

React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.createElement 创建该类型的一个实例. var root = React.createElement('div'); 为了渲染一个新的树形结构到 DOM 中,你创建若干个 ReactElement,然后传给React.render 作为第一个参数,同时将第二个参数设为一个正规的 DOM 元素(HTM

我是怎样克服对 React 的恐惧，然后爱上 React 的

英文原文:https://firstdoit.com/how-i-learned-to-stop-worrying-and-love-react-4e22b0bb6c2a 如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道上, 请听我道来. Good old MVC 在一个交互式应用程序一切罪恶的根源是管理状态.

react的类型检查PropTypes自React v15.5起已弃用，请使用prop-types

最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    "react": "^16.2.0",google搜了下,原来:react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types使用方法参考: https://doc.react-china.org/docs/typechecking

使用react搭建组件库(二)：react+typescript

1 使用了react官方脚手架:create-react-app https://github.com/facebook/create-react-app npm run eject 可以打开配置文件 自定义配置文件 执行安装: npx create-react-app ts-with-react --typescript npx 只有在npm5.2以上版本才有 1.避免安装全局模块:临时命令,使用后删除,再次执行的时候再次下载 2.调用项目内部安装的模块用起来更方便:比如 在package.j