reactjs中key_如何将ReactJS扩展到现有的Web应用程序中

reactjs中key

Often times when diving into a new technology, whether it be a JavaScript framework or CSS methodology, we are faced with the challenge of How do I implement this cool new thing into my old busted site?. Many tutorials show how to start from scratch but many of us in the real world don't have that luxury.

通常，当探索一种新技术时，无论是JavaScript框架还是CSS方法，我们都面临着以下挑战： How do I implement this cool new thing into my old busted site? 。 许多教程显示了如何从头开始，但是现实世界中的许多人没有那么奢侈。

In this tutorial I'll give a few basic examples on how to "Sprinkle In" ReactJS and replace some existing code written in jQuery.

在本教程中，我将提供一些基本示例，说明如何“撒入” ReactJS并替换一些用jQuery编写的现有代码。

从jQuery到React ( From jQuery to React )

I was tasked recently with taking a large feature written solely with jQuery and rebuilding it in React. The process was daunting because of the sheer amount of jQuery dispersed throughout the codebase. Building entire UIs with jQuery is very possible (we've been doing it for years) but is difficult to accomplish in a clear and well-maintainble manner that scales.

我最近受命承担一个仅用jQuery编写的大型功能，并在React中对其进行重建。 由于整个代码库中散布着大量的jQuery，因此该过程令人生畏。 使用jQuery构建整个UI的可能性很高（我们已经做了很多年了），但是很难以清晰，易于维护的方式进行扩展。

Whether you're using Angular, Ember, Vue, React, or just jQuery, you're probably trying to accomplish the same thing developers have been doing for years:

无论您使用的是Angular，Ember，Vue，React还是仅使用jQuery，您都可能试图完成开发人员多年来一直在做的事情：

Render HTML > Receive User Events > Rerender HTML

渲染HTML>接收用户事件>渲染HTML

Because jQuery relies so heavily on selectors like .classes and #IDs for DOM manipulation, the HTML tends to be obfuscated with attributes whose sole purpose is telling jQuery they exist. This isn't too problematic with smaller codebases but can be with larger ones where it's difficult to decipher what classes are purely for CSS purposes and what JavaScript may be utilizing. If you've ever had to do a find for a .class or #ID selector in your HTML templates / JavaScript to change some functionality you know what I mean.

由于jQuery非常依赖于.classes和#IDs类的选择器#IDs进行DOM操作，因此HTML倾向于混淆属性，其唯一目的是告诉jQuery它们存在。 对于较小的代码库来说，这并不太成问题，但是对于较大的代码库而言，这可能是一个难题，因为很难解释仅出于CSS目的的类以及JavaScript可能利用的类。 如果您曾经必须在HTML模板/ JavaScript中find .class或#ID选择器，以更改某些功能，那么您知道我的意思。

Relying heavily on .classes and #IDs to select and manipulate your HTML can be brittle.

严重依赖.classes和#IDs来选择和操作HTML可能很脆弱。

So, what if your code is laced with jQuery or built on another framework entirely, how do you start replacing bits of UI with something like React?

因此，如果您的代码与jQuery捆绑在一起或完全在另一个框架上构建，您如何开始用React之类的东西来替换UI呢？

入门时要寻找什么 ( What to Look for When Getting Started )

包装/容器元素 (Wrapper / Container Element)

Whether the application is using jQuery or the next popular framework, most of the time there will be some sort of root element which wraps a piece of UI. If the codebase is using jQuery for a feature there is usually an element that acts like a wrapper selector. The wrapper element is selected using jQuery and utilized to dynamically make updates to the DOM.

无论应用程序使用的是jQuery还是下一个流行的框架，大多数时候都会有某种根元素来包装一个UI。 如果代码库将jQuery用于功能，则通常会有一个元素充当包装选择器。 wrapper元素是使用jQuery选择的，并用于动态更新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>

孤立状态与共享状态 (Isolated vs. Shared State)

Something to look for in your existing application is whether the state of your feature is isolated to a single container element or is shared between multiple elements.

在现有应用程序中需要寻找的是功能的状态是isolated到单个容器元素还是在多个元素之间shared 。

1. Isolated State - The state of the feature is isolated to a container element. Any interactivity with the feature via buttons, input fields, etc... is found within this wrapper / container element.

   隔离状态 -要素的状态与容器元素隔离。 在包装器/容器元素中可以找到通过按钮，输入字段等与功能的任何交互。

2. Shared State - The state of the feature is split between multiple elements. An example is a calendar being updated from a date dropdown from another place on the page. The menu and the calendar are in separate containers but share state and functionality.

   共享状态 -要素的状态在多个元素之间划分。 一个示例是从页面另一位置的日期下拉列表更新日历。 菜单和日历位于单独的容器中，但共享状态和功能。

I'm going to give 4 examples to demonstate the idea of Shared / Isolated state with jQuery and then ReactJS.

我将给出4个示例，以演示jQuery和ReactJS的共享/隔离状态的思想。

jQuery隔离状态的示例 ( Example of Isolated State with jQuery )

Let's say we have an existing web application which shows an emoji and a button to click and randomly display a new emoji. The code below is an example of a typical jQuery application where we select the most parent level item .mood-container and make changes dynamically.

假设我们有一个现有的Web应用程序，其中显示了表情符号和一个单击并随机显示新表情符号的按钮。 下面的代码是一个典型的jQuery应用程序的示例，其中我们选择最父级项目.mood-container并动态进行更改。

Here's the HTML for this example:

这是此示例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>

This isn't the only strategy to make DOM changes via jQuery but is very common.

这不是通过jQuery进行DOM更改的唯一策略，但很常见。

ReactJS隔离状态的示例 ( Example of Isolated State with ReactJS )

One of the benefits of using a library like React is when you take the above JavaScript and HTML and encapsulate it all inside a component. The result is a more reliable, maintainable, and reusable piece of functionality.

使用类似React这样的库的好处之一是，当您使用上述JavaScript和HTML并将其全部封装在component 。 结果是更可靠，可维护和可重用的功能。

This helps tremendously when working with large applications due to the rendering and updating being found together inside the component. I'm not referring to the mixing of concerns with logic and the view layer, but about how our JavaScript and HTML are organized in a cohesive manner as a component. This is generally the same idea practiced in all JavaScript frameworks, hence the term Framework.

当在大型应用程序中工作时，这将极大地帮助您，因为在component内部可以同时进行渲染和更新。 我不是在将关注点与逻辑和视图层混合在一起，而是关于我们JavaScript和HTML如何以一种紧密结合的方式组织为一个component 。 通常，所有JavaScript框架中都采用相同的想法，因此使用术语Framework 。

All frameworks typically:

所有框架通常：

1. Mount to a specified container (Like a div with the #ID of App).
   挂载到指定的容器（如具有App的#ID的div）。
2. Render content to that container.
   将内容渲染到该容器。
3. Is responsible for keeping track of and updating the content within the container.
   负责跟踪和更新容器中的内容。
4. Is sometimes responsible for the removal of the container.
   有时负责移走容器。

Here's our new HTML after integrating React:

这是集成React之后的新HTML：

<!--
    Demonstrates how ReactJS mounts itself 
    to a container and takes it from there.
-->
< div id = " mood-container " />

jQuery共享状态示例 ( Example of Shared State with jQuery )

We can easily do this with jQuery, however, things become muddled when one area of the site dynamically effects another area of the site using mere selectors alone. Again, when you use .classes and #IDs as selectors to manually manipulate the DOM, you're responsible for the overhead of keeping track of everything.

我们可以使用jQuery轻松地做到这一点，但是，当站点的一个区域仅使用选择器动态地影响站点的另一区域时，事情就会变得混乱。 同样，当您使用.classes和#IDs作为选择器来手动操作DOM时，您需要负责跟踪所有内容。

In this example we're sharing the mood name via the selectors .Mood__name and .Mood__button-name and updating the emoji in one container with a button in a separate container. This can probably be cleaned up a bit, but regardless, things get dirty pretty quick when trying to manage all of this with jQuery selectors alone.

在此示例中，我们通过选择器.Mood__name和.Mood__button-name共享心情名称，并在一个容器中使用一个单独容器中的按钮更新表情符号。 这可能可以清除一点，但是无论如何，当尝试单独使用jQuery选择器来管理所有这些时，事情很快就会变得肮脏。

ReactJS的共享状态示例 ( Example of Shared State with ReactJS )

In ReactJS, there are essentially two commonly used way of sharing state across multiple components:

在ReactJS中，基本上有两种在多个组件之间共享状态的常用方法：

1. Wrap the components in a container to manage state and pass data / functions down as props to child components.
   将组件包装在容器中以管理状态，并将数据/功能作为道具传递给子组件。
2. Use something like Redux to place state and actions at the global level and connect your components to it.
   使用Redux之类的东西将状态和动作放在全局级别，并将您的组件连接到全局级别。

使用共享状态容器 (Using a Container for Shared State)

This a very common practice especially for SPAs or pieces of UI that are fully rendered with React. Because we want our components to communicate with one another, we wrap them in a parent level component and have it pass down properties to update each child component. This is essentially how ReactJS works out of the box and is nothing new.

这是非常常见的做法，尤其是对于使用React完全渲染的SPA或UI片段。 因为我们希望我们的组件彼此通信，所以我们将它们包装在父级组件中，并使其传递属性以更新每个子组件。 本质上，这就是ReactJS开箱即用的方式，并不是什么新鲜事。

This method works well in scenerios where you have the ability to wrap much of the UI with a single parent component. This isn't the case in many previously established applications but depending on the layout of your UI could be an option.

此方法在Scenerios中效果很好，在该场景中，您可以使用单个父组件包装大部分UI。 在许多以前建立的应用程序中不是这种情况，但是可以根据您UI的布局进行选择。

使用Redux共享状态 (Using Redux for Shared State)

Libraries like Redux (and the flux variations) make it easier for multiple components to communicate from different areas of your application. This shared state allows you to connect actions and state properties to your components by updating the global object Redux gives you.

像Redux（和磁通量变化）之类的库使多个组件可以更轻松地从应用程序的不同区域进行通信。 此共享状态允许您通过更新全局对象Redux为您提供的操作和状态属性与组件连接。

摘要 ( Summary )

Hopefully this gives you a good understanding of what to look for and how to integrate ReactJS into your existing application. The main takeaway should be that if you're using jQuery for a piece of UI than you can most likely replace the container element with a mounted React component. If you need to share state across multiple components than you can use the container method or integrate a library like Redux.

希望这可以使您更好地了解要查找的内容以及如何将ReactJS集成到现有应用程序中。 主要的收获应该是，如果您将jQuery用于某个UI，则您很有可能用已安装的React组件替换容器元素。 如果您需要在多个组件之间共享状态，则可以使用容器方法或集成Redux之类的库。

Thanks for reading!

谢谢阅读！

-Andrew Del Prete

-安德鲁·德尔·普雷特（Andrew Del Prete）

翻译自: https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application

reactjs中key