如何在现有的 Web 应用中使用 ReactJS
原文:How to Sprinkle ReactJS into an Existing Web Application
译者:nzbin
当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?
。很多教程讲述了如何从头开始,但却很难运用到实际工作中。
在这篇教程中,我会通过一些很基本的例子讲解如何灵活运用 ReactJS,以及替换使用 jQuery 写的代码。
从 jQuery 到 React
我最近的任务是用 React 重构一个使用 jQuery 写的功能。这个过程困难重重,因为大量的 jQuery 分散在代码段中。使用 jQuery 构建所有的 UI 是可能的(我们已经这样做了很多年),但是在规模变大之后,将变得混乱且难以维护。
无论你使用 Angular, Ember, Vue, React, 或者只是 jQuery,你所做的事情和开发者多年来所做的事情是一样的:
渲染 HTML > 接收用户事件 > 重新渲染 HTML
因为 jQuery 非常依赖选择器比如 .classes
和 #IDs
去控制 DOM,所以大量的属性会使 HTML 变得容易混淆,而这些属性的目的只是方便 jQuery 查找。如果代码量比较小,这是没有问题的, 但是如果代码量庞大,就会很难知道哪些类用于 CSS,哪些类用于 JavaScript。如果你之前为了改变一个功能而在 HTML 模板或 JavaScript 中查找 find
一个 .class
或者 #ID
选择器,你应该明白我说的。
过渡依赖
.classes
和#IDs
的选择来操纵 HTML 并不轻松。
所以,如果你的代码是用 jQuery 或者其它框架所写,那么应该如何使用 React 去替换这些 UI 片段?
开始之前应该了解的事情
Wrapper / Container 元素
无论使用 jQuery 还是下一个流行框架开发应用,大多数情况都是用一个根元素包裹 UI 片段。如果代码库使用 jQuery,通常会有一个元素充当 wrapper 选择器。使用 jQuery 选择 wrapper 元素,它被用于动态更新 DOM。
<!--
.MyAwesomeFeature acts as a container to select
and manipulate child components with jQuery.
-->
<div class="MyAwesomeFeature">
<div class="MyAwesomeFeature__title"></div>
<div class="MyAwesomeFeature__image"></div>
</div> <script>
var container = $(".MyAwesomeFeature");
$(".MyAwesomeFeature__title", container).text("Hello World!"); // Other DOM changes, event handlers, etc...
</script>
独立状态 vs. 共享状态
可以看一下你的应用中的功能状态是独立 isolated
于 container 元素还是在多个元素中共享 shared
。
独立状态 - 这种状态独立存在于 container 元素中。所有按钮、输入框等的交互状态都由这个 wrapper / container 元素分享。
- 共享状态 - 这种状态由多个元素共享。比如,从页面其它位置的日期下拉框中更新日历。 菜单和日历在不同的容器中,但是它们的状态是共享的。
我将用 jQuery 和 ReactJS 做的 4 个例子解释共享/独立状态的概念。
用 jQuery 实现独立状态
假设我们有一个 web 应用,它展示了一个 emoji,当点击按钮,会随机展示一个新的 emoji。下面的代码是一个典型的 jQuery 应用,我们选择父级元素 .mood-container
,然后动态改变内容。
以下是例子 的 HTML:
<!--
Demonstrates how jQuery can be used to
use a container as a selector and update
the content within.
-->
<div id="mood-container">
<div class="Mood">
<div class="Mood__emoji"></div>
<div class="Mood__name">[ Emoji Placeholder ]</div>
<button class="Mood__button">Random Mood</button>
</div>
</div>
See the Pen Isolated state with jQuery by Andrew Del Prete (@andrewdelprete) on CodePen.
这并不是使用 jQuery 更改 DOM 的唯一策略,但很常见。
用 ReactJS 实现独立状态
使用如 React 的库的好处之一就是可以将上面的 JavaScript 和 HTML 封装成一个组件 component
。它是一个更可靠、可维护、可重用的功能部件。
这在处理大型应用时非常有用,因为组件 component
的渲染和更新是同步的。我并不是指将关注点与逻辑和视图层混合在一起,而是如何将 JavaScript 和 HTML 以组件 component
的形式组织代码。这是所有 JavaScript 框架的共同理念,因此被称为 Framework
。
所有框架通常都是:
- 挂载到特殊的容器 container上 ( 比如
App
中名为#ID
的 div)。
- 向容器 container 中渲染内容。
- 负责跟踪和更新容器 container 中的内容。
- 负责移除容器 container 中的内容。
以下是使用 React 整合后的新的 HTML:
<!--
Demonstrates how ReactJS mounts itself
to a container and takes it from there.
-->
<div id="mood-container" />
See the Pen Isolated state with ReactJS by Andrew Del Prete (@andrewdelprete) on CodePen.
用 jQuery 实现共享状态
使用 jQuery 可以很容易实现,但是,如果一个区域动态影响另一个单独使用选择器的区域时,可能会变得混乱。另外,当你使用 .classes
以及 #IDs
作为选择器手动控制 DOM 的时候,你要负责跟踪所有事情的开销。
See the Pen Shared state with jQuery by Andrew Del Prete (@andrewdelprete) on CodePen.
在这个例子中,我们通过 .Mood__name
和 .Mood__button-name
选择器分享 mood name ,并且通过一个容器中的按钮去更新另一个容器中的 emoji 。这还可以写的更简单一些,但是不管怎样,当尝试用 jQuery 选择器单独管理所有这些事情时,就会变得很糟糕。
用 ReactJS 实现共享状态
在 ReactJS 中,通常有两个分享组件状态的方法:
- 将组件包裹在 container 元素中去管理状态,将数据/函数作为 props 向组件传递。
- 使用类似 Redux 的工具在全局定义状态和 actions,然后将组件挂载上去。
使用 Container 分享状态
这是使用 React 渲染比较常见的方式,尤其 SPA 应用或者 UI 片段。因为我们希望组件之间通信,所以我们将它们放置在父级组件中,然后向下传递属性来更新每个子组件。这是 ReactJS 最基本的工作方式。
这种方式适用于多个 UI 组件被一个父组件包裹的情况。很多之前创建的应用可能不适合,但是可以根据 UI 布局情况选择使用。
See the Pen Shared state with ReactJS - Container by Andrew Del Prete (@andrewdelprete) on CodePen.
使用 Redux 分享状态
类似 Redux(flux 的另一种实现)的库可以很容易的实现应用中不同组件之间的通信。可以将 actions 和状态属性挂载到组件,通过更新全局对象 Redux 来分享状态。
See the Pen Shared state with ReactJS - Redux by Andrew Del Prete (@andrewdelprete) on CodePen.
总结
我希望这篇文章可以让你更好地了解需要关注的内容以及如何将 ReactJS 运用到现有的应用中。主要的解决方法就是,如果你使用 jQuery 处理 UI 片段,那么你可以将容器元素替换成一个 React 组件。如果你需要在多个组件中分享状态,那么你可以使用容器方法或者类似 Redux 的库。
感谢阅读!
-Andrew Del Prete
如何在现有的 Web 应用中使用 ReactJS的更多相关文章
- birt 集成到现有的web应用中
我们已经有了一个Javaweb应用,现在要实现对报表的集成 我的应用是这个样子的 说明: 1) 这里使用的是birt4.4版本的, 下载birt-runtime-4.4.zip(在官方下载),然 ...
- 如何在已有的 Web 应用中使用 ReactJS
原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能是一个 JavaScript 框架, ...
- web自动化测试中绕开验证码登陆的方式
web自动化测试中登陆需验证码是很大的一个困扰.现推荐一种简单的避开验证码登陆的方式,先代码进入登录页,人工输入验证码登录后浏览器自动保存cookie,再在新的标签中登录. 具体代码如下: publi ...
- ASP.NET WEB API 中的路由调试与执行过程跟踪
路由调试 RouteDebugger 是调试 ASP.NET MVC 路由的一个好的工具,在ASP.NET WEB API中相应的有 WebApiRouteDebugger ,Nuget安装 Inst ...
- Web应用中的轻量级消息队列
Web应用中为什么会需要消息队列?主要原因是由于在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的insert,update之类的请求同时到达mysql,直接导致无数的行锁表锁,甚 ...
- ASP.NET Web API中的JSON和XML序列化
ASP.NET Web API中的JSON和XML序列化 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok ...
- 巨人大哥谈Web应用中的Session(session详解)
巨人大哥谈Web应用中的Session(session详解) 虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术. ...
- python web自动化测试中失败截图方法汇总
在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法: 1.在tearDown中写入截图的 ...
- web.xml中的ServletContextListener
要想了解ServletContextListener,先看看web.xml中的<listener>配置. 一)web.xml中的内容载入顺序: 首先能够肯定的是,载入顺序与它们在 web. ...
随机推荐
- NodeJs的async
async.auto最强大的一个api,它适合逻辑复杂的代码,代码中你一部分需要串行,两部分相互依赖,一部分又需要并行,代码中不需要依赖,这个时候你就可以通过auto随性所欲控制你的代码逻辑. var ...
- 前端的UI设计与交互之字体篇
跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...
- ELK学习笔记(四)SpringBoot+Logback+Redis+ELK实例
废话不多说,直接上干货,首先看下整体应用的大致结构.(整个过程我用到了两台虚拟机 应用和Shipper 部署在192.168.25.128 上 Redis和ELK 部署在192.168.25.129 ...
- salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning
lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...
- kvm之十二:虚拟机迁移
虚拟机迁移该方式要确保虚拟机是关机状态.virsh shutdown snalevirsh dumpxml snale > /etc/libvirt/qemu/snale_qy.xml // ...
- ASP VNext 开源服务容错处理库Polly使用文档
在进入SOA之后,我们的代码从本地方法调用变成了跨机器的通信.任何一个新技术的引入都会为我们解决特定的问题,都会带来一些新的问题.比如网络故障.依赖服务崩溃.超时.服务器内存与CPU等其它问题.正是因 ...
- Android中文API (110) —— CursorTreeAdapter
前言 本章内容是android.widget.CursorTreeAdapter,版本为Android 3.0 r1,翻译来自"深夜未眠",欢迎访问它的博客:"http: ...
- 设计模式之 观察者模式详解(包含观察者模式JDK的漏洞以及事件驱动模型)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 本章我们讨论一个除前面的单例 ...
- Ubuntu16.0.4下搭建pycharm 2018.3.22
一.首先安装Java jdk Java JDK有两个版本,一个开源版本Openjdk,还有一个Oracle官方版本jdk.下面记录在Ubuntu 16.04上安装Java JDK的步骤. 安装open ...
- 【MySql系列】MySql踩坑系列
问题一:远程登录报错Host '192.168.181.201' is not allowed to connect to this MySQL server 解决: 问题二:MySql access ...