如何在已有的 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 。

相关教程: 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