免费开源的iOS开发学习平台

React Native介绍:1-RN的特性

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。

React Native 一经推出,就获得众多开发者的关注。React Native 使得 JavaScript 能够开发真正的 APP, 它不仅有着与原生应用相媲美的体验,同时拥有着 Web 应用的优势和开发效率。React Native 鲜明的特点就是组件化,一个应用都是多个组件构成;同时为了更高的效率,React Native 采用了内存 Dom tree Diff 计算,优化了 view 的渲染效率和体验。使用 JavaScript 开发跨终端的应用是未来的趋势。

React-Native是在React的基础上设计的(也许描述得不对),对于前端来说,纯业务组建(不涉及UI,仅仅是逻辑)能否在iOS,Android,Web上共享?从官方的视频看到,React Native提倡的是 Learn once, Write anywhere,这不是是预示着多个平台还得每个写一遍,不知道共享度能有多少?

你说的很对,React-Native是React基础上设计的,这是当时Facebook两个团队做的事情,ReactJS先出来的。如果是语法层面,不设计UI,是可以共享的。

React-Native请问是基于什么设计模式开发的?

设计模式硬套倒也想不出,基本3个层面:(1)语言层面:JS & JSX,这个对前端人员比较熟悉。(2)核心层面:使用Javascript内核引擎 + OC原生组件 (3)使用组件开发APP,就像搭积木一样。

Dom tree Diff 是什么? 具体是怎么运算的呢? 尤其是提高效率上。

举个栗子:以前我们需要给一个评论点赞,需要更新该评论下的赞,赞的用户昵称信息,我们暂且叫做视图重渲染吧,比如使用jquery, $('#container').empty().....render()。那么react做了一件什么事呢?react构建的是虚拟的dom,通过内部属性的改变通知虚拟dom进行内存计算(与旧属性的虚拟dom进行一次比较,即diff),将计算后的结果直接更新在界面上,不要我们手动管理视图。内存换效率。具体的可以看下这篇文章https://facebook.github.io/react/docs/glossary.html

既然原生上面有一层虚拟DOM,那按道理应该可以做到根据一套JS在不同的环境下渲染不同的原生代码,实现1次编写处处运行。而且Native是需要编译的吧,那它应该做不到H5那种的实时更新。还有一点,这层虚拟DOM能做到一套View同时渲染Web和Native两套界面吗?

是这样的,因为iOS和Android有各自不同风格的控件,有的区别很大,所以React-Native提供了Platform可以判断当前系统是Android还是iOS,然后渲染什么样的UI,这些可以写在一套js代码里,热更新不需要编译,React-Native有一个bundle命令,打包出来的bundle文件是可以直接被加载的,不需要编译。 如果想一套View渲染Web和App的话,UI部分的代码是不一样的,这个可以看React的文档和React-Native的文档,render渲染的JSX部分代码不一样。

既然Web的view和Native的view无法公用,那在Web上弄一层shadow-dom有什么意义?仅仅为了实现diff算法吗?React确实我没深入了解过,写NG比较多,感觉写React很繁琐

虚拟DOM主要是解决Web的一个性能瓶颈问题,类似cordova之类的跨平台解决方案性能瓶颈就在DOM上,虚拟DOM就是当DOM有更改的时候在进行DOM渲染,可以有效地减少DOM渲染次数,解决这个性能问题。NG更适合单页的web app或者说H5在native部分。

问下两个问题 1).React Native当初宣传的时候说的是 一次学习,处处编写。为什么React Native不是那种传统的一次编写,处处运行。 2)Native和Web端的React有联系吗?

React-native是从React发展而来的,最大的优势就是既有Web的热更新优势,又有接近Native的性能,核心思想是虚拟DOM,所以针对不同的平台编写不同的JS,实际上底层调用的还是原生控件,所以是一次学习处处编写而不是一次编写处处运行。 Native和Web端的react是有联系的。

React Native 组件的属性和方法够多够灵活吗?

目前React-Native的第三方库还不是很丰富,需要oc的支持和暴露,当然这只是目前。组件的方法不是很多,但是很好的处理了一个UI组件的渲染生命周期,足以控制组件;组件可以自定义和扩展,所以属性是可以灵活使用。具体的可以关注3个比较重要的属性:props、state、ref