react-native技术调研:react-native是什么?
如有疏漏错误,还望指正。转载不忘加上>>原链接<<哦~
react-native是什么? react-native原理
从字面意思上来看,react-native由单词react和单词native组合而成,中间一个连字符连接。
我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。
那么react又是什么呢?他们之间的连字符又有什么特殊的意义呢?下面我们来一一解答。
首先我们来说说react。react是什么?
官网上定义React是一个用于构建用户界面的js库。 React是声明式的,高效率的,并兼具灵活性(React is a declarative, efficient, and flexible JavaScript library for building user interfaces.)。
我们来理解一下,用于构建用户界面的js库有很多啊,比如说angular,vue,jquery,ext等等,都可以被称为用户构建用户界面的js库。
那么react和它们比又有什么不同呢?定义里说react是声明式的,高效率的,并兼具灵活性,这就是react的不同之处了,也可以称为react的几个特性吧。
接下来我们就来分别介绍一下react的这几个特性。
1.声明式:声明式是由JSX语法来表现的。那么jsx语法又是啥?JSX是使XML可以嵌入JavaScript的语法。用以更加直观的描述UI。 JSX是JavaScript对象,可理解为createElement的语法糖。
我们来对比一下,首先是原生的js语法:
React.createElement(MyButton,{color:'blue',shadowSize:2
},'Click Me');
再来看一下jsx语法:
<MyButton color="blue" shadowSize={2}>Click Me</MyButton>
大家一看,这不就是一个语义化的标签么,这样写的确比上面写起来简单,看起来也更清晰,但这就是JSX了么?当然不是,JSX语法的重点在于它是与js代码混写的,配合es6就像下面这样:
class ShoppingList extends React.Component {render() {return (<div className="shopping-list"><h1>Shopping List for {this.props.name}</h1><ul><li>Instagram</li><li>WhatsApp</li><li>Oculus</li></ul></div>);}
}
现在是不是感觉有点cool了?JSX语法使用语义化的标签来简化代码的编写,提升了代码可维护性的同时也降低了学习成本。
现在主流的IDE和文本编辑器都可以通过安装插件来支持JSX语法。
所以这个声明式指的是什么呢?指的就是上面代码中用大括号括起来的部分{this.props.name}这里类似于angular中的数据绑定。声明了UI中的表现与js中数据的关系。
2.高效率:高效率是由虚拟DOM来实现的。
虚拟DOM技术指的是使用javascript Object模拟DOM树,计算变更,减少重绘,提升效率的一种技术实现。
这里有一篇文章,写的非常不错,我就直接给大家引用过来,大家自己看吧。
>>虚拟DOM技术分析<<
3.灵活性:这个灵活性范围就广了,有安装的灵活性,编写代码的灵活性等。我侧重来说一个,就是components,组件化。
react-native通过Components进行组件化。它把UI分割成独立的、可重用的部件 。组件化这个概念大家也都不是第一次听说了吧,如果比较陌生的同学,可以自己搜搜哈。
react有它自己的组件化方式,就是所有模块都继承自React.Components,这比angular的modules更轻量级,结构也更简单,条条框框也减少了很多,是所谓真正的感受到了灵活性呢。
代码示例就像上面讲JSX语法的时候引用的那段,大家体会一下。
好的,我们了解完了react的三个特性,也对react有了初步的理解。那么回到我们最开始的问题:react-native是什么啊?
字面上来说,我们已经了解了react,了解了native的含义,那么react和native又是如何联系起来的呢?
首先,React通过虚拟DOM实现了对UI层的解耦(无论是android还是ios)。
然后,将浏览器的DOM树替换为Native的UI模块,使React在移动端进行渲染。
最后,采用Native的核心API完成react与native的通信。
由于采用native原生UI作为展现层,所以react-native具有可以媲美原生应用的优秀用户体验与性能优势。
我们对react-native的一些字面上的概念都有了一定的了解。我把以上内容简单的概括为:react-native是基于react技术编写native应用的一门技术,它继承了react简明、高效、灵活的特点,又兼具native优秀的用户体验。
react-native技术采用js编码,编写的应用具有跨平台、可热更新的优势。这就是我眼中的react-native。
转载于:https://www.cnblogs.com/yinzhida/p/10459951.html
react-native技术调研:react-native是什么?相关推荐
- react打包后图片丢失_宜信技术实践|指尖前端重构(React)技术调研分析
一.为什么选择React React是当前前端应用最广泛的框架.三大SPA框架 Angular.React.Vue比较. Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对 ...
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50599951 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
- 【React Native开发】React Native控件之RefreshControl组件具体解释(21)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50672747 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
- Web前端:React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
- 【React Native进阶】React Native Gesture Handler的使用
背景 说到React Navtive的性能优化,首先要了解React Native的运行机制.React Native程序主要运行在三个并行的线程上: JS Thread:我们写的JS代码逻辑都是在这 ...
- 如何在React Native中使用React JS Hooks?
In my articles, I'm going to be using either expo or snack online IDE and android emulator. 在我的文章中,我 ...
- 【译】前端框架技术选型 React vs. Vue (vs. Angular)
这是该系列文章的第2部分:"Fundbox的前端技术选型".第1部分介绍了Fundbox的技术现状以及我们重新设计它的动机.第2部分介绍了选择新框架背后的考虑:是迁移到React, ...
- React+Redux技术栈核心要点解析(下篇)
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
- SignalR在React/Go技术栈的实践
哼哧哼哧半年,优化改进了一个运维开发web平台. 本文记录SignalR在react/golang 技术栈的生产小实践. 01 背景 有个前后端分离的运维开发web平台, 后端会间隔5分钟同步一次数据 ...
最新文章
- MyBatis学习总结(5)——实现关联表查询
- http经典书籍--http权威指南
- 网站安全之nginx的配置创建访问网站密码认证
- Linux内核协议栈分析之网卡初始化——tcp/ip通信并不神秘(1)
- js深拷贝和浅拷贝对数组的影响_浅拷贝与深拷贝(JavaScript)
- HBase安装与验证
- BScroll案例--如何确定中间部分的高度
- php阿里云短信验证码
- matlab中的连乘符号,数学中的连乘符号
- 怎么用计算机名称共享打印机设置,如何共享打印机设置教程
- PyQt自定义控件之实现圆形图片
- layui在IE浏览器刷table刷新数据未更新
- 盘点市场营销工作中的5个办公神器
- Linux 块设备层中的Multi-queue分析
- 工业大型设备数字孪生 数字化改造三维动态大屏展示
- tensorflow使用高阶api导致训练不收敛问题
- python 批量云盘保存_批量保存云盘链接的deom
- 物联网操作系统应该怎么选?
- 小红书关键词搜索商品列表API接口(商品详情页API接口)
- Whois信息查询——新在线工具 (据说很强大) www.ranknow.cn/tools/whois