原文: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

相关教程: Getting Started with React

  1. 独立状态 -  这种状态独立存在于 container 元素中。所有按钮、输入框等的交互状态都由这个 wrapper / container 元素分享。

  2. 共享状态 - 这种状态由多个元素共享。比如,从页面其它位置的日期下拉框中更新日历。 菜单和日历在不同的容器中,但是它们的状态是共享的。

我将用 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

所有框架通常都是:

  1. 挂载到特殊的容器 container上 ( 比如 App 中名为 #ID 的 div )。
  2. 向容器 container 中渲染内容。
  3. 负责跟踪和更新容器 container 中的内容。
  4. 负责移除容器 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 中,通常有两个分享组件状态的方法:

  1. 将组件包裹在 container 元素中去管理状态,将数据/函数作为 props 向组件传递。
  2. 使用类似 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的更多相关文章

  1. birt 集成到现有的web应用中

     我们已经有了一个Javaweb应用,现在要实现对报表的集成 我的应用是这个样子的  说明: 1)  这里使用的是birt4.4版本的, 下载birt-runtime-4.4.zip(在官方下载),然 ...

  2. 如何在已有的 Web 应用中使用 ReactJS

    原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能是一个 JavaScript 框架, ...

  3. web自动化测试中绕开验证码登陆的方式

    web自动化测试中登陆需验证码是很大的一个困扰.现推荐一种简单的避开验证码登陆的方式,先代码进入登录页,人工输入验证码登录后浏览器自动保存cookie,再在新的标签中登录. 具体代码如下: publi ...

  4. ASP.NET WEB API 中的路由调试与执行过程跟踪

    路由调试 RouteDebugger 是调试 ASP.NET MVC 路由的一个好的工具,在ASP.NET WEB API中相应的有 WebApiRouteDebugger ,Nuget安装 Inst ...

  5. Web应用中的轻量级消息队列

    Web应用中为什么会需要消息队列?主要原因是由于在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的insert,update之类的请求同时到达mysql,直接导致无数的行锁表锁,甚 ...

  6. ASP.NET Web API中的JSON和XML序列化

    ASP.NET Web API中的JSON和XML序列化 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok ...

  7. 巨人大哥谈Web应用中的Session(session详解)

    巨人大哥谈Web应用中的Session(session详解) 虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术. ...

  8. python web自动化测试中失败截图方法汇总

    在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法:   1.在tearDown中写入截图的 ...

  9. web.xml中的ServletContextListener

    要想了解ServletContextListener,先看看web.xml中的<listener>配置. 一)web.xml中的内容载入顺序: 首先能够肯定的是,载入顺序与它们在 web. ...

随机推荐

  1. NodeJs的async

    async.auto最强大的一个api,它适合逻辑复杂的代码,代码中你一部分需要串行,两部分相互依赖,一部分又需要并行,代码中不需要依赖,这个时候你就可以通过auto随性所欲控制你的代码逻辑. var ...

  2. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  3. ELK学习笔记(四)SpringBoot+Logback+Redis+ELK实例

    废话不多说,直接上干货,首先看下整体应用的大致结构.(整个过程我用到了两台虚拟机  应用和Shipper 部署在192.168.25.128 上 Redis和ELK 部署在192.168.25.129 ...

  4. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...

  5. kvm之十二:虚拟机迁移

    虚拟机迁移该方式要确保虚拟机是关机状态.virsh shutdown snalevirsh dumpxml snale > /etc/libvirt/qemu/snale_qy.xml  // ...

  6. ASP VNext 开源服务容错处理库Polly使用文档

    在进入SOA之后,我们的代码从本地方法调用变成了跨机器的通信.任何一个新技术的引入都会为我们解决特定的问题,都会带来一些新的问题.比如网络故障.依赖服务崩溃.超时.服务器内存与CPU等其它问题.正是因 ...

  7. Android中文API (110) —— CursorTreeAdapter

    前言 本章内容是android.widget.CursorTreeAdapter,版本为Android 3.0 r1,翻译来自"深夜未眠",欢迎访问它的博客:"http: ...

  8. 设计模式之 观察者模式详解(包含观察者模式JDK的漏洞以及事件驱动模型)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 本章我们讨论一个除前面的单例 ...

  9. Ubuntu16.0.4下搭建pycharm 2018.3.22

    一.首先安装Java jdk Java JDK有两个版本,一个开源版本Openjdk,还有一个Oracle官方版本jdk.下面记录在Ubuntu 16.04上安装Java JDK的步骤. 安装open ...

  10. 【MySql系列】MySql踩坑系列

    问题一:远程登录报错Host '192.168.181.201' is not allowed to connect to this MySQL server 解决: 问题二:MySql access ...