小谈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
小谈React、React Native、React Web相关推荐
- 什么是 Native、Web App、Hybrid、React Native和Weex?
一句话概要 Native.Web App.Hybrid.React Native(后面以RN简称).Weex 间的异同点,后期同步小程序和PWA. App常用开发模式简介 此处App为应用,appli ...
- 技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
- 什么是 Native、Web App、Hybrid、React Native 和 Weex?
(点击上方公众号,可快速关注) 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句话概要 Native.Web App.Hybrid.React N ...
- native react 常用指令_React Native入门基础篇(一)
学习一次,随处书写.(以下文字来自各大网上资料整理而来,侵删!) 概述 使用React为Android和iOS创建本机应用 React Native将本机开发的最佳部分与React(用于构建用户界面的 ...
- 如何将React App转换为React Native
I have been working on a lot of mobile projects lately - including Cordova, PhoneGap, React Native, ...
- native react ssh_React Native踩坑笔记(持续更新中...)
最近发现市场上对React Native开发人员的需求挺多的,自己就想学习一下React Native,多一门技术,好将来买个好价位.嘿嘿! 在学习React Native中碰到了不少坑,再次记录下来 ...
- native react 更新机制_react-native热更新全方位讲解
最近在研究热更新技术,看了网上各个大佬的博客,整体流程上总是卡壳.跳了几天坑,刚刚终于把简单的热更新流程跑通,现在也正在一边学习更新,一边整理资料,在此篇博客上记录操作流程,希望我的实践能帮助各位同行 ...
- react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
- native react 折线图_react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
最新文章
- C语言fstat函数获取文件的大小
- asp接收ajax乱码_Asp中处理AJAX乱码问题总结
- dp主机_MODBUS 和 PROFIBUS-DP 协议有什么区别
- 安卓学习笔记41:全球定位系统
- 先进软件开发技术与工具
- sms实现wap push的方法和格式
- Android域名解析优先ipv6,IPv6 域名解析原理及编程实现
- PX4从放弃到精通(十八):参数
- C#生成Code39条形码【非条形码字体】
- 【欧拉降幂公式】【欧拉函数】
- antd picker 使用 如何_antd-RangePicker
- WORD文档无法编辑解决
- 自媒体文章一文多发的几种方式
- win10主题更换_利用termuxapi手机定时更换网络随机壁纸;免费申请小米收款宝
- 华为手机自带邮箱如何添加新浪邮箱账号
- 网页设计(六)——基于HTML+CSS框架的网页设计实例
- C语言C程序的构成,C语言程序的构成.doc
- 【搬家】WebChat网络聊天室开发笔记
- 美通企业日报 | 阿斯利康在京建中国北部总部;安踏用废弃塑料瓶打造环保服装...
- 为什么设置了smtp并已开启,qq邮箱发邮件还是不好使