ReactNative学习 --- 理论篇

尽管在移动开发中,原生App的开发成本很高,但现阶段基于原生开发仍然是必须的,因为Web的用户体验仍无法超越Native,主要体现在:

  • Native的原生控件有更好的体验;
  • Native有更好的手势识别;
  • Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。

一、开篇

React Native于F8大会开源,在短短不到一年的时间里,它成为手机端必不可少的开发模式之一。 它充分利用了Facebook现有的业务轮子, 其核心设计理念:既拥有Native的用户体验、又保留React的开发效率。目前,React Native基本完成了对多端的支持,实现了真正意义上的面向配置开发: 开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现:H5, Android, iOS 多端代码的复用。此外,使用流畅度和原生的保持在同一层次,这不是我们梦寐以求的开发模式吗?让我们从无到有开启新的学习篇章吧!

二、什么是React Native?

1.时下两大移动互联网主流技术

  • BAT等一线互联网公司的插件化,热修改等技术
  • React Native技术(2016年,随着Android版本的稳定,更加火爆)

2.React Native介绍

  • Facebook于2015年9月15日发布React Native
  • 广大开发者可以使用JavaScript和React开发跨平台移动应用React Native提倡组件化开发: 即提供一个个封装好的组件,组件相互嵌套形成新的组件

3.React Native的优势
3.1 跨平台开发运用React Native,我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端,Android端和iOS端;
3.2 追求极致的用户体验:实时热部署 3.3 learn once,write everywhere (最具魅力) React Native不强求一份原生代码支持多个平台,所以不提“Write once, run anywhere”(Java),提出了“Learn once, write anywhere”。

4.React Native开发注意事项
4.1 目前react native在iOS上仅支持ios7以上,Android仅支持Android4.1以上版本;
github地址
官网文档
4.2 由于React Native的版本更新速度很快,如果没有深厚的JavaScript基础,建议选择: a、功能适中,交互一般,不需要特别多的系统原生支持; b、对于部分复杂的应用,可以考虑原生+React Native混合开发

名词释义:

1.虚拟DOM(Virtual Document Object Model)
React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM)。虚拟DOM是干什么的?这就要从浏览器本身讲起如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树,然后将RenderObject树渲染成页面(当然中间可能会有一些优化,比如RenderLayer树)。这些过程都存在与渲染引擎之中,渲染引擎在浏览器中是于JavaScript引擎(JavaScriptCore也好V8也好)分离开的,但为了方便JS操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离,通信是需要付出代价的,因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
而虚拟DOM干了什么?它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,性能会有较大提升

推荐阅读更多精彩内容

  • 尽管在移动开发中,原生App的开发成本很高,但现阶段基于原生开发仍然是必须的,因为Web的用户体验仍无法超越Nat...
    横爬介士阅读 76评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 142,699评论 18 611
  • ReactNative学习资料 标签(空格分隔): React 原文地址:React-Native学习指南 Rea...
    袁俊亮技术博客阅读 363评论 1 5
  • 歌曲<<再见理想>> 春情不断若连环,一夕思归鬓欲斑。 壮志未酬三尺剑,故乡空隔万重山。 音书断绝干戈后,亲友相逢...
    老蒋689阅读 219评论 3 31
  • 心理学偏差之确认偏差,人送外号偏差之父!~\(≧≦)/~啦啦啦我们来看看这是在心理学效应里面多么牛的一个角色! 先...
    HincL阅读 641评论 0 0