diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md
index 5bc8b25703..d85efbab3a 100644
--- a/content/docs/integrating-with-other-libraries.md
+++ b/content/docs/integrating-with-other-libraries.md
@@ -1,26 +1,26 @@
 ---
 id: integrating-with-other-libraries
-title: Integrating with Other Libraries
+title: 与第三方库协同
 permalink: docs/integrating-with-other-libraries.html
 ---
 
-React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
+React 可以被用于任何 web 应用中。它可以被嵌入到其他应用,且需要注意,其他的应用也可以被嵌入到 React。本指南将介绍一些更常见的用例,专注于与 [jQuery](https://jquery.com/) 和 [Backbone](http://backbonejs.org/) 进行整合,同样的思路还可以应用于将组件与任意现有代码集成。
 
-## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins}
+## 集成带有 DOM 操作的插件 {#integrating-with-dom-manipulation-plugins}
 
-React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
+React 不会理会 React 自身之外的 DOM 操作。它根据内部虚拟 DOM 来决定是否需要更新,而且如果同一个 DOM 节点被另一个库操作了,React 会觉得困惑而且没有办法恢复。
 
-This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
+这并不意味着 React 与其他操作 DOM 的方式不能结合,也不一定结合困难,只不过需要你去关注每个库所做的事情。
 
-The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `<div />`.
+避免冲突的最简单方式就是防止 React 组件更新。你可以渲染无需更新的 React 元素,比如一个空的 `<div />`。
 
-### How to Approach the Problem {#how-to-approach-the-problem}
+### 如何解决这个问题 {#how-to-approach-the-problem}
 
-To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin.
+为了证明这一点,我来草拟一个用于通用 jQuery 插件的 wrapper
 
-We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin.
+我们会添加一个 [ref](/docs/refs-and-the-dom.html) 到这个根 DOM 元素。 在 `componentDidMount` 中,我们能够获取它的引用这样我们就可以把它传递给 jQuery 插件了。
 
-To prevent React from touching the DOM after mounting, we will return an empty `<div />` from the `render()` method. The `<div />` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
+为了防止 React 在挂载之后去触碰这个 DOM,我们会从 `render()` 函数返回一个空的 `<div />`。这个 `<div />` 元素既没有属性也没有子元素,所以 React 没有理由去更新它,使得 jQuery 插件可以自由的管理这部分的 DOM:
 
 ```js{3,4,8,12}
 class SomePlugin extends React.Component {
@@ -39,21 +39,21 @@ class SomePlugin extends React.Component {
 }
 ```
 
-Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks.
+注意我们同时定义了 `componentDidMount` 和 `componentWillUnmount` [生命周期函数](/docs/react-component.html#the-component-lifecycle)。许多 jQuery 插件绑定事件监听到 DOM 上,所以在 `componentWillUnmount` 中注销监听是很重要的。如果这个插件没有提供一个用于清理的方法,你很可能会需要自己来提供一个,为了避免内存泄漏要记得把所有插件注册的监听都移除掉。
 
-### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin}
+### 集成 jQuery Chosen 插件 {#integrating-with-jquery-chosen-plugin}
 
-For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments `<select>` inputs.
+对于应用这些概念的更具体的一个例子,我们给这个用于增强 `<select>` 输入的 [Chosen](https://harvesthq.github.io/chosen/) 插件写一个最小的 wrapper。
 
->**Note:**
+>**注意:**
 >
->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance.
+>仅仅是因为可能,但这并不意味着这是构建 React 应用的最佳方式。我们鼓励大家尽可能的使用 React 组件。组件在 React 应用中更易于复用,并且在大多数情况下能更好地控制其行为和显示。
 
-First, let's look at what Chosen does to the DOM.
+首先,我们来看下 Chosen 对 DOM 做了哪些操作
 
-If you call it on a `<select>` DOM node, it reads the attributes off of the original DOM node, hides it with an inline style, and then appends a separate DOM node with its own visual representation right after the `<select>`. Then it fires jQuery events to notify us about the changes.
+如果你在一个 `<select>` DOM 节点上调用了它,它会读取原 DOM 节点的属性,使用行内样式隐藏它,然后紧挨着这个 `<select>` 之后增加一个独立的具有它自身显示表现的 DOM 节点。然后它会在值变化的时候触发 jQuery 事件来通知我们这些变化。
 
-Let's say that this is the API we're striving for with our `<Chosen>` wrapper React component:
+以下代码是我们最终要实现的效果:
 
 ```js
 function Example() {
@@ -67,9 +67,9 @@ function Example() {
 }
 ```
 
-We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity.
+为了简化,我们将它实现为 [uncontrolled component](/docs/uncontrolled-components.html)
 
-First, we will create an empty component with a `render()` method where we return `<select>` wrapped in a `<div>`:
+首先,我会创建一个空的组件,它的 `render()` 函数我们返回一个包含 `<select>` 的 `<div>`:
 
 ```js{4,5}
 class Chosen extends React.Component {
@@ -85,9 +85,9 @@ class Chosen extends React.Component {
 }
 ```
 
-Notice how we wrapped `<select>` in an extra `<div>`. This is necessary because Chosen will append another DOM element right after the `<select>` node we passed to it. However, as far as React is concerned, `<div>` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes.
+注意我们为什么要把 `<select>` 使用一个额外的 `<div>` 包裹起来。这是很必要的,因为 Chosen 会紧挨着我们传递给它的 `<select>` 节点追加另一个 DOM 元素。然而,对于 React 来说 `<div>` 总是只有一个子节点。这样我们就能确保 React 更新不会和 Chosen 追加的额外 DOM 节点发生冲突。在 React 工作流之外修改 DOM 是非常重大的事情,你必须确保 React 没有理由去触碰那些节点。
 
-Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `<select>` node in `componentDidMount`, and tear it down in `componentWillUnmount`:
+接下来,我们会实现生命周期函数。我们需要在 `componentDidMount` 中使用 `<select>` 的引用初始化 Chosen,并且在 `componentWillUnmount` 中将其销毁:
 
 ```js{2,3,7}
 componentDidMount() {
@@ -100,17 +100,17 @@ componentWillUnmount() {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010)
 
-Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method:
+注意 React 不会给 `this.el` 字段赋予特殊的含义。它能够工作只是因为我们之前在 `render()` 函数中把一个 `ref` 赋值给了这个字段:
 
 ```js
 <select className="Chosen-select" ref={el => this.el = el}>
 ```
 
-This is enough to get our component to render, but we also want to be notified about the value changes. To do this, we will subscribe to the jQuery `change` event on the `<select>` managed by Chosen.
+到此已经足够让我们的组件去渲染了,但我们同时希望在值变化的时候被通知到。要做到这点,我们需要在订阅由 Chosen 管理的 `<select>` 上的 jQuery `change` 事件。
 
-We won't pass `this.props.onChange` directly to Chosen because component's props might change over time, and that includes event handlers. Instead, we will declare a `handleChange()` method that calls `this.props.onChange`, and subscribe it to the jQuery `change` event:
+我们不直接吧 `this.props.onChange` 传递给 Chosen 是因为 组件的 props 可能随时间而变化,而且这也包括事件处事函数。对应的,我们会定义一个 `handleChange()` 方法来调用 `this.props.onChange`,并且订阅 jQuery `change` 事件:
 
 ```js{5,6,10,14-16}
 componentDidMount() {
@@ -131,11 +131,11 @@ handleChange(e) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/bWgbeE?editors=0010)
 
-Finally, there is one more thing left to do. In React, props can change over time. For example, the `<Chosen>` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us.
+最后,还剩下一件事情需要处理。在 React 中,props 可以在不同的时间有不同的值。例如,如果父组件的状态发生变化 `<Chosen>` 组件可能得到不同的 children。这意味着从集成的角度来看,我们因应 prop 的更新而手动更新 DOM 这一点是非常重要的,因为我们已经不再使用 React 来帮我们管理 DOM 了。
 
-Chosen's documentation suggests that we can use jQuery `trigger()` API to notify it about changes to the original DOM element. We will let React take care of updating `this.props.children` inside `<select>`, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list:
+Chosen 的文档建议我们使用 jQuery `trigger()` API 来通知原始 DOM 元素这些变化。我们会让 React来管理在 `<select>` 中 `this.props.children` 的更新,但是我们同样需要增加一个 `componentDidUpdate()` 生命周期函数来通知 Chosen 关于 children 列表的变化:
 
 ```js{2,3}
 componentDidUpdate(prevProps) {
@@ -145,9 +145,9 @@ componentDidUpdate(prevProps) {
 }
 ```
 
-This way, Chosen will know to update its DOM element when the `<select>` children managed by React change.
+通过这种方法,当由 React 管理的 `<select>` children 改变时, Chosen 会知道如何更新它的 DOM 元素。。
 
-The complete implementation of the `Chosen` component looks like this:
+`Chosen` 组件的完整实现看起来是这样的:
 
 ```js
 class Chosen extends React.Component {
@@ -186,21 +186,21 @@ class Chosen extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
 
-## Integrating with Other View Libraries {#integrating-with-other-view-libraries}
+## 和其他视图库集成 {#integrating-with-other-view-libraries}
 
-React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/docs/react-dom.html#render).
+得益于 [`ReactDOM.render()`](/docs/react-dom.html#render) 的灵活性 React 可以被嵌入到其他的应用中。
 
-Although React is commonly used at startup to load a single root React component into the DOM, `ReactDOM.render()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
+虽然 React 通常被用来在启动的时候加载一个单独的根 React 组件到 DOM 上,`ReactDOM.render()` 同样可以在 UI 的独立部分上多次调用,这些部分可以小到一个按钮,也可以大到一个应用。
 
-In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine them with our existing server-generated templates and other client-side code.
+事实上,这正是 Facebook 如何使用 React 的。这让我们小块小块地在应用中使用 React,并且把他们结合到我们现存的服务端产生的模板和其他客户端代码中。
 
-### Replacing String-Based Rendering with React {#replacing-string-based-rendering-with-react}
+### 利用 React 替换基于字符串的渲染 {#replacing-string-based-rendering-with-react}
 
-A common pattern in older web applications is to describe chunks of the DOM as a string and insert it into the DOM like so: `$el.html(htmlString)`. These points in a codebase are perfect for introducing React. Just rewrite the string based rendering as a React component.
+在旧的 web 应用中一个通用的模式就是使用一个字符串描述 DOM 块并且通过类似 `$el.html(htmlString)` 这样的方式插入到 DOM 中。代码库中的这种例子是非常适合引入 React 的。直接把基于字符串的渲染重写成 React 组件即可。
 
-So the following jQuery implementation...
+那么下面这段 jQuery 的实现...
 
 ```js
 $('#container').html('<button id="btn">Say Hello</button>');
@@ -209,7 +209,7 @@ $('#btn').click(function() {
 });
 ```
 
-...could be rewritten using a React component:
+...可以使用 React 组件重写为:
 
 ```js
 function Button() {
@@ -227,7 +227,7 @@ ReactDOM.render(
 );
 ```
 
-From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the [React event system](/docs/handling-events.html) and register the click handler directly on the React `<button>` element:
+从这起你可开始以把更多的逻辑移动到组件中,并且开始应用更多通用 React 实践。例如,在组件中最好不要依赖 ID 因为同一个组件可能会被渲染多次。相反的,我们会使用 [React 事件系统](/docs/handling-events.html) 并且直接注册 click 处理函数到 React `<button>` 元素:
 
 ```js{2,6,9}
 function Button(props) {
@@ -247,15 +247,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/RVKbvW?editors=1010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/RVKbvW?editors=1010)
 
-You can have as many such isolated components as you like, and use `ReactDOM.render()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.render()` calls up the hierarchy.
+只要你喜欢你可以有不限数量的这种独立组件,并且使用 `ReactDOM.render()` 把他们渲染到不同的容器中。逐渐的,随着你把越来越多的应用转换到 React,你就可以把它们结合成更大的组件,并且把 `ReactDOM.render()` 的调用移动到更上层的结构。
 
-### Embedding React in a Backbone View {#embedding-react-in-a-backbone-view}
+### 把 React 嵌入到 Backbone 视图 {#embedding-react-in-a-backbone-view}
 
-[Backbone](https://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
+[Backbone](http://backbonejs.org/) 视图通常使用 HTML 字符串,或者产生字符串的模板函数,来创建 DOM 元素的内容。这个过程,同样的,可以通过渲染一个 React 组件来替换掉。
 
-Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.render()`](/docs/react-dom.html#render):
+如下,我们会创建一个名为 `ParagraphView` 的 Backbone 视图。他会重载 Backbone 的 `render()` 函数来渲染一个 React `<Paragraph>` 组件到 Backbone (`this.el`) 提供的 DOM 元素中。这里,同样的,我们将会使用 [`ReactDOM.render()`](/docs/react-dom.html#render):
 
 ```js{1,5,8,12}
 function Paragraph(props) {
@@ -275,23 +275,23 @@ const ParagraphView = Backbone.View.extend({
 });
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/gWgOYL?editors=0010)
 
-It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
+在 `remove` 方法中我们也需要调用 `ReactDOM.unmountComponentAtNode()` 以便在它解除的时候 React 清理组件树相关的事件处理的注册和其他的资源,这点是是很重要的。
 
-When a component is removed *from within* a React tree, the cleanup is performed automatically, but because we are removing the entire tree by hand, we must call this method.
+当一个组件在 React 树中*从内部*删除的时候,清理工作是自动完成的,但是因为我们现在手动移除整个树,我们必须调用这个方法。
 
-## Integrating with Model Layers {#integrating-with-model-layers}
+## 和 Model 层集成 {#integrating-with-model-layers}
 
-While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/), or [Redux](https://redux.js.org/), React components can use a model layer from other frameworks and libraries.
+虽然通常是推荐使用单向数据流动的,例如 [React state](/docs/lifting-state-up.html),[Flux](http://facebook.github.io/flux/),或者 [Redux](http://redux.js.org/),React 组件也可以使用一个其他框架和库的 Model 层。
 
-### Using Backbone Models in React Components {#using-backbone-models-in-react-components}
+### 在 React 组件中使用 Backbone 的 Model {#using-backbone-models-in-react-components}
 
-The simplest way to consume [Backbone](https://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
+在 React 组件中使用 [Backbone](http://backbonejs.org/) 的 model 和 collection 最简单的方法就是监听多种变化事件并且手动强制触发一个更新。
 
-Components responsible for rendering models would listen to `'change'` events, while components responsible for rendering collections would listen for `'add'` and `'remove'` events. In both cases, call [`this.forceUpdate()`](/docs/react-component.html#forceupdate) to rerender the component with the new data.
+负责渲染 model 的组件会监听 `'change'` 事件,而负责渲染 collection 的组件需要监听 `'add'` 和 `'remove'` 事件。在这两种情况中,调用 [`this.forceUpdate()`](/docs/react-component.html#forceupdate) 来使用新的数据重新渲染组件。
 
-In the example below, the `List` component renders a Backbone collection, using the `Item` component to render individual items.
+在下面的例子中,`List` 组件渲染一个 Backbone collection,使用 `Item` 组件来渲染独立的项。
 
 ```js{1,7-9,12,16,24,30-32,35,39,46}
 class Item extends React.Component {
@@ -347,19 +347,19 @@ class List extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GmrREm?editors=0010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
 
-### Extracting Data from Backbone Models {#extracting-data-from-backbone-models}
+### 从 Backbone Model 提取数据 {#extracting-data-from-backbone-models}
 
-The approach above requires your React components to be aware of the Backbone models and collections. If you later plan to migrate to another data management solution, you might want to concentrate the knowledge about Backbone in as few parts of the code as possible.
+前面的方式需要你的 React 组件知道 Backbone 的 model 和 collection。如果你计划迁移到另一个数据管理方案,你可能希望将关于Backbone的知识集中在尽可能少的代码部分中。
 
-One solution to this is to extract the model's attributes as plain data whenever it changes, and keep this logic in a single place. The following is [a higher-order component](/docs/higher-order-components.html) that extracts all attributes of a Backbone model into state, passing the data to the wrapped component.
+其中一个解决方案就是每当 model 中的属性变化时都把它提取成简单数据,并且把这个逻辑放在一个独立的地方。下面是一个[高阶组件](/docs/higher-order-components.html),它提取了 Backbone model 的所有数据存放到 state 中,并将数据传递到被包裹的组件中。
 
-This way, only the higher-order component needs to know about Backbone model internals, and most components in the app can stay agnostic of Backbone.
+通过这种方法,只有高阶组件需要知道 Backbone model 的内部构造,而且应用中大多数的组件可以保持和 Backbone 无关。
 
-In the example below, we will make a copy of the model's attributes to form the initial state. We subscribe to the `change` event (and unsubscribe on unmounting), and when it happens, we update the state with the model's current attributes. Finally, we make sure that if the `model` prop itself changes, we don't forget to unsubscribe from the old model, and subscribe to the new one.
+在下面的例子中,我们会拷贝一份 model 的属性来形成初始的 state。我们订阅 `change` 事件(并且在取消挂载时停止订阅),而当变化发生时,我们使用 model 的当前属性更新这个 state。最终,我们确保了只要 `model` 属性本身变化的时候,我们不要忘了停止旧 model 的订阅并开始订阅新的 model。
 
-Note that this example is not meant to be exhaustive with regards to working with Backbone, but it should give you an idea for how to approach this in a generic way:
+请注意,这个例子并不是为了彻底完整展示如何与 Backbone 集成,而是它应该让你了解如何以通用的方式处理此问题:
 
 ```js{1,5,10,14,16,17,22,26,32}
 function connectToBackboneModel(WrappedComponent) {
@@ -399,7 +399,7 @@ function connectToBackboneModel(WrappedComponent) {
 }
 ```
 
-To demonstrate how to use it, we will connect a `NameInput` React component to a Backbone model, and update its `firstName` attribute every time the input changes:
+要演示如何使用它,我们会链接一个 `NameInput` React 组件到一个 Backbone model,并且每当输入框变化时更新它的 `firstName` 属性:
 
 ```js{4,6,11,15,19-21}
 function NameInput(props) {
@@ -434,6 +434,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010)
+[**在 CodePen 上运行**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010)
 
-This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle methods and, optionally, copying the data into the local React state.
+这个技术并不仅限于 Backbone。你可以通过在生命周期方法中订阅其更改并,并选择性地,拷贝数据到本地 React state,来将 React 用于任何 model 库。