React介绍

Posted by sqq5682 on February 20, 2020

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

React Native 看起来很像 React,只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构,首先需要了解一些基本的 React 的概念,比如 JSX语法、组件、state状态以及props属性。

React Native开发特点:

一次学习,随处编写:使用React Native可以为iOS和Android操作系统开发应用程序,不同平台上的代码根据平台会有一些微小的区别。 混合开发:React Native代码开发的模块与原生代码开发的模块可以双向通信、无缝衔接; 高效的移动应用开发:

(1)独特的UI实现框架 (2)组件化开发 (3)跨平台移植代码迅速 (4)自动匹配不同屏幕大小的手机

高效的移动应用开发调试 高效的应用热更新 有效降低移动应用安装包体积 学习门槛低、开发难度低

使用React Native开发的代价 为了得到React Native开发的优点,使用React Native开发的APP也需要付出一定的代价

(1)内存消耗大

使用React Native开发的程序运行所需的内存比原生代码开发的程序略多。

(2)运行速度

使用React Native开发的代码运行速度比原生代码略慢。

React 与 React Native 除了在编码表现层都使用 JSX 语法外,在 React 与 React Native 的底层都有 Virtual DOM 与 DOM 之间的映射与转换,以实现了页面组件高效更新的前端表现。

React Native与React的关系及特点:React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用。底层原理是相同的,都是使用js实现虚拟dom树来驱动页面的渲染,react是驱动HTML dom的渲染,react native是驱动原生组件的渲染。

React.js:目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。

二者都是基于组件(component)开发,然后组件和组件之间通过props传递方法,每个组件都有一个状态(state),当某个方法改变了这个状态值时,整个组件就会重绘,从而达到刷新。另外,说到重绘就要提到虚拟dom了,就是用js模拟dom结构,等整个组件的dom更新完毕,它会有一个diff的过程,对比出哪些组件发生了变化,然后才渲染到页面,简单来说只更新了相比之前改变了的部分,而不是全部刷新,所以效率很高。

虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并。