JavaScript React Web库概念分析及基本入门指南

React Web的目的和意义非常明确。让React Native代码在Web上运行，让一组代码在每个移动终端上运行，对于前端和业务来说，都是开发效率的质的提升。项目刚开始的时候，我们也咨询过React团队类似的问题，他们的核心同学@vjeux也觉得这是一件很酷的事情，也是他们未来想做的事情。也许当你为安卓发布React Native的时候，你也会发布React Web。(YY)技术架构基于React Native的适配方案。有几种方案：1。建立一个Bridge标准，RN和RW分别以最好的方式执行这套标准。例如，基于Flex布局，我们实现了一组一致的Flex组件、Flex、Cell等。2.与RN完全一致，RW实现了RN可以实现的所有API。在讨论中，最终选择了后者。由于React web的思想，React Native代码运行在web端，这就决定了RW只是一个构建和打包工具。没有RN，RW的实现意义不大，所以整体技术方向很明确。实现RN一致的Style、Component和API，最后通过构建工具编译成Web版本。

例子

让我们来看看React web项目的创建过程：步骤1:安装React Web并进行配置。这一步主要是安装react-web包和相关的依赖项，并配置webpack打包脚本。为了简化这一步，我们开发了一个命令行工具react-web-cli，它只需要执行两行命令。同时命令行工具还支持启动调试服务器和打包的功能，后面会介绍。安装cli工具：

Npm安装react-web-cli -g安装和配置React web等。

在完成react-web init的当前项目目录的执行后，npm install相关库将位于您的项目目录下，并且web/webpack.config.js文件将自动创建，其中包含一个书面配置。此时，目录结构为：readme . MDandroid/ios/package . JSONweb/它通常用于引入和调用其他组件以及初始化项目。例如，index.ios.js代表这个项目在ios平台上的入口文件。为了符合React Native的文件命名标准，我们创建了一个index.web.js作为入口文件，我们需要在webpack中将这个文件指定为入口文件。打开web/webpack.config.js文件并修改配置变量：

var config={ PATH s : { src : } PATH . join(ROOT _ PATH，'。)，index: path.join(ROOT_PATH，' index.web ')，}，}；然后我们创建index.web.js文件。实际上，这个文件与index.ios.js非常相似，只是略有不同。主要区别是iOS只需要appregistory . registercomponent(' awes '，()=awes)；您可以让Xcode的Native代码接收和处理您的JS代码，而Web端需要插入DOM节点才能使用。因此，我们需要在index.web.js的底部添加以下代码：

appregistry . registercomponent(' Awes '，()=Awes)；如果(平台。OS==' web '){ var app=document . create element(' div ')；document . body . appendchild(app)；appregistry . run application(' Awes '，{ root tag : app })；}然后需要在顶部的require部分引入Platform组件。这样就已经处理好了配置部分，执行react-web start命令就可以启动调试服务器了！

可以随意修改，和React Native模拟器中的体验差不多。第三步：测试并打包Web版本代码。当您完成了对Web端的修改、开发和测试之后，您就可以打包并发布它了。react-web-cli工具打包的命令有：

react-web捆绑包打包后，文件会存储在web/output/目录下，可以直接打开index.html(如果app有请求操作，需要从本地服务器查看)，再次检查后即可发布。过程中发生了什么？好奇的同学在这里可能会有一些疑问。上述命令行工具的一些命令做了什么？为什么React Web包将原生代码反应成在Web端使用的代码？React web安全可靠吗？里面有什么？下面简单介绍一下React web的实现原理，以及在以上步骤中实际做的事情。反应网络在网络端实现反应本地组件。React将代码从平台环境中分离出来，增加了一层，让开发人员可以在平台环境层面做一些处理，让同样的代码适应更多的平台环境。例如，react-canvas根据react语法编写代码，并在平台环境级别进行一些处理(运行您的React代码并使用canvas进行渲染)，然后实现特定的目标(提高移动端的性能)。在React Native中，一个代码可以同时在iOS和安卓上运行，也是这个道理。React Native团队在相应平台的Native应用程序上做了一些处理，这样它就可以解析执行React语法的代码。还有一种同构应用，服务器使用React Node.js生成HTML，客户端使用React获取客户端相关的交互和功能，也是这个道理。所以从React v0.14.x版本开始，就被分成了两个库：React和react-dom，实际上剥离了浏览器平台的特殊处理，单独成为了react-dom库。React Native的特别之处在于组件的最低实现是原生的，因此不支持span和div等标签。和动画等。也直接调用Native进行接口呈现。因此不支持Web，但大部分组件都可以通过Web技术模拟实现。动画可以是CSS3，基本元素可以用同样的HTML标签模拟，布局和兼容性问题可以用CSS处理。因此，React Web只需要用Web技术重新实现React Native的组件，在reactlayer的帮助下，一个代码可以在多个平台上运行。举一个非常简单的例子，文本组件：React Native的实现是通过调用React Native底部的大量代码来实现的。在Web端，一个span标签可以用来输出一行文本，所以React web的实现会直接做一个span标签，绑定一些事件什么的就可以了。您可以放心地使用任何可以在用户界面浏览器演示中运行的React Native组件。Webpack帮助您切换了打包目标，并制作了与网络兼容的组件，因此在打包时，您不需要将所有要打包的组件替换为require('react-native ')和require('react-web ')吗？不然怎么用我的Web组件打包？强大的webpack附带别名配置项目来帮助您解决这个问题：

resolve : { Alias : { ' react-native ' : ' react-web '，' reatative ' : ' react-art '，}，Extensions 3360 [' '，'。js '，'。jsx']，}，每个需要的地方(' react-native ')都被react-web包和模块替换，react-web的导出和react-native的导出是一致的，这样代码就可以在没有替换的情况下工作。此外，插件还可以实现另一种介绍方法，请参见下文。webpack和其他支持CommonJS规范的打包工具将打包文件中所有需要的组件，通过加速方法引入组件来提高性能。代码大小对React Native来说并不重要，但对Mobile web来说更重要一点。特别是，如果您的项目只需要文本组件，但所有组件都打包为require('react-web ')的结果，这是相当可悲的。基于webpack插件，您可以用另一种方式引入组件来解决这个问题，您可以称之为加速。这样，您需要加载webpack插件haust-resolver-web pack-plugin。默认的webpack配置已经为您加载，因此您可以直接在组件中使用它：

var Text=require(' ReactText ')；而不是以前的样子：

var { Text }=require(' react-native ')；这样，在打包webpack时，只会为前者打包该组件的内容，这样可以减少体积，提高性能。这是如何实现的？在打包加载了插件的webpack时，将扫描所有组件，并首先读取组件头@providesModule的信息(如Text组件的信息)。然后，当其他文件中需要组件名时，将自动定位该文件进行打包。同时也可以区分平台，即使同名，打包时也会区分平台打包对应的文件(按照index.xxx.js的命名规则)。