小谈React、React Native、React Web

React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出,是觉得还有些用处)。 

React、React Native共同特点

起源

Facebook 的内部项目

理念

Learn once, write anywhere,而不是Write once, run anywhere。简单说就是,让你在Web、Mobile原生的开发套路一样,但你还是需要写两套代码。Web Components的理解与实现。

开发工具

普通文本编辑器、Notepad 等即可

代码写法

支持ES6,组件化,看起来像NodeJS,所有代码是写在js里的,无论是样式还是模板。

组件化

易复用:组件的复用变得非常容易,它们都是独立的。

利解耦:使得组件的实现关注分离,利于解耦,更容易被理解和维护。

规范性:利用到ES6的模块加载和导出,使得代码简单就能按规范的写。也因为规范实现,使得Github上有的,就可以拿来用。

可组合:一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件。

React

框架目的

基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

浏览器兼容

IE8

运行方式

一般需要先一层编译,或者解析

PS:React JS我并没有用过,不过写法是React Native一样。

React Native

框架目的

用js开发出效果接近原生的Android、iOS应用。原因UI组件是原生实现原因,效果是相近原生的。(做得像原生,那就得用原生做)

PS:目前Saas Link里面的应用的效果在Android机器还是不大好

开发环境

iOS、Android按照官方文档搭建,大概1个小时。

开发调试

1. 能够在Chrome调试js,debug

2. 由于组件由原生渲染,不能调试View

代码风格

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

组件生命周期

http://www.tuicool.com/articles/nu6zInB

提供植入原生应用

它很容易嵌入到一个并非由React Native开发的应用当中。作为应用的一部分。

React js的代码能不能直接转React Native?
ReactJs和React Native的原理是相同的,都是由js实现的虚拟dom来驱动界面view层渲染。

只不过ReactJs是驱动html dom渲染; React Native是驱动android/ios原生组件渲染。

真不能转~

真不能Write once, run anywhere?
淘宝前端团队(FED)把 React Native 的组件做了一个 Web 端的实现,并提供相关打包工具,让你可以直接打包出一份可以跑在 Web 端的代码。——React-Web

PS:http://www.jianshu.com/p/b5a91a503e6e

PS:我在本地尝试过,没跑起来,不过据说是可以的。

不过即便是能够转换,需要面对几个问题:

1. 这个转换的工具能否及时跟上React Native发展。

PS:要是这个团队不维护了或更新不及时(目前已经存在这种问题),这种依赖挺麻烦。

2. 存在转换不了的React Native原生功能,这部分还需要做兼容。

3. 没有完善的社区论坛,有问题解决不了。(目前只是在Github)

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5679734.html


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365701.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yii::$app-mongodb 查询纪录数_老詹总决赛有多强?12项数据领先乔丹科比,已握10项数据纪录...

勒布朗詹姆贡献了38分16个篮板和10个助攻的狂暴三双数据,并率领湖人淘汰了掘金,这使得他迈进了职业生涯第10次总决赛舞台。我们都知道,詹姆斯几乎统治着NBA季后赛大部分数据纪录,事实上,他在总决赛同样如此。根据《sta…

摆脱困境:从计划作业中调用安全方法

假设我们已经实现了一个Spring支持的应用程序,并使用Spring Security的方法安全性表达式对其进行了保护 。 我们的下一个任务是使用安全方法实施计划作业。 更具体地说,我们必须实现一个计划的作业,该作业从我们的服务类中获取一条消息&…

前端共享桌面_2020 前端学习路线总结,哎呦,不错哦!

2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读。图下面是我翻译的一个文字版,可以先看图再看文字…

每日一题题目16:简单的python练习题(1-10)

#1.python程序中__name__的作用是什么?__name__这个系统变量用来表示程序的运行方式. 如果程序在当前膜快运行,__name__的名称就是__main__, 如果不在(被调用),则显示为导入模块的名称.扩展:常常这样写if __name__ "__main__":来表名这是整个工程开始运行的入口.效…

Confluence 6 高级性能诊断

请在你的系统服务请求中包括下面所有的信息,如果可能的话,你也可以在请求中包括你认为最有可能出现的问题。这样的话,可以避免我们进一步对你系统的问题进行询问。 系统信息 Confluence 服务器 你系统信息的屏幕截图 Confluences Administrat…

RequireJS使用注意地方

使用RequireJS做异步模块加载,有几点值得注意的地方: 1.模块定义两种写法 1. 存在依赖的函数式定义 如果模块存在依赖:则第一个参数是依赖的名称数组;第二个参数是函数,在模块的所有依赖加载完毕后,该函…

WildFly上具有AngularJS的Java EE 7和Java WebSocket API(JSR 356)

这篇博客文章描述了用于WebSocket协议的Java API(JSR 356) (这是Java EE 7平台的四个最新JSR之一),并提供了部署在WildFly 8上并可以在OpenShift上在线获得的具体应用程序。 [FR]版本的法语( HTML或PDF &a…

用python做自我介绍_python入门教程NO.2 用python做个自我介绍

本文涉及的python基础语法为:数据类型等数据类型1. 字符串的拼接我们在上一章中已经简单介绍了一下字符串的创建方式,这里我们简单学习一下字符串的运算和拼接。字符串的运算字符串的加法#把字符串:hello赋值给变量aa hello#把字符串&#x…

想清楚映射规则,栈、队列、双端队列的实现都差不多

今天开始,啃读算法导论第10章。既然是啃就要有啃的样子,我决定将例题和习题全部用C实现一遍,总结同一类问题的共性。 10.1节介绍了栈,队列,双端队列及一些组合形式,为了突出体现思路,让代码更加…

日期加减加1天_2小时整理了13个时间日期函数,动图演示简单易学,收藏备用吧...

Hello,大家好,今天跟大家整理汇总了13个工作中经常用到的日期与时间函数的使用方法,学会它们几乎可以解决所有工作中遇到的,关于日期与时间提取与转换的问题。话不多说,让我们直接开始吧一、了解时间与日期的本质工作中…

T-1-java语言基础

一、Linux的由来和发展Linux是开源的操作系统Linux是服务器端的操作系统java主要用于服务器端二、Linux目录结构(与Windows不同)文件系统不同:Windows是盘符,Linux是目录。外部设备映射不同:Windows是盘符,…

点云数据显示_vispy 显示 kitti 点云数据

国内博客找了一圈,居然没有发现有用 vispy 做可视化的代码,这里做一个简单的示例,代码大部分来自官方。import numpy as np import vispy.scene from vispy.scene import visuals import sys# Make a canvas and add simple view canvas vis…

python函数定义关键字_Python(2)深入Python函数定义

在Python中,可以定义包含若干参数的函数,这里有几种可用的形式,也可以混合使用:1. 默认参数最常用的一种形式是为一个或多个参数指定默认值。>>> def ask_ok(prompt,retries4,complaintYes or no Please!):while True:ok…

稳定婚姻(tarjan)

传送门 这道题一开始可能以为是二分图匹配……?不过后来发现和二分图没啥大关系。 简单分析之后发现,把夫妻之间连边(男性向女性连边),之后再将每对曾经是情侣的人连边(女性向男性连边)&#xf…

Webpack 常用命令总结以及常用打包压缩方法

前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约…

在Spring MVC Web应用程序中添加社交登录:单元测试

Spring Social 1.0具有spring-social-test模块,该模块为测试Connect实现和API绑定提供支持。 该模块已从Spring Social 1.1.0中删除,并由 Spring MVC Test框架替换。 问题在于,实际上没有有关为使用Spring Social 1.1.0的应用程序编写单元测…

CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

文章目录 1.模糊2.灰度3.亮度4.对比度5.饱和度6.色相旋转7.反色8.阴影9.透明度10.褐色CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性,…

laravel中使用offsetSet

首先不用offsetSet方法,使用laravel的硬添加属性如下: 下边使用offsetSet 转载于:https://www.cnblogs.com/qaing123/p/9672241.html

python做自动化控制postman_使用postman+newman+python做接口自动化测试

postman是一款API调试工具,可用于测试接口,相类似的工具还有jmeter、soupUI。通过postmannewmanpython可以批量运行调试接口,达到自动化测试的效果。1、PostMan安装共有两种方式,一种是chrome浏览器上的插件,一种是pos…

转3d视图快捷键_最全Solidworks快捷键,值得收藏!

SOLIDWORKS软件提供了很多实用的快捷键,如果我们熟练掌握这些快捷键无疑可以减轻工作强度和提高工作效率。当然我们也可以点击【工具】-【自定义】-【键盘】,自己定义一些快捷键。本文为大家整理一些常用的快捷键,多使用快捷键可以帮助我们节…