JavaScript的React Web库的理念剖析及基础上手指南

React Web的目的及意义非常明确: 让React Native代码跑在Web上 让一套代码运行在各个移动终端,对前端及业务来说,这是开发效率中一个质的提升。在项目初期,我们也曾向 React团队咨询过类似的问题,他们团队的核心同学 @vjeux 也认为这是非常酷的事情,也是他们未来想做的事情。也许在发布React Native for Android的时候,也会发布React Web也说不定。(YY一下)
技术架构
基于React Native的适配方案,有几个:
1.制定一个Bridge标准,RN与RW 各自用最优的方式实现这套标准。
比如基于Flex布局,我们实现一套一致的 Flex Component, <Flex> 、<Cell> 等。
2.完全向RN看齐,RW实现RN的所有能实现的API。
在讨论中,最终选择了后者。
因为React Web的理念,让React Native代码跑在Web端,那么就决定了RW只是一个构建及打包工具,脱离RN,RW的实现则没有太大的意义,那么整体的技术方向就非常明确了: 实现RN一致的Style、Component及API,最终通过构建工具编译成web版本。

示例

下面我们来看一下React Web项目的创建过程:
第一步:安装 React web 并进行相关配置
这一步操作主要是安装 react-web 包以及相关依赖,并配置 webpack 打包脚本等。
为了简化这一步操作,我们开发了命令行工具 react-web-cli 只需要执行两行命令即可。同时命令行工具还支持启动调试服务器、打包等功能,在后面介绍。
安装 cli 工具:

npm install react-web-cli -g

安装配置 React web 等:

react-web init <当前项目目录>

执行完成之后,会在你项目目录下面 npm install 相关库,并自动创建 web/webpack.config.js 文件,里面有一份写好的配置。此时目录结构为:

.
├── README.md
├── android/
├── index.android.js
├── index.ios.js
├── ios/
├── package.json
└── web/
 └── webpack.config.js

第二步:添加入口文件并进行相关配置
每个项目都需要有一个入口文件,通常用来引入调用其他组件并初始化项目,比如 index.ios.js 表示 iOS 平台上的该项目的入口文件。为了符合 React Native 的文件命名规范,我们创建一个 index.web.js 作为入口文件,并且需要在 webpack 中指定该文件为入口文件。打开 web/webpack.config.js 文件,修改 config 变量:

var config = {
 paths: {
 src: path.join(ROOT_PATH, '.'),
 index: path.join(ROOT_PATH, 'index.web'),
 },
};

然后我们创建 index.web.js 文件。这个文件其实跟 index.ios.js 非常像,只是略有不同。主要区别在于:iOS 只需要 AppRegistry.registerComponent('Awes', () => Awes); 即可让 Xcode 的 Native 代码接收处理你的 JS 代码,而 Web 端是需要插入到 DOM 节点中才可以用。因此我们需要在 index.web.js 最下面添加如下代码:

AppRegistry.registerComponent('Awes', () => Awes);
if (Platform.OS == 'web') {
 var app = document.createElement('div');
 document.body.appendChild(app);
 AppRegistry.runApplication('Awes', {
 rootTag: app
 });
}

然后在最上面 require 部分需要引入 Platform 组件。这样配置部分就已经处理完成了,执行 react-web start 命令即可启动调试服务器啦!

可以随便修改试下,跟 React Native 模拟器里面的体验几乎一样。
第三步:测试并打包 Web 版本代码
当你修改开发完,并对 Web 端也测试好了,就可以打包发布了。react-web-cli 工具打包的命令是:

react-web bundle

打包完成后,文件会存放在 web/output/ 目录下面,可以直接打开 index.html (如果 app 有请求操作,需要起本地服务器查看),再检查一下就可以发布了。
这个过程中发生了什么?
好奇的同学看到这里可能会有一些疑问,上面命令行工具的一些命令做了什么事情?为什么 React web 将 React Native 代码打包出一份用在 Web 端的代码?React web 安全可靠吗,里面都是什么东西?
这里简单的介绍下 React web 的实现原理和上面步骤实际做的事情。
React Web 将 React Native 组件做了 Web 端的实现
React 将代码与平台环境分离,多了一层,这样开发者可以在平台环境层面做一些处理,使得同样一份代码适应更多的平台环境等。
比如 react-canvas 按照 React 的语法书写代码,在平台环境层面做一些处理(将你 React 代码运行并用 canvas 渲染),然后实现特定目标(在移动端提高性能)。
React Native 中,一份代码能同时跑在 iOS 和 Android 上面,也是一样的道理。React Native 团队在对应平台的 Native app 上面做了一些处理,使其可以解析执行 React 语法的代码。
还有同构(isomorphic)的应用,服务器端使用 React + Node.js 生成 HTML,客户端使用 React 获取进行客户端相关交互和功能,也是一样的道理。
为此, React v0.14.x 版本开始,专门分成两个库 react 和 react-dom ,其实是把对浏览器平台的特殊处理剥离了出来,单独变成了 react-dom 库。
React Native 比较特殊的地方在于,组件最底层的实现是 Native 的实现,所以就不支持 span、div 等标签。而动画等,也是直接调用 Native 进行界面渲染。所以不支持 Web 端,但是绝大部分组件,都是可以用 Web 技术进行模拟实现。动画可以用 CSS3 、基础元素可以用同等 HTML 标签模拟、布局以及兼容性问题可以用 CSS 来处理,所以 React web 只需要把 React Native 的组件用 Web 技术重新实现一遍,借助 React 这一层,即可实现一份代码运行在多个平台上面。
举一个非常简单的例子,Text 组件:
React Native 的实现 是调用了很多 React Native 底层的代码实现的。
对于 Web 端,输出一行文本使用 <span> 标签即可,所以 React web 的实现 就直接搞一个 <span> 标签,绑一些事件什么的就 OK 了。
在 UI Explorer demo 中能跑起来的 React Native 组件,你都可以放心的用。
webpack 帮你切换打包目标
做出了兼容 Web 端的组件,那打包的时候岂不是要把所有要打包的组件中的 require('react-native') 全部更换成 require('react-web')?不然怎么用的我的 Web 组件打包?
强大的 webpack 附带了 alias 配置项可以帮你解决这个问题:

resolve: {
 alias: {
 'react-native': 'react-web',
 'ReactNativeART': 'react-art',
 },
 extensions: ['', '.js', '.jsx'],
},

这样在打包时,但凡 require('react-native') 的地方全都用 react-web 包替换,而 react-web 的 module.exports 与 react-native 的保持一致即可让代码不替换也可以工作。
此外配合插件还可以实现另外一种引入方法,请看下面。
通过 Haste 方法引入组件以提高性能
webpack 以及其他的支持 CommonJS 规范的打包工具,都会把文件中 require 的所有组件都打包在一起。对于 React Native 来说代码体积大小无关紧要,而在 Mobile web 来说,就要稍微重要一些了。特别是如果你的项目只需要 Text 组件,但由于 require('react-web') 结果把所有的组件全部打包进来了,就比较伤感。
基于 webpack 插件,还可以用另一种方式引入组件以解决这个问题,你可以叫它 Haste 方式。使用这种方式需要加载 webpack 插件 haste-resolver-webpack-plugin,默认的 webpack 配置已经帮你加载好了,你可以直接在组件里面这样用:

var Text = require('ReactText');

而不是以前那样:

var {Text} = require('react-native');

这样 webpack 打包时,对于前者,只会把那一个组件内容打包进来,因此可以减小体积、提升性能。这是怎么实现的呢?
加载了插件的 webpack 打包时,会先扫描所有组件并读取组件头部 @providesModule 的信息(比如 Text 组件的信息),然后当其他文件中 require 了这个组件名称,就会自动定位到这个文件进行打包。同时还可以区分平台,即便是同一个名字,打包时会区分平台去打包对应的文件(根据 index.xxx.js 的命名规则确定文件)。

(0)

相关推荐

  • React.js入门学习第一篇

    一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法

  • JavaScript中rem布局在react中的应用

    前面给大家分享了一个react项目(http://www.jb51.net/article/76085.htm),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化. 项目代码,欢迎fork和star,在线预览 REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cl

  • 深入理解JavaScript的React框架的原理

    如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道上, 请听我道来. Good old MVC 在一个交互式应用程序一切罪恶的根源是管理状态. "传统"的方式是MVC架构,或者一些变体. MVC提出你的模型是检验真理的唯一来源 - 所有的状态住在那里. 视图是源自模型,并且必须保持同步. 当模式的转变,

  • 基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • 由ReactJS的Hello world说开来

    这篇文章提供了代码实例和在React.js(一个Facebook工程师开发的被用于构建用户界面的Javascript库)中高水平的概念.这些概念会被详细的发表在下面的文章里.在此,我必须提示如果你是一名ReactJS专家并且感觉这些代码需要改善,请您把建议写信给我,我会及时适当的更新这篇文章/代码. 在我继续发表一些代码实例之前,我必须特别的提出:初学ReactJS会有一点困难,因为最近我一直在AngularJS上写代码.到现在为止,我需要承认他们之间在帮助我们做UI工作时有很大的不同.我将发表

  • 深入探讨前端框架react

    摘要: 最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下.下面是我在开发中遇到的坑,希望能给你帮助. 项目地址:https://github.com/baixuexiyang/react Issue:https://github.com/baixuexiyang/react/issues 欢迎star和fork! react优势: •仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界

  • 在React框架中实现一些AngularJS中ng指令的例子

    首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i> 比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面 <i className={&qu

  • 实现React单页应用的方法详解

    首先在学习这门框架前,你需要对以下知识有所了解: 1.原生JS基础 2.CSS基础 3.npm包管理基础 4.webpack构建项目基础      5.ES6规范 以上五个知识点也是目前学习其他前端框架所必须了解的前置任务. JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了.而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势.至于ES6规范虽然现在主流浏览器还不兼容,但可以

  • Reactor反应器的实现方法详解

    大多数应用都会使用ACE_Reactor::instance()提供的默认反应器实例.但是你也可以选择自己的反应器,这是因为ACE使用了Bridge模式(使用两个不同的类:一个是编程接口,另一个是实现,第一个类会把各个操作传给第二个类).例如使用线程池反应器实现:ACE_TP_Reactor* tp_reactor = new ACE_TP_Reactor;ACE_Reactor* my_reactor = new ACE_Reactor(tp_reactor, 1);//1表示my_react

  • 再次谈论React.js实现原生js拖拽效果引起的一系列问题

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘

随机推荐