From eba248ca1d48eb273d4167ee499469ca545c8c17 Mon Sep 17 00:00:00 2001
From: liare <brihanono@gmail.com>
Date: Wed, 24 May 2017 16:01:38 +0800
Subject: [PATCH 01/12] reference-react

---
 docs/docs/reference-react.md | 64 ++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/docs/reference-react.md b/docs/docs/reference-react.md
index 96413c2f3a..ecc3f14345 100755
--- a/docs/docs/reference-react.md
+++ b/docs/docs/reference-react.md
@@ -1,6 +1,6 @@
 ---
 id: react-api
-title: React Top-Level API
+title: React 高阶 API
 layout: docs
 category: Reference
 permalink: docs/react-api.html
@@ -14,31 +14,31 @@ redirect_from:
   - "docs/glossary.html"
 ---
 
-`React` is the entry point to the React library. If you load React from a `<script>` tag, these top-level APIs are available on the `React` global. If you use ES6 with npm, you can write `import React from 'react'`. If you use ES5 with npm, you can write `var React = require('react')`.
+`react` 是React库的入口点。如果你通过 `<script>` 标签加载React，这些高阶API可用于 `React` 全局。如果你使用ES6，你可以使用 `import React from 'react'` 。如果你使用ES5，你可以使用 `var React = require('react')` 。
 
-## Overview
+## 概览
 
 ### Components
 
-React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing `React.Component` or `React.PureComponent`.
+React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。React组件可以通过继承 `React.Component` 或 `React.PureComponent` 来定义。
 
  - [`React.Component`](#react.component)
  - [`React.PureComponent`](#react.purecomponent)
 
-If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/react/docs/react-without-es6.html) for more information.
+如果不用ES6类，你可以使用 `create-react-class` 模块。参阅 [Using React without JSX](/react/docs/react-without-es6.html) 了解更多信息。
 
 ### Creating React Elements
 
-We recommend [using JSX](/react/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX.
+推荐 [使用JSX](/react/docs/introducing-jsx.html) 描述你的UI外观。每个JSX元素仅是调用 [`React.createElement`](#createelement) 的语法糖。如果使用了JSX，你通常不会直接调用以下方法。
 
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)
 
-See [Using React without JSX](/react/docs/react-without-jsx.html) for more information.
+参阅 [Using React without JSX](/react/docs/react-without-jsx.html) 了解更多。
 
 ### Transforming Elements
 
-`React` also provides some other APIs:
+`React` 同时也提供了其他API：
 
 - [`cloneElement()`](#cloneelement)
 - [`isValidElement()`](#isvalidelement)
@@ -50,7 +50,7 @@ See [Using React without JSX](/react/docs/react-without-jsx.html) for more infor
 
 ### `React.Component`
 
-`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes).
+用 [ES6 类](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 定义时，`React.Component`是React组件的基类。
 
 ```javascript
 class Greeting extends React.Component {
@@ -60,21 +60,21 @@ class Greeting extends React.Component {
 }
 ```
 
-See the [React.Component API Reference](/react/docs/react-component.html) for a list of methods and properties related to the base `React.Component` class.
+有关 `React.Component` 的方法和属性列表，请参阅 [`React.Component API Reference`](/react/docs/react-component.html)。
 
 * * *
 
 ### `React.PureComponent`
 
-`React.PureComponent` is exactly like [`React.Component`](#react.component) but implements [`shouldComponentUpdate()`](/react/docs/react-component.html#shouldcomponentupdate) with a shallow prop and state comparison.
+`React.PureComponent` 与 [`React.Component`](#react.component) 几乎完全相同，但 `React.PureComponent` 通过prop和state的浅对比来实现 [`shouldComponentUpate()`](/react/docs/react-component.html#shouldcomponentupdate)。
 
-If your React component's `render()` function renders the same result given the same props and state, you can use `React.PureComponent` for a performance boost in some cases.
+如果React组件的 `render()` 函数在给定相同的props和state下渲染为相同的结果，在某些场景下你可以使用 `React.PureComponent` 来提升性能。
 
 > Note
 
-> `React.PureComponent`'s `shouldComponentUpdate()` only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend `PureComponent` when you expect to have simple props and state, or use [`forceUpdate()`](/react/docs/react-component.html#forceupdate) when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
+> `React.PureComponent` 的 `shouldComponentUpdate()` 只会对对象进行浅对比。如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新, 原文：false-negatives)。当你期望只拥有简单的props和state时，才去继承 `PureComponent` ，或者在你知道深层的数据结构已经发生改变时使用 [`forceUpate()`](/react/docs/react-component.html#forceupdate) 。或者，考虑使用 [不可变对象](https://facebook.github.io/immutable-js/) 来促进嵌套数据的快速比较。
 >
-> Furthermore, `React.PureComponent`'s `shouldComponentUpdate()` skips prop updates for the whole component subtree. Make sure all the children components are also "pure".
+> 此外,`React.PureComponent` 的 `shouldComponentUpate()` 会忽略整个组件的子级。请确保所有的子级组件也是"Pure"的。
 
 * * *
 
@@ -88,11 +88,11 @@ React.createElement(
 )
 ```
 
-Create and return a new [React element](/react/docs/rendering-elements.html) of the given type. The type argument can be either a tag name string (such as `'div'` or `'span'`), or a [React component](/react/docs/components-and-props.html) type (a class or a function).
+根据给定的类型创建并返回新的 [`React element`](/react/docs/rendering-elements.html) 。参数type既可以是一个html标签名称字符串(例如`'div'` 或 `'span'` )，也可以是一个 [`React component`](/react/docs/components-and-props.html) 类型(一个类或一个函数)。
 
-Convenience wrappers around `React.createElement()` for DOM components are provided by `React.DOM`. For example, `React.DOM.a(...)` is a convenience wrapper for `React.createElement('a', ...)`. They are considered legacy, and we encourage you to either use JSX or use `React.createElement()` directly instead.
+`React.DOM` 提供了DOM组件的 `React.createElement()` 的便捷包装。举个例子，`React.DOM.a(...)` 是 `React.createELement('a', ...)` 的一个便捷包装。这个用法被认为是过时的，我们推荐您使用JSX，或者直接使用 `React.createElement()` 。
 
-Code written with [JSX](/react/docs/introducing-jsx.html) will be converted to use `React.createElement()`. You will not typically invoke `React.createElement()` directly if you are using JSX. See [React Without JSX](/react/docs/react-without-jsx.html) to learn more.
+用 [`JSX`](/react/docs/introducing-jsx.html) 编写的代码会被转换成用 `React.createElement()` 实现。如果使用了JSX，你通常不会直接调用 `React.createElement()` 。参阅 [`React Without JSX`](/react/docs/react-without-jsx.html) 了解更多。
 
 * * *
 
@@ -106,17 +106,17 @@ React.cloneElement(
 )
 ```
 
-Clone and return a new React element using `element` as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. `key` and `ref` from the original element will be preserved.
+以 `element` 作为起点，克隆并返回一个新的React元素(React Element)。生成的元素将会拥有原始元素props与新props的浅合并。新的子级会替换现有的子级。来自原始元素的 `key` 和 `ref` 将会保留。
 
-`React.cloneElement()` is almost equivalent to:
+`React.cloneElement()` 几乎相当于：
 
 ```js
 <element.type {...element.props} {...props}>{children}</element.type>
 ```
 
-However, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
+然而，它也保留了 `ref`。这意味着，如果你通过 `ref` 获取到子级组件时，不会一不小心从祖先组件里窃取了它。你将获得与你新元素相同的 `ref` 。
 
-This API was introduced as a replacement of the deprecated `React.addons.cloneWithProps()`.
+这个API是一个替换已弃用的 `React.addons.cloneWithProps()` 的方案。
 
 * * *
 
@@ -126,11 +126,11 @@ This API was introduced as a replacement of the deprecated `React.addons.cloneWi
 React.createFactory(type)
 ```
 
-Return a function that produces React elements of a given type. Like [`React.createElement()`](#createElement), the type argument can be either a tag name string (such as `'div'` or `'span'`), or a [React component](/react/docs/components-and-props.html) type (a class or a function).
+根据给定的类型返回一个创建React元素的函数。类似 [`React.createElement`](#createElement) ，参数type既可以一个html标签名称字符串，也可以是一个 [`React component`](/react/docs/components-and-props.html) 类型(一个类或时一个函数)。
 
-This helper is considered legacy, and we encourage you to either use JSX or use `React.createElement()` directly instead.
+这个方法过时了，我们推荐你使用JSX或直接使用 `React.createElement()` 来替代它。
 
-You will not typically invoke `React.createFactory()` directly if you are using JSX. See [React Without JSX](/react/docs/react-without-jsx.html) to learn more.
+如果使用了JSX，你通常不会直接调用 `React.createFactory()` 。参阅 [`React Without JSX`](/react/docs/react-without-jsx.html)了解更多 。
 
 * * *
 
@@ -140,13 +140,13 @@ You will not typically invoke `React.createFactory()` directly if you are using
 React.isValidElement(object)
 ```
 
-Verifies the object is a React element. Returns `true` or `false`.
+验证对象是否是一个React元素。返回 `true` 或 `false` 。
 
 * * *
 
 ### `React.Children`
 
-`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
+`React.Children` 提供了处理 `this.props.children` 这个不透明数据结构的工具。
 
 #### `React.Children.map`
 
@@ -154,7 +154,7 @@ Verifies the object is a React element. Returns `true` or `false`.
 React.Children.map(children, function[(thisArg)])
 ```
 
-Invokes a function on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is a keyed fragment or array it will be traversed: the function will never be passed the container objects. If children is `null` or `undefined`, returns `null` or `undefined` rather than an array.
+在包含在 `children` 里的每个子级上调用函数，调用的函数的 `this` 设置为 `thisArg` 。如果 `children` 是一个嵌套的对象或数组，它将被遍历。如果 `children` 是 `null` 或 `undefined` ，返回 `null` 或 `undefined` 而不是一个空数组。
 
 #### `React.Children.forEach`
 
@@ -162,7 +162,7 @@ Invokes a function on every immediate child contained within `children` with `th
 React.Children.forEach(children, function[(thisArg)])
 ```
 
-Like [`React.Children.map()`](#react.children.map) but does not return an array.
+类似 [`React.Children.map()`](#react.children.map) ，但是不返回数组。
 
 #### `React.Children.count`
 
@@ -170,7 +170,7 @@ Like [`React.Children.map()`](#react.children.map) but does not return an array.
 React.Children.count(children)
 ```
 
-Returns the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.
+返回 `children` 中的组件总数，相等于传给 `map` 或 `forEach` 时，回调函数被调用次数。
 
 #### `React.Children.only`
 
@@ -178,7 +178,7 @@ Returns the total number of components in `children`, equal to the number of tim
 React.Children.only(children)
 ```
 
-Returns the only child in `children`. Throws otherwise.
+返回`children`里仅有的子级。否则抛出异常。
 
 #### `React.Children.toArray`
 
@@ -186,8 +186,8 @@ Returns the only child in `children`. Throws otherwise.
 React.Children.toArray(children)
 ```
 
-Returns the `children` opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice `this.props.children` before passing it down.
+返回以赋key给每个子级 `child` 的扁平数组形式来组成不透明的 `children` 数据结构。如果你打算在你的渲染方法里操纵子级集合这很有用，特别是你想在 `this.props.children` 传下之前对它重新排序或切割。
 
 > Note:
 >
-> `React.Children.toArray()` changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, `toArray` prefixes each key in the returned array so that each element's key is scoped to the input array containing it.
+> 当children是扁平列表时，`React.Children.toArray()` 改变key来保留嵌套数组的语义。也就是说，为了在展开时保留嵌套数组的语义，`toArray` 会自动的给数组中每个 key 加了上前缀，以便将每个元素的key被限定到包含它的输入数组。

From d1687b01a7802ced46ffa75e7d4ecaeb05d307b6 Mon Sep 17 00:00:00 2001
From: ratelgogo <ratelgogo@gmail.com>
Date: Wed, 24 May 2017 16:28:03 +0800
Subject: [PATCH 02/12] reference-events.md

---
 docs/docs/reference-events.md | 93 +++++++++++++++++------------------
 1 file changed, 44 insertions(+), 49 deletions(-)

diff --git a/docs/docs/reference-events.md b/docs/docs/reference-events.md
index 6e275db9b5..bd66cd13cc 100755
--- a/docs/docs/reference-events.md
+++ b/docs/docs/reference-events.md
@@ -5,14 +5,12 @@ permalink: docs/events.html
 layout: docs
 category: Reference
 ---
+此参考指南记录了构成React一部分事件系统的`SyntheticEvent`封装器。请参阅[事件处理](/react/docs/handling-events.html)指南了解更多。
 
-This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/react/docs/handling-events.html) guide to learn more.
+## 概述
+您的事件处理函数将会接收`SyntheticEvent`的实例，一个基于浏览器原生事件的跨浏览器实现。它拥有和浏览器原生事件一样的接口，包括`stopPropagation()`和`preventDefault()`，除了那些所有浏览器功能一样的事件。
 
-## Overview
-
-Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers.
-
-If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. Every `SyntheticEvent` object has the following attributes:
+出于某些原因，你得使用一些底层的浏览器事件，只需用`nativeEnvent`的属性就能找到。每个`SyntheicEvent`对象都有如下属性：
 
 ```javascript
 boolean bubbles
@@ -31,15 +29,13 @@ number timeStamp
 string type
 ```
 
-> Note:
->
-> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate.
+> 敲黑板：
+> 由于在v0.14版本中，事件处理函数返回`false`不会再阻止事件传播, 所以必须得手动触发`e.stopPropagation()`和`e.preventDefault()` 方法。
 
-### Event Pooling
+### 事件池
 
-The `SyntheticEvent` is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked.
-This is for performance reasons.
-As such, you cannot access the event in an asynchronous way.
+`SyntheticEvent`是共享的。那就意味着在调用事件回调之后，`SyntheticEvent`对象将会被重用，并且所有属性会被置空。这是出于性能因素考虑的。
+因此，您无法以异步方式访问事件。
 
 ```javascript
 function onClick(event) {
@@ -60,15 +56,15 @@ function onClick(event) {
 }
 ```
 
-> Note:
->
-> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
+> 敲黑板：
+> 
+> 如果您想以异步的方式访问事件的属性值，你必须在事件回调中调用`event.persist()`方法，这样会在池中删除合成事件，并且在用户代码中保留对事件的引用。
 
-## Supported Events
+## 支持的事件
 
-React normalizes events so that they have consistent properties across different browsers.
+React标准化了事件，使其在不同的浏览器中拥有一致的属性。
 
-The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.
+下面的事件处理函数由冒泡阶段的事件触发。在事件名后面加`Capture`就能在事件捕获阶段注册事件处理函数。举个例子，你可以使用`onClickCapture`代替`onClick`在事件捕获阶段来处理点击事件。
 
 - [Clipboard Events](#clipboard-events)
 - [Composition Events](#composition-events)
@@ -85,19 +81,18 @@ The event handlers below are triggered by an event in the bubbling phase. To reg
 - [Animation Events](#animation-events)
 - [Transition Events](#transition-events)
 
-* * *
-
-## Reference
+***
+## 参考
 
 ### Clipboard Events
 
-Event names:
+事件名:
 
 ```
 onCopy onCut onPaste
 ```
 
-Properties:
+属性:
 
 ```javascript
 DOMDataTransfer clipboardData
@@ -107,13 +102,13 @@ DOMDataTransfer clipboardData
 
 ### Composition Events
 
-Event names:
+事件名:
 
 ```
 onCompositionEnd onCompositionStart onCompositionUpdate
 ```
 
-Properties:
+属性:
 
 ```javascript
 string data
@@ -124,13 +119,13 @@ string data
 
 ### Keyboard Events
 
-Event names:
+事件名:
 
 ```
 onKeyDown onKeyPress onKeyUp
 ```
 
-Properties:
+属性:
 
 ```javascript
 boolean altKey
@@ -151,15 +146,15 @@ number which
 
 ### Focus Events
 
-Event names:
+事件名:
 
 ```
 onFocus onBlur
 ```
 
-These focus events work on all elements in the React DOM, not just form elements.
+这些焦点事件适用于React DOM中的所有元素，而不仅仅是表单元素。
 
-Properties:
+属性:
 
 ```javascript
 DOMEventTarget relatedTarget
@@ -169,19 +164,19 @@ DOMEventTarget relatedTarget
 
 ### Form Events
 
-Event names:
+事件名:
 
 ```
 onChange onInput onSubmit
 ```
 
-For more information about the onChange event, see [Forms](/react/docs/forms.html).
+查阅[表单](/react/docs/forms.html)了解关于onChange事件的更多细节.
 
 * * *
 
 ### Mouse Events
 
-Event names:
+事件名:
 
 ```
 onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
@@ -189,9 +184,9 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
 onMouseMove onMouseOut onMouseOver onMouseUp
 ```
 
-The `onMouseEnter` and `onMouseLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
+ `onMouseEnter` 和 `onMouseLeave` 事件由失去焦点的元素到正在输入的元素传播，并不是普通的冒泡，也没有捕获阶段。
 
-Properties:
+属性:
 
 ```javascript
 boolean altKey
@@ -214,7 +209,7 @@ boolean shiftKey
 
 ### Selection Events
 
-Event names:
+事件名:
 
 ```
 onSelect
@@ -224,13 +219,13 @@ onSelect
 
 ### Touch Events
 
-Event names:
+事件名:
 
 ```
 onTouchCancel onTouchEnd onTouchMove onTouchStart
 ```
 
-Properties:
+属性:
 
 ```javascript
 boolean altKey
@@ -247,13 +242,13 @@ DOMTouchList touches
 
 ### UI Events
 
-Event names:
+事件名:
 
 ```
 onScroll
 ```
 
-Properties:
+属性:
 
 ```javascript
 number detail
@@ -264,13 +259,13 @@ DOMAbstractView view
 
 ### Wheel Events
 
-Event names:
+事件名:
 
 ```
 onWheel
 ```
 
-Properties:
+属性:
 
 ```javascript
 number deltaMode
@@ -283,7 +278,7 @@ number deltaZ
 
 ### Media Events
 
-Event names:
+事件名:
 
 ```
 onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted 
@@ -296,7 +291,7 @@ onTimeUpdate onVolumeChange onWaiting
 
 ### Image Events
 
-Event names:
+事件名:
 
 ```
 onLoad onError
@@ -306,13 +301,13 @@ onLoad onError
 
 ### Animation Events
 
-Event names:
+事件名:
 
 ```
 onAnimationStart onAnimationEnd onAnimationIteration
 ```
 
-Properties:
+属性:
 
 ```javascript
 string animationName
@@ -324,13 +319,13 @@ float elapsedTime
 
 ### Transition Events
 
-Event names:
+事件名:
 
 ```
 onTransitionEnd
 ```
 
-Properties:
+属性:
 
 ```javascript
 string propertyName

From a408449c8758c0067242376929b05f58e9737497 Mon Sep 17 00:00:00 2001
From: liare <brihanono@gmail.com>
Date: Wed, 24 May 2017 17:19:03 +0800
Subject: [PATCH 03/12] react-dom-server

---
 docs/docs/reference-react-dom-server.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/docs/reference-react-dom-server.md b/docs/docs/reference-react-dom-server.md
index 00bc87ba37..e5c9bb7c82 100755
--- a/docs/docs/reference-react-dom-server.md
+++ b/docs/docs/reference-react-dom-server.md
@@ -6,11 +6,11 @@ category: Reference
 permalink: docs/react-dom-server.html
 ---
 
-If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOMServer` global. If you use ES6 with npm, you can write `import ReactDOMServer from 'react-dom/server'`. If you use ES5 with npm, you can write `var ReactDOMServer = require('react-dom/server')`.
+如果你通过 `<script>` 标签加载React，这些高阶API可用于 `ReactDOMServer` 全局。如果你使用ES6，你可以写成 `import ReactDOMServer from 'react-dom/server'`。如果你使用ES5，你可以写成 `var ReactDOMServer = require('react-dom/server')`。
 
-## Overview
+## 概览
 
-The `ReactDOMServer` class allows you to render your components on the server.
+`ReactDOMServer` 类可以让你在服务端渲染你的组件。
 
  - [`renderToString()`](#rendertostring)
  - [`renderToStaticMarkup()`](#rendertostaticmarkup)
@@ -25,9 +25,9 @@ The `ReactDOMServer` class allows you to render your components on the server.
 ReactDOMServer.renderToString(element)
 ```
 
-Render a React element to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
+把一个React元素渲染为原始的HTML。这个方法最好只在服务端使用。React将会返回一段HTML字符串。你可以用这个方法在服务端生成HTML，并根据初始请求发送标记来加快页面的加载速度，同时让搜索引擎可以抓取你的页面来达到优化SEO的目的。
 
-If you call [`ReactDOM.render()`](/react/docs/react-dom.html#render) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
+如果在一个已经有了服务端渲染标记的节点上调用 [`ReactDOM.render()`](/react/docs/react-dom.html#render) ，React将保留该节点，仅作绑定事件处理，这会让你有一个非常高效的初次加载体验。
 
 * * *
 
@@ -37,4 +37,4 @@ If you call [`ReactDOM.render()`](/react/docs/react-dom.html#render) on a node t
 ReactDOMServer.renderToStaticMarkup(element)
 ```
 
-Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes such as `data-reactid`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
+类似 [`renderToString`](#rendertostring)，但是不会创建额外的DOM属性，例如 `data-reactid` 这些仅在React内部使用的属性。如果你希望把React当作一个简单的静态页面生成器来使用，这很有用，因为去掉额外的属性可以节省很多字节。

From d40a79235307621f8f590cc2c992f592a7cfdbe6 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Thu, 25 May 2017 14:29:11 +0800
Subject: [PATCH 04/12] Update tutorial.md

---
 docs/tutorial/tutorial.md | 83 +++++++++++++++++++++------------------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md
index 07669c8875..15c8c94672 100755
--- a/docs/tutorial/tutorial.md
+++ b/docs/tutorial/tutorial.md
@@ -16,47 +16,47 @@ redirect_from:
 
 ### 教程简介
 
-Today, we're going to build an interactive tic-tac-toe game.
+接下来，我们会一起开发一个 [tic-tac-toe](https://zh.wikipedia.org/wiki/%E4%BA%95%E5%AD%97%E6%A3%8B) 井字棋游戏。
 
-If you like, you can check out the final result here: [Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010). Don't worry if the code doesn't make sense to you yet, or if it uses an unfamiliar syntax. We will be learning how to build this game step by step throughout this tutorial.
+在开始教程之前如果你想预览一下这个游戏会是什么样子的话可以点击 [效果预览](https://codepen.io/gaearon/pen/gWWZgR?editors=0010) 查看。 如果里面的代码你现在一点也看不懂，很多语法都不熟悉也不需要着急，接下来教程会一步一步教你编写出这个小游戏所有的代码。
 
-Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.
+你可以先试着玩一下这个游戏。除了下棋之外，还可以通过点击旁边的列表，返回到某一步棋时候的棋局状态。
 
-Once you get a little familiar with the game, feel free to close that tab, as we'll start from a simpler template in the next sections.
+等到你玩得差不多了，大概了解了我们要实现什么样的功能，关掉它准备开始学习编码吧！我们会在一个简单的模板上开始写起。
 
 ### 前置知识
 
-We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.
+在这里我们已经假设你对 HTML 和 JavaScript 都比较熟悉了，不过即使你之前都没有了解过也可以接着跟着教程试试看。
 
-If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> to check what ES6 code compiles to.
+如果你想重新了解一下 JavaScript 的新特性，我们推荐你阅读 [这篇教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)。要注意我们在编码的时候已经开始使用 ES6 最新版本的 JavaScript, 在这篇教程里我们主要使用了 [arrow functions](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const) 几个新的语法和关键字。你也可以使用 <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> 在线预览一下这些ES6的代码被编译后的效果。
 
 ### 如何编写代码
 
-There are two ways to complete this tutorial: you could either write the code right in the browser, or you could set up a local development environment on your machine. You can choose either option depending on what you feel comfortable with.
+你可以选择在本地的代码编辑器软件里或者是直接在浏览器里跟着编写本教程的代码，你甚至可以试着在本地配置一下开发运行环境。选择你开心的一种方式就好。
 
 #### 在浏览器中编写本教程代码
 
-This is the quickest way to get started!
+这是上手最快的一种方式了！
 
-First, open this [starter code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) in a new tab. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.
+首先在新的浏览器选项卡中打开这个 [初始模板](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)。 你可以看到一个井字棋的棋盘。我们接下来会在这一基础上进行游戏交互功能的开发。
 
-You can now skip the next section about setting up a local development environment and head straight to the [overview](#overview).
+如果你选择这种方式，就可以直接从 [总览](#总览) 开始阅读教程啦。
 
 #### 在代码编辑器中编写本教程代码
 
-Alternatively, you can set up a project on your computer.
+同样，你也可以试着在自己的电脑上搭建起开发运行环境来。
 
-Note: **this is completely optional and not required for this tutorial!**
+注意： **本地搭建React的开发运行环境并不是本教程强制要求的，根据你的实际情况自行考量。**
 
-This is more work, but lets you work from the comfort of your editor.
+虽然在本地搭建环境要费一些功夫，但好处是你可以任意选择你惯用的编辑器来完成开发。
 
-If you want to do it, here are the steps to follow:
+如果你已经决定了，那么跟着下面的步骤开始搭建吧：
 
-1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
-2. Follow the [installation instructions](/react/docs/installation.html#creating-a-new-application) to create a new project.
-3. Delete all files in the `src/` folder of the new project.
-4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
-5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010), and then add three lines to the top of it:
+1. 确保你电脑上安装了最新版本的 [Node.js](https://nodejs.org/zh-cn/).
+2. 跟着 [安装指南](/react/docs/installation.html#creating-a-new-application) 创建一个新的 React 项目。
+3. 删除掉生成项目中 `src/` 文件夹下的所有文件。
+4. 在 `src/` 文件夹下新建一个名为 `index.css` 的文件并拷贝 [这里的 CSS 代码](https://codepen.io/gaearon/pen/oWWQNa?editors=0100) 到文件中。
+5. 在 `src/` 文件夹下新建一个名为 `index.js` 的文件并拷贝 [这里的 JS 代码](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) 到文件中, 并在此文件的最开头加上下面几行代码：
 
     ```js
     import React from 'react';
@@ -64,23 +64,28 @@ If you want to do it, here are the steps to follow:
     import './index.css';
     ```
 
-Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field.
+接下来通过命令行在你的项目目录下运行 `npm start` 命令并在浏览器中打开 `http://localhost:3000` 你就能够看到空的井字棋棋盘了。
 
-We recommend following [these instructions](http://babeljs.io/docs/editors) to configure syntax highlighting for your editor.
+我们推荐根据 [这篇教程](http://babeljs.io/docs/editors) 配置你代码编辑器的代码高亮指示。
 
 ### 寻求帮助
 
-If you get stuck, check out the [community support resources](https://facebook.github.io/react/community/support.html). In particular, [Reactiflux chat](/react/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.
+如果你遇到了任何困难，可以在 [community support resources](https://facebook.github.io/react/community/support.html) 寻求帮助。 加入我们的 [Reactiflux chat](/react/community/support.html#reactiflux-chat) 也是一个很不错的选择。如果通过上述方式还是解决不了你的问题，你也可以给我们提一个 issue.
 
-With this out of the way, let's get started!
+> **译者补充资源：**
+> 
+> * [从零学习React技术栈](https://zhuanlan.zhihu.com/reactjs) 
+> * [React China](http://react-china.org/)
+
+废话不多说，我们开始动手编码吧！
 
 ## 总览
 
 ### React 是什么？
 
-React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
+React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。
 
-React has a few different kinds of components, but we'll start with `React.Component` subclasses:
+React 当中包含了一些不同的组件，我们从使用 `React.Component` 开始：
 
 ```javascript
 class ShoppingList extends React.Component {
@@ -98,14 +103,14 @@ class ShoppingList extends React.Component {
   }
 }
 
-// Example usage: <ShoppingList name="Mark" />
+// 通过这种标签语法来使用我们上面声明的组件: <ShoppingList name="Mark" />
 ```
 
-We'll get to the funny XML-like tags in a second. Your components tell React what you want to render – then React will efficiently update and render just the right components when your data changes.
+这样我们就拿到了一个很有趣的看起来像 XML/HTML 的标签。你的组件向 React 描述了你想要渲染的内容。之后 React 会根据你开发应用数据的变化自动渲染和更新组件。
 
-Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props`, and returns a hierarchy of views to display via the `render` method.
+这里的 ShoppingList 是一种 **React 组件类**，或者叫 **React 组件类型** 之类的。一个组件会接受名为 `props` 的参数，并通过名为 `render` 的方法返回一个嵌套结构的视图。
 
-The `render` method returns a *description* of what you want to render, and then React takes that description and renders it to the screen. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called JSX which makes it easier to write these structures. The `<div />` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to:
+`render` 返回的是你对你想要渲染内容的**描述**。React 会根据你的描述将对应的内容在屏幕上渲染出来。讲得更具体一点，`render` 返回的是一个 **React 元素**，是一种对渲染内容比较简洁的描述。大部分 React 开发者都会使用一种名为 JSX 的语法扩展来跟方便地书写这种描述。比方说里面的 `<div />` 会被编译为 `React.createElement('div')` .上面的那个例子就等同于：
 
 ```javascript
 return React.createElement('div', {className: 'shopping-list'},
@@ -114,29 +119,29 @@ return React.createElement('div', {className: 'shopping-list'},
 );
 ```
 
-[See full expanded version.](https://babeljs.io/repl/#?babili=false&evaluate=false&lineWrap=false&presets=react&targets=&browsers=&builtIns=false&debug=false&experimental=false&loose=false&spec=false&playground=true&code=%3Cdiv%20className%3D%22shopping-list%22%3E%0A%20%20%3Ch1%3EShopping%20List%20for%20%7Bprops.name%7D%3C%2Fh1%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EInstagram%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EWhatsApp%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EOculus%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E)
+[查看完整代码。](https://babeljs.io/repl/#?babili=false&evaluate=false&lineWrap=false&presets=react&targets=&browsers=&builtIns=false&debug=false&experimental=false&loose=false&spec=false&playground=true&code=%3Cdiv%20className%3D%22shopping-list%22%3E%0A%20%20%3Ch1%3EShopping%20List%20for%20%7Bprops.name%7D%3C%2Fh1%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EInstagram%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EWhatsApp%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EOculus%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E)
 
-If you're curious, `createElement()` is described in more detail in the [API reference](/react/docs/react-api.html#createelement), but we won't be using it directly in this tutorial. Instead, we will keep using JSX.
+如果你对这个比较感兴趣，可以在 [API 参考](/react/docs/react-api.html#createelement) 查阅对 `createElement()` 方法更详细的介绍。但在我们接下来的教程中，并不会直接使用这个方法，而是继续使用 JSX.
 
-You can put any JavaScript expression within braces inside JSX. Each React element is a real JavaScript object that you can store in a variable or pass around your program.
+在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都一个 JavaScript 对象，你可以在你的应用中把它当保存在变量中或者作为参数传递。
 
-The `ShoppingList` component only renders built-in DOM components, but you can compose custom React components just as easily, by writing `<ShoppingList />`. Each component is encapsulated so it can operate independently, which allows you to build complex UIs out of simple components.
+我们定义的 `ShoppingList` 组件只会渲染一些内置的 DOM 组件（`<div>`等），但是使用自定义的 React 组件也很简单，通过 `<ShoppingList />` 这样的标签你就可以在 React 当中调用整个 `ShoppingList` 组件。每个组件都是独立包装好的，这样也就方便你像搭积木一样组合各种组件来构建复杂的UI界面。
 
-### Getting Started
+### 开始编码
 
-Start with this example: [Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
+你可以从这个 [模板代码](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) 开始尝试本教程代码的编写。
 
-It contains the shell of what we're building today. We've provided the styles so you only need to worry about the JavaScript.
+模板已经包含了我们要开发的井字棋游戏的基本骨架，而且已经定义好了样式，所以你需要关注的就只有编写 JavaScript 代码。
 
-In particular, we have three components:
+讲得更具体一点，我们现在有3个组件：
 
 * Square
 * Board
 * Game
 
-The Square component renders a single `<button>`, the Board renders 9 squares, and the Game component renders a board with some placeholders that we'll fill in later. None of the components are interactive at this point.
+Square 组件代表一个单独的 `<button>`，Board 组件包含了9个squares，也就是棋盘的9个格子。Game 组件则为我们即将要编写的代码预留了一些位置。现在这几个组件都是不具备任何的交互功能的。
 
-### Passing Data Through Props
+### 通过 Props 传递数据
 
 Just to get our feet wet, let's try passing some data from the Board component to the Square component.
 

From 94629f021b04026e9ea5831c4ec1bdabf411d517 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Thu, 25 May 2017 18:25:25 +0800
Subject: [PATCH 05/12] Update tutorial.md

---
 docs/tutorial/tutorial.md | 171 +++++++++++++++++++-------------------
 1 file changed, 87 insertions(+), 84 deletions(-)

diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md
index 15c8c94672..d2cf385005 100755
--- a/docs/tutorial/tutorial.md
+++ b/docs/tutorial/tutorial.md
@@ -143,9 +143,10 @@ Square 组件代表一个单独的 `<button>`，Board 组件包含了9个squares
 
 ### 通过 Props 传递数据
 
-Just to get our feet wet, let's try passing some data from the Board component to the Square component.
+我们先来试着从 Board 组件传递一些数据到 Square 组件。
 
-In Board's `renderSquare` method, change the code to pass a `value` prop to the Square:
+
+在 Board 组件的 `renderSquare` 方法中，我们将代码改写成下面这样，传递一个名为 `value` 的 prop 到 Square 当中：
 
 ```js{3}
 class Board extends React.Component {
@@ -154,7 +155,7 @@ class Board extends React.Component {
   }
 ```
 
-Then change Square's `render` method to show that value by replacing `{/* TODO */}` with `{this.props.value}`:
+之后再修改 Square 组件的 `render` 方法，把其中的 `{/* TODO */}` 注释替换为 `{this.props.value}`:
 
 ```js{5}
 class Square extends React.Component {
@@ -168,19 +169,20 @@ class Square extends React.Component {
 }
 ```
 
-Before:
+修改前：
 
 ![React Devtools](/react/img/tutorial/tictac-empty.png)
 
-After: You should see a number in each square in the rendered output.
+修改后： 在每个格子当中你都能看到一个渲染出来的数字。
+
 
 ![React Devtools](/react/img/tutorial/tictac-numbers.png)
 
-[View the current code.](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)
 
-### An Interactive Component
+### 给组件添加交互功能
 
-Let's make the Square component fill in an "X" when you click it. Try changing the button tag returned in the `render()` function of the Square like this:
+接下来我们试着让棋盘的每一个格子在点击之后能落下一颗 "X" 作为棋子。我们试着把 `render()` 方法修改为如下内容：
 
 ```javascript{4}
 class Square extends React.Component {
@@ -194,13 +196,13 @@ class Square extends React.Component {
 }
 ```
 
-If you click on a square now, you should get an alert in your browser.
+现在你试着点击一下某个格子，在浏览器里就会弹出一个警示框。
 
-This uses the new JavaScript [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) syntax. Note that we're passing a function as the `onClick` prop. Doing `onClick={alert('click')}` would alert immediately instead of when the button is clicked.
+在这里呢，我们使用了 JavaScript 当中一种新的名为 箭头函数 [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 的语法。注意到这里我们传给 `onClick`属性的是一个函数方法，假如我们写的是 `onClick={alert('click')}` 警示框是会立即弹出的。
 
-React components can have state by setting `this.state` in the constructor, which should be considered private to the component. Let's store the current value of the square in state, and change it when the square is clicked.
+在 React 组件的构造方法 `constructor` 当中，你可以通过 `this.state` 为该组件设置自身的状态数据。我们来试着把棋盘格子变化的数据储存在组件的 state  当中吧：
 
-First, add a constructor to the class to initialize the state:
+首先，我们为组件添加构造函数并初始化 state：
 
 ```javascript{2-7}
 class Square extends React.Component {
@@ -220,15 +222,14 @@ class Square extends React.Component {
   }
 }
 ```
+在使用 [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 时，你必须调用  `super();` 方法才能在继承父类的子类中正确获取到类型的 `this` 。
 
-In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to explicitly call `super();` when defining the constructor of a subclass.
+现在我们试着通过点击事件触发 state 的改变来更新棋盘格子显示的内容：
 
-Now change the Square `render` method to display the value from the current state, and to toggle it on click:
+* 将 `<button>` 当中的 `this.props.value` 替换为 `this.state.value` .
+* 将 `() => alert()` 方法替换为 `() => setState({value: 'X'})` .
 
-* Replace `this.props.value` with `this.state.value` inside the `<button>` tag.
-* Replace the `() => alert()` event handler with `() => setState({value: 'X'})`.
-
-Now the `<button>` tag looks like this:
+现在我们的 `<button>` 标签就变成了下面这样：
 
 ```javascript{10-12}
 class Square extends React.Component {
@@ -249,40 +250,40 @@ class Square extends React.Component {
 }
 ```
 
-Whenever `this.setState` is called, an update to the component is scheduled, causing React to merge in the passed state update and rerender the component along with its descendants. When the component rerenders, `this.state.value` will be `'X'` so you'll see an X in the grid.
+每当  `this.setState` 方法被触发时，组件都会开始准备更新，React 通过比较状态的变化来更新组件当中跟随数据改变了的内容。当组件重新渲染时，`this.state.value` 会变成 `'X'` ，所以你也就能够在格子里看到 X 的字样。
 
-If you click on any square, an X should show up in it.
+现在你试着点击任何一个格子，都能够看到 X 出现在格子当中。
 
-[View the current code.](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)
 
-### Developer Tools
+### 开发工具
 
-The React Devtools extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) lets you inspect a React component tree in your browser devtools.
+在 [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 或 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) 上安装 React 开发者工具可以让你在浏览器的开发控制台里看到 React 渲染出来的组件树。
 
 <img src="/react/img/tutorial/devtools.png" alt="React Devtools" style="max-width: 100%">
 
-It lets you inspect the props and state of any of the components in your tree.
+你同样可以在开发工具中观察到各个组件的 props 和 state.
 
-After installing it, you can right-click any element on the page, click "Inspect" to open the developer tools, and the React tab will appear as the last tab to the right.
+安装好开发工具之后，你可以在任意页面元素上面右键选择 “审查元素”，之后在弹出的控制台选项卡最右边会看到名为 React 的选项卡。
 
-**However, note there are a few extra steps to get it working with CodePen:**
+**不过，如果你使用的是Codepen在线编辑器的话，还需要几步操作才能正确使用开发工具**
 
-1. Log in or register and confirm your email (required to prevent spam).
-2. Click the "Fork" button.
-3. Click "Change View" and then choose "Debug mode".
-4. In the new tab that opens, the devtools should now have a React tab.
+1. 注册一个正式的 Codepen 账号。
+2. 点击代码编辑器页面右上角的 "Fork" 按钮，将代码示例拷贝为你自己的 pen.
+3. 点击右上角的 "Change View" 按钮并选择 "Debug mode".
+4. 在新打开的页面中，你就可以正常地使用 React 开发工具啦。
 
-## Lifting State Up
+## 状态提升
 
-We now have the basic building blocks for a tic-tac-toe game. But right now, the state is encapsulated in each Square component. To make a fully-working game, we now need to check if one player has won the game, and alternate placing X and O in the squares. To check if someone has won, we'll need to have the value of all 9 squares in one place, rather than split up across the Square components.
+我们现在已经编写好了井字棋游戏最基本的可以落子的棋盘。但是现在应用的状态是独立保存在棋盘上每个格子的 Square 组件当中的。想要编写出来一个真正能玩的游戏，我们还需要判断哪个玩家获胜，并在 X 或 O 两方之间交替落子。想要检查某个玩家是否获胜，需要获取所有9个格子上面的棋子分布的数据，现在这些数据分散在各个格子当中显然是很麻烦的。
 
-You might think that Board should just inquire what the current state of each Square is. Although it is technically possible to do this in React, it is discouraged because it tends to make code difficult to understand, more brittle, and harder to refactor.
+你可能会想着说，我们也可以在棋盘 Board 组件中收集各个格子 Square 组件当中的数据。虽然技术上来讲是可以实现的，但是代码这么写的话会让人很难理解，并且我们以后想要修改重构时也会非常困难。
 
-Instead, the best solution here is to store this state in the Board component instead of in each Square – and the Board component can tell each Square what to display, like how we made each square display its index earlier.
+所以，最好的解决方式是直接将所有的 state 状态数据存储在 Board 组件当中。之后 Board 组件可以将这些数据传递给各个 Square 组件。
 
-**When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.**
+**当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。**
 
-Pulling state upwards like this is common when refactoring React components, so let's take this opportunity to try it out. Add a constructor to the Board and set its initial state to contain an array with 9 nulls, corresponding to the 9 squares:
+像这种提升组件状态的情形在重构 React 组件时经常会遇到。我们趁现在也就来实践一下，在 Board 组件的构造函数中初始化一个包含9个空值的数组作为状态数据，并将这9个数组中的元素分别传递到对应的9个 Square 组件当中。
 
 ```javascript{2-7}
 class Board extends React.Component {
@@ -324,7 +325,7 @@ class Board extends React.Component {
 }
 ```
 
-We'll fill it in later so that a board looks something like
+现在传入的都是空数据，井字棋游戏进行会把数组填充成类似下面这样：
 
 ```javascript
 [
@@ -334,7 +335,7 @@ We'll fill it in later so that a board looks something like
 ]
 ```
 
-Board's `renderSquare` method currently looks like this:
+Board 现在的 `renderSquare` 方法看起来像下面这样：
 
 ```javascript
   renderSquare(i) {
@@ -342,7 +343,7 @@ Board's `renderSquare` method currently looks like this:
   }
 ```
 
-Modify it to pass a `value` prop to Square.
+我们在 value 属性中传递对应 state 数组元素的值。
 
 ```javascript{2}
   renderSquare(i) {
@@ -350,11 +351,11 @@ Modify it to pass a `value` prop to Square.
   }
 ```
 
-[View the current code.](https://codepen.io/gaearon/pen/gWWQPY?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/gWWQPY?editors=0010)
 
-Now we need to change what happens when a square is clicked. The Board component now stores which squares are filled, which means we need some way for Square to update the state of Board. Since component state is considered private, we can't update Board's state directly from Square.
+现在我们需要修改当某个格子被点击时触发的事件处理函数。现在没个格子当中的数据是存储在整个棋盘当中的，所以我们就需要通过一些方法，让格子组件能够修改整个棋盘组件数据的内容。因为每个组件的 state 都是它私有的，所以我们不可以直接在格子组件当中进行修改。
 
-The usual pattern here is pass down a function from Board to Square that gets called when the square is clicked. Change `renderSquare` in Board again so that it reads:
+惯例的做法是，我们再通过 props 传递一个父组件当中的事件处理函数到子组件当中。也就是从 Board 组件里传递一个事件处理函数到 Square 当中，我们来把 `renderSquare` 方法改成下面这样：
 
 ```javascript{5}
   renderSquare(i) {
@@ -367,15 +368,15 @@ The usual pattern here is pass down a function from Board to Square that gets ca
   }
 ```
 
-We split the returned element into multiple lines for readability, and added parens around it so that JavaScript doesn't insert a semicolon after `return` and break our code.
+注意到我们在写代码的时候，在各个属性直接换了行，这样可以改善我们代码的可读性。并且我们在 JSX 元素的最外层套上了一小括号，以防止 JavaScript 代码在解析时自动在换行处添加分号。
 
-Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. Let's make the following changes to Square:
+现在我们从 Board 组件向 Square 组件中传递两个 props 参数：`value` 和 `onClick`. `onClick` 里传递的是一个之后在 Square 组件中能够触发的方法函数。我们动手来修改代码吧：
 
-* Replace `this.state.value` with `this.props.value` in Square's `render`.
-* Replace `this.setState()` with `this.props.onClick()` in Square's `render`.
-* Delete `constructor` definition from Square because it doesn't have state anymore.
+* 将 Square 组件的 `render` 方法中的 `this.state.value` 替换为 `this.props.value` .
+* 将 Square 组件的 `render` 方法中的 `this.setState()` 替换为 `this.props.onClick()` .
+* 删掉 Square  组件中的 构造函数 `constructor` ，因为它现在已经不需要保存 state 了。
 
-After these changes, the whole Square component looks like this:
+进行如上修改之后，代码会变成下面这样：
 
 ```javascript{1,2,4,5}
 class Square extends React.Component {
@@ -389,17 +390,17 @@ class Square extends React.Component {
 }
 ```
 
-Now when the square is clicked, it calls the `onClick` function that was passed by Board. Let's recap what happens here:
+现在每次格子被点击时就会触发传入的 `onClick` 方法。我们来捋一下这其中发生了什么：
 
-1. The `onClick` prop on the built-in DOM `<button>` component tells React to set up a click event listener.
-2. When the button is clicked, React will call the `onClick` event handler defined in Square's `render()` method.
-3. This event handler calls `this.props.onClick()`. Square's props were specified by the Board.
-4. Board passed `onClick={() => this.handleClick(i)}` to Square, so, when called, it runs `this.handleClick(i)` on the Board.
-5. We have not defined the `handleClick()` method on the Board yet, so the code crashes.
+1. 添加 `onClick` 属性到内置的 DOM 元素 `<button>` 上让 React 开启了对点击事件的监听。
+2. 当按钮，也就是棋盘格子被点击时, React 会调用 Square 组件的 `render()` 方法中的 `onClick` 事件处理函数。
+3. 事件处理函数触发了传入其中的 `this.props.onClick()` 方法。这个方法是由 Board 传递给 Square 的。
+4. Board 传递了 `onClick={() => this.handleClick(i)}` 给 Square，所以当 Square 中的事件处理函数触发时，其实就是触发的 Board 当中的 `this.handleClick(i)` 方法。
+5. 现在我们还没有编写 `handleClick()` 方法，所以代码还不能正常工作。
 
-Note that `onClick` on the DOM `<button>` component has a special meaning to React, but we could have called `onClick` prop in Square and `handleClick` in Board something else. It is, however, a common convention in React apps to use `on*` names for the handler prop names and `handle*` for their implementations.
+注意到这里的 `onClick` 事件是 React 组件当中所特有的。不过 `handleClick` 这些方法则只是我们编写事件处理函数时候的命名习惯。
 
-Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class.
+现在我们来动手编写 `handleClick` 方法吧：
 
 ```javascript{9-13}
 class Board extends React.Component {
@@ -452,57 +453,58 @@ class Board extends React.Component {
 }
 ```
 
-[View the current code.](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)
+
+我们使用了 `.slice()` 方法来将之前的数组数据**深拷贝**到了一个新的数组中，而不是修改已有的数组。你可以在 [这个章节](/react/tutorial/tutorial.html#为什么不可变性在React当中非常重要) 来了解为什么不可变性在 React 当中的重要性。
 
-We call `.slice()` to copy the `squares` array instead of mutating the existing array. Jump ahead a [section](/react/tutorial/tutorial.html#why-immutability-is-important) to learn why immutability is important.
+现在你点击棋盘上的格子应该就能够正常落子了。而且状态数据是统一保管在棋盘组件 Board 当中的。你应该注意到了，当事件处理函数触发棋盘父组件的状态数据改变时，格子子组件会自动重新渲染。
 
-Now you should be able to click in squares to fill them again, but the state is stored in the Board component instead of in each Square, which lets us continue building the game. Note how whenever Board's state changes, the Square components rerender automatically.
+现在格子组件 Square 不再拥有自身的状态数据了。它从棋盘父组件 Board 接受数据，并且当自己被点击时通知触发父组件改变状态数据，我们称这类的组件为 **受控组件**。
 
-Square no longer keeps its own state; it receives its value from its parent Board and informs its parent when it's clicked. We call components like this **controlled components**.
+### 为什么不可变性在React当中非常重要
 
-### Why Immutability Is Important
+在上一节内容当中，我们通过使用 `.slice()` 方法对已有的数组数据进行了深拷贝，以此来防止对已有数据的改变。接下来我们稍微了解一下为什么这样的操作是一种非常重要的概念。
 
-In the previous code example, we suggest using the `.slice()` operator to copy the `squares` array prior to making changes and to prevent mutating the existing array. Let's talk about what this means and why it is an important concept to learn.
+改变应用数据的方式一般分为两种。第一种是直接修改已有的变量的值。第二种则是将已有的变量替换为一个新的变量。
 
-There are generally two ways for changing data. The first method is to *mutate* the data by directly changing the values of a variable. The second method is to replace the data with a new copy of the object that also includes desired changes.
+#### 直接修改数据
 
-#### Data change with mutation
 ```javascript
 var player = {score: 1, name: 'Jeff'};
 player.score = 2;
 // Now player is {score: 2, name: 'Jeff'}
 ```
 
-#### Data change without mutation
+#### 替换修改数据
+
 ```javascript
 var player = {score: 1, name: 'Jeff'};
 
 var newPlayer = Object.assign({}, player, {score: 2});
 // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
 
-// Or if you are using object spread syntax proposal, you can write:
+// 或者使用最新的对象分隔符语法，你可以这么写：
 // var newPlayer = {...player, score: 2};
 ```
+两种方式的结果是一样的，但是第二种并没有改变之前已有的数据。通过这样的方式，我们可以得到以下几点好处：
 
-The end result is the same but by not mutating (or changing the underlying data) directly we now have an added benefit that can help us increase component and overall application performance.
-
-#### Easier Undo/Redo and Time Travel
+#### 很轻松地实现 撤销/重做以及时间旅行
 
-Immutability also makes some complex features much easier to implement. For example, further in this tutorial we will implement time travel between different stages of the game. Avoiding data mutations lets us keep a reference to older versions of the data, and switch between them if we need to.
+运用不可变性原则可以让我们很容易实现一些复杂的功能。例如我们在这个教程中会实现的，通过点击列表中的某一项直接返回当某一步棋时的状态。不改变已有的数据内容可以让我们在需要的时候随时切换回历史数据。
 
-#### Tracking Changes
+#### 记录变化
 
-Determining if a mutated object has changed is complex because changes are made directly to the object. This then requires comparing the current object to a previous copy, traversing the entire object tree, and comparing each variable and value. This process can become increasingly complex.
+在我们直接修改一个对象的内容之后，是很难判断它哪里发生了改变的。我们想要判断一个对象的改变，必须拿当前的对象和改变之前的对象相互比较，遍历整个对象树，比较每一个值，这样的操作复杂度是非常高的。
 
-Determining how an immutable object has changed is considerably easier. If the object being referenced is different from before, then the object has changed. That's it.
+而运用不可变性原则之后则要轻松得多。因为我们每次都是返回一个新的对象，所以只要判断这个对象被替换了，那么其中数据肯定是改变了的。
 
-#### Determining When to Re-render in React
+#### 在 React 当中判定何时重新渲染
 
-The biggest benefit of immutability in React comes when you build simple _pure components_. Since immutable data can more easily determine if changes have been made it also helps to determine when a component requires being re-rendered.
+运用不可变性原则给 React 带来最大的好处是，既然我们现在可以很方便地判断对象数据是否发生改变了，那么也就很好决定何时根据数据的改变重新渲染组件。尤其是当我们编写的都属于 **纯组件 pure components **的时候，这种好处的效果更为明显。
 
-To learn more about `shouldComponentUpdate()` and how you can build *pure components* take a look at [Optimizing Performance](/react/docs/optimizing-performance.html#examples).
+了解更多有关 `shouldComponentUpdate()` 以及如何编写 *pure components* 的内容，你可以查阅 [性能优化](/react/docs/optimizing-performance.html#examples) 这一篇。
 
-### Functional Components
+### 函数定义组件
 
 We've removed the constructor, and in fact, React supports a simpler syntax called **functional components** for component types like Square that only consist of a `render` method. Rather than define a class extending `React.Component`, simply write a function that takes props and returns what should be rendered.
 
@@ -522,7 +524,7 @@ You'll need to change `this.props` to `props` both times it appears. Many compon
 
 While we're cleaning up the code, we also changed `onClick={() => props.onClick()}` to just `onClick={props.onClick}`, as passing the function down is enough for our example. Note that `onClick={props.onClick()}` would not work because it would call `props.onClick` immediately instead of passing it down.
 
-[View the current code.](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)
 
 ### Taking Turns
 
@@ -621,7 +623,7 @@ class Board extends React.Component {
 }
 ```
 
-[View the current code.](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)
 
 ### Declaring a Winner
 
@@ -685,7 +687,7 @@ You can now change `handleClick` in Board to return early and ignore the click i
 
 Congratulations! You now have a working tic-tac-toe game. And now you know the basics of React. So *you're* probably the real winner here.
 
-[View the current code.](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)
 
 ## Storing a History
 
@@ -891,7 +893,7 @@ We also need to change it a little, since Game state is structured differently.
 
 At this point, Board only needs `renderSquare` and `render`; the state initialization and click handler should both live in Game.
 
-[View the current code.](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)
 
 ### Showing the Moves
 
@@ -938,7 +940,7 @@ Let's show the previous moves made in the game so far. We learned earlier that R
   }
 ```
 
-[View the current code.](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)
 
 For each step in the history, we create a list item `<li>` with a link `<a>` inside it that goes nowhere (`href="#"`) but has a click handler which we'll implement shortly. With this code, you should see a list of the moves that have been made in the game, along with a warning that says:
 
@@ -1002,7 +1004,7 @@ For our move list, we already have a unique ID for each step: the number of the
     });
 ```
 
-[View the current code.](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)
 
 Clicking any of the move links throws an error because `jumpTo` is undefined. Let's add a new key to Game's state to indicate which step we're currently viewing.
 
@@ -1075,7 +1077,7 @@ Now you can modify Game's `render` to read from that step in the history:
     // the rest has not changed
 ```
 
-[View the current code.](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)
+[查看此步完整代码示例。](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)
 
 If you click any move link now, the board should immediately update to show what the game looked like at that time.
 
@@ -1103,3 +1105,4 @@ If you have extra time or want to practice your new skills, here are some ideas
 5. When someone wins, highlight the three squares that caused the win.
 
 Throughout this tutorial, we have touched on a number of React concepts including elements, components, props, and state. For a more in-depth explanation for each of these topics, check out [the rest of the documentation](/react/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/react/docs/react-component.html).
+

From 9eb5929c33509cccc8da593fee84ab4239606c97 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Thu, 25 May 2017 20:53:45 +0800
Subject: [PATCH 06/12] Update tutorial.md

---
 docs/tutorial/tutorial.md | 151 ++++++++++++++++++++------------------
 1 file changed, 79 insertions(+), 72 deletions(-)

diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md
index d2cf385005..1d0f69d2cb 100755
--- a/docs/tutorial/tutorial.md
+++ b/docs/tutorial/tutorial.md
@@ -506,9 +506,9 @@ var newPlayer = Object.assign({}, player, {score: 2});
 
 ### 函数定义组件
 
-We've removed the constructor, and in fact, React supports a simpler syntax called **functional components** for component types like Square that only consist of a `render` method. Rather than define a class extending `React.Component`, simply write a function that takes props and returns what should be rendered.
+我们刚才已经去掉了 Square 的构造函数，事实上，更进一步的，React 专门为像 Square 组件这种只有 `render` 方法的组件提供了一种更简便的定义组件的方法： **函数定义组件** 。只需要简单写一个以 `props` 为参数的 `function` 返回 JSX 元素就搞定了。
 
-Replace the whole Square class with this function:
+下面我们以函数定义的方式重写 Square 组件：
 
 ```javascript
 function Square(props) {
@@ -520,17 +520,17 @@ function Square(props) {
 }
 ```
 
-You'll need to change `this.props` to `props` both times it appears. Many components in your apps will be able to be written as functional components: these components tend to be easier to write and React will optimize them more in the future.
+记得把所有的 `this.props` 替换成参数 `props`. 我们应用中的大部分简单组件都可以通过函数定义的方式来编写，并且 React 在将来还会对函数定义组件做出更多优化。
 
-While we're cleaning up the code, we also changed `onClick={() => props.onClick()}` to just `onClick={props.onClick}`, as passing the function down is enough for our example. Note that `onClick={props.onClick()}` would not work because it would call `props.onClick` immediately instead of passing it down.
+另外一部分简化的内容则是事件处理函数的写法，这里我们把 `onClick={() => props.onClick()}` 直接修改为 `onClick={props.onClick}` , 注意不能写成 `onClick={props.onClick()}` 否则 `props.onClick` 方法会被直接触发而不是传递到 Square 组件中。
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)
 
-### Taking Turns
+### 轮流落子
 
-An obvious defect in our game is that only X can play. Let's fix that.
+很明显现在我们点击棋盘只后落子的只有 X . 下面我们要开发出 X 和 O 轮流落子的功能。
 
-Let's default the first move to be by 'X'. Modify our starting state in our Board constructor.
+我们将 X 默认设置为先手棋：
 
 ```javascript{6}
 class Board extends React.Component {
@@ -542,8 +542,7 @@ class Board extends React.Component {
     };
   }
 ```
-
-Each time we move we shall toggle `xIsNext` by flipping the boolean value and saving the state. Now update Board's `handleClick` function to flip the value of `xIsNext`.
+接下来，我们每走一步棋，都需要切换 `xIsNext` 的值以此来实现轮流落子的功能，接下来在 `handleClick` 方法中添加修改 `xIsNext` 的语句。
 
 ```javascript{3,6}
   handleClick(i) {
@@ -556,7 +555,7 @@ Each time we move we shall toggle `xIsNext` by flipping the boolean value and sa
   }
 ```
 
-Now X and O take turns. Next, change the "status" text in Board's `render` so that it also displays who is next.
+到这里我们就实现了 X 和 O 轮流落子的效果了。我们再到 `render` 方法里添加一点内容来显示当前执子的一方：
 
 ```javascript{2}
   render() {
@@ -566,7 +565,7 @@ Now X and O take turns. Next, change the "status" text in Board's `render` so th
       // the rest has not changed
 ```
 
-After these changes you should have this Board component:
+现在你整个的 Board 组件的代码应该是下面这样的：
 
 ```javascript{6,11-16,29}
 class Board extends React.Component {
@@ -625,9 +624,9 @@ class Board extends React.Component {
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)
 
-### Declaring a Winner
+### 判断赢家
 
-Let's show when a game is won. Add this helper function to the end of the file:
+接下来我们来编写判断游戏获胜方的代码，首先在你的代码里添加下面这个判断获胜方的算法函数：
 
 ```javascript
 function calculateWinner(squares) {
@@ -651,9 +650,9 @@ function calculateWinner(squares) {
 }
 ```
 
-You can call it in Board's `render` function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins.
+然后你就可以在 Board 组件的 `render` 方法里调用它，来检查是否有人获胜并根据判断显示出  "Winner: [X/O]" 来表示获胜方。
 
-Replace the `status` declaration in Board's `render` with this code:
+将 `render` 中的 `status` 替换为如下内容：
 
 ```javascript{2-8}
   render() {
@@ -669,7 +668,7 @@ Replace the `status` declaration in Board's `render` with this code:
       // the rest has not changed
 ```
 
-You can now change `handleClick` in Board to return early and ignore the click if someone has already won the game or if a square is already filled:
+继续完善游戏规则，我们在 `handleClick` 里添加当前方格内已经落子/有一方获胜就就无法继续落子的判断逻辑：
 
 ```javascript{3-5}
   handleClick(i) {
@@ -685,15 +684,15 @@ You can now change `handleClick` in Board to return early and ignore the click i
   }
 ```
 
-Congratulations! You now have a working tic-tac-toe game. And now you know the basics of React. So *you're* probably the real winner here.
+可喜可贺！现在你已经编写好了一个游戏规则逻辑完整的井字棋游戏了。并且你也已经掌握了一些基本的 React 知识。所以坚持到这一步的你才是真正的赢家呀！
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)
 
-## Storing a History
+## 保存历史纪录
 
-Let's make it possible to revisit old states of the board so we can see what it looked like after any of the previous moves. We're already creating a new `squares` array each time a move is made, which means we can easily store the past board states simultaneously.
+接下来我们一起来实现保存棋局每一步的历史记录的功能。在现有的代码逻辑中，我们已经是在每走一步棋之后就返回一个新的 `squares` 数组了，所以想要保存历史纪录也非常简单。
 
-Let's plan to store an object like this in state:
+我们计划通过一个数组对象来保存每一步的状态数据：
 
 ```javascript
 history = [
@@ -715,9 +714,9 @@ history = [
 ]
 ```
 
-We'll want the top-level Game component to be responsible for displaying the list of moves. So just as we pulled the state up before from Square into Board, let's now pull it up again from Board into Game – so that we have all the information we need at the top level.
+我们期望在顶层的 Game 组件中展示一个链接每一步历史纪录的列表。所以就像我们之前将 state 从 Square 组件提升到 Board 中一样，现在我们把 Board 中的状态数据再提升到 Game 组件中来。
 
-First, set up the initial state for Game by adding a constructor to it:
+首先在 Game 组件的构造函数中初始化我们需要的状态数据：
 
 ```javascript{2-10}
 class Game extends React.Component {
@@ -747,13 +746,13 @@ class Game extends React.Component {
 }
 ```
 
-Then change Board so that it takes `squares` via props and has its own `onClick` prop specified by Game, like the transformation we made for Square earlier. You can pass the location of each square into the click handler so that we still know which square was clicked. Here is a list of steps you need to do:
+接下来，就好像我们之前对 Square 组件的操作一样。我们将 Board 中的状态数据全都移动到 Game 组件当中。Board 现在通过 `props` 获取从 Game 传递下来的数据和事件处理函数。
 
-* Delete the `constructor` in Board.
-* Replace `this.state.squares[i]` with `this.props.squares[i]` in Board's `renderSquare`.
-* Replace `this.handleClick(i)` with `this.props.onClick(i)` in Board's `renderSquare`.
+* 删除 Board 的构造方法 `constructor` .
+* 把 Board 的 `renderSquare` 方法中的 `this.state.squares[i]` 替换为 `this.props.squares[i]` .
+* 把 Board 的 `renderSquare` 方法中的 `this.handleClick(i)` 替换为 `this.props.onClick(i)` .
 
-Now the whole Board component looks like this:
+现在我们的 Board 组件变成了下面这样：
 
 ```javascript{17,18}
 class Board extends React.Component {
@@ -811,7 +810,7 @@ class Board extends React.Component {
 }
 ```
 
-Game's `render` should look at the most recent history entry and can take over calculating the game status:
+Game 组件的 `render` 方法现在则要负责获取最近一步的历史纪录（当前棋局状态），以及计算出游戏进行的状态（是否有人获胜）。
 
 ```javascript{2-11,16-19,22}
   render() {
@@ -843,7 +842,7 @@ Game's `render` should look at the most recent history entry and can take over c
   }
 ```
 
-Since Game is now rendering the status, we can delete `<div className="status">{status}</div>` and the code calculating the status from the Board's `render` function:
+既然现在由 Game 组件负责渲染游戏状态，我们可以直接把 Board 组件的 `render` 方法里的 `<div className="status">{status}</div>` 删掉：
 
 ```js{1-4}
   render() {
@@ -869,9 +868,9 @@ Since Game is now rendering the status, we can delete `<div className="status">{
   }
 ```
 
-Next, we need to move the `handleClick` method implementation from Board to Game. You can cut it from the Board class, and paste it into the Game class.
+之后，我们需要将 Board 组件里的 `handleClick` 移动到 Game 组件当中。你可以直接把它剪切粘贴过来。
 
-We also need to change it a little, since Game state is structured differently. Game's `handleClick` can push a new entry onto the stack by concatenating the new history entry to make a new history array.
+不过为了实现我们新的历史纪录的功能，还需要稍微修改一下我们的代码，让 `handleClick` 在每次触发时，添加当前的棋局状态数据到 `histroy` 当中。
 
 ```javascript{2-4,10-12}
   handleClick(i) {
@@ -891,13 +890,13 @@ We also need to change it a little, since Game state is structured differently.
   }
 ```
 
-At this point, Board only needs `renderSquare` and `render`; the state initialization and click handler should both live in Game.
+代码编写到这一步，Board 组件当中现在应该只有 `renderSquare` 和 `render` 两个方法；应用状态 state 以及事件处理函数现在都定义在 Game 组件当中。
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)
 
-### Showing the Moves
+### 展示每步历史纪录链接
 
-Let's show the previous moves made in the game so far. We learned earlier that React elements are first-class JS objects and we can store them or pass them around. To render multiple items in React, we pass an array of React elements. The most common way to build that array is to map over your array of data. Let's do that in the `render` method of Game:
+现在我们来试着展示每一步棋的历史纪录链接。在教程的开始我们提到过，React 元素事实上都是 JS 当中的对象，我们可以把元素当作参数或定义到变量中使用。在 React 当中渲染多个重复的项目时，我们一般都以数组的方式传递 React 元素。最基本的方法是使用数组的 map 方法，我们试着来修改 Game 组件的 `render` 方法吧：
 
 ```javascript{6-15,34}
   render() {
@@ -942,27 +941,27 @@ Let's show the previous moves made in the game so far. We learned earlier that R
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)
 
-For each step in the history, we create a list item `<li>` with a link `<a>` inside it that goes nowhere (`href="#"`) but has a click handler which we'll implement shortly. With this code, you should see a list of the moves that have been made in the game, along with a warning that says:
+对于每一步的历史纪录，我们都创建了一个带 `<a>` 链接的 `<li>` 列表项。目前链接还没指向任何地方，别着急我们后面会继续实现切换至对应棋步的功能。有了我们现有的代码，已经能渲染出一个列表了，不过你留心的话，就会在控制台看到警告：
 
 >  Warning:
 >  Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".
 
-Let's talk about what that warning means.
+我们先来了解一下这条警告是什么情况。
 
 ### Keys
 
-When you render a list of items, React always stores some info about each item in the list. If you render a component that has state, that state needs to be stored – and regardless of how you implement your components, React stores a reference to the backing native views.
+当你在 React 当中渲染列表项时，React 都会试着存储对应每个单独项的相关信息。如果你的组件包含 state 状态数据，那么这些状态数据必须被排序，不管你组件是怎么编写实现的。
 
-When you update that list, React needs to determine what has changed. You could've added, removed, rearranged, or updated items in the list.
+当你想要更新这些列表项时，React 必须能够知道是那一项改变了。这样你才能够在列表中增删改查项目。
 
-Imagine transitioning from
+比方说下面这个例子，从前一个表单
 
 ```html
 <li>Alexa: 7 tasks left</li>
 <li>Ben: 5 tasks left</li>
 ```
 
-to
+变成下面这个表单
 
 ```html
 <li>Ben: 9 tasks left</li>
@@ -970,26 +969,25 @@ to
 <li>Alexa: 5 tasks left</li>
 ```
 
-To a human eye, it looks likely that Alexa and Ben swapped places and Claudia was added – but React is just a computer program and doesn't know what you intended it to do. As a result, React asks you to specify a *key* property on each element in a list, a string to differentiate each component from its siblings. In this case, `alexa`, `ben`, `claudia` might be sensible keys; if the items correspond to objects in a database, the database ID is usually a good choice:
+你用肉眼可以很轻易地分辨，Alexa 被移到了最后，多出来一个 Claudia。可是 React 只是电脑里运行地程序，它无从知晓这些改变。所以我们必须为列表中的每一项添加一个 *key* 作为唯一的标识符。标识符必须是唯一的，比方说刚才这个例子中的 `alexa`, `ben`, `claudia` 就可以用来做标识符。更普遍的一种情况，假如我们的数据是从数据库获取的电话，表单每一项的 ID 就很适合当作它的 *key* ：
 
 ```html
 <li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
 ```
 
-`key` is a special property that's reserved by React (along with `ref`, a more advanced feature). When an element is created, React pulls off the `key` property and stores the key directly on the returned element. Even though it may look like it is part of props, it cannot be referenced with `this.props.key`. React uses the key automatically while deciding which children to update; there is no way for a component to inquire about its own key.
-
-When a list is rerendered, React takes each element in the new version and looks for one with a matching key in the previous list. When a key is added to the set, a component is created; when a key is removed, a component is destroyed. Keys tell React about the identity of each component, so that it can maintain the state across rerenders. If you change the key of a component, it will be completely destroyed and recreated with a new state.
+ `key` 是 React 当中使用的一种特殊的属性（除此之外还有 `ref` 属性）。当元素被创建时，React 会将元素的 `key` 值和对应元素绑定存储起来。尽管 `key` 看起来像是 props 的一部分，可是事实上我们无法通过 `this.props.key` 获取到 `key` 的值。React 会自动的在判断元素更新时使用 `key` ，而组件自己是无法获取到 `key` 的。 
 
-**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key handy, you may want to consider restructuring your data so that you do.
+当一个列表背重新渲染时，React 会根据较新的元素内容依据相应的 key 值来匹配之前的元素内容。当一个新的 key 值添加到列表当中时，表示有一个组件被创建；被删除时表示有一个组件被销毁。Key 值可以让 React 明确标识每个组件，这样它才能在每次重新渲染时保有对应的状态数据。假如你去改变某个组件的 key 值的话，它会在下次渲染时被销毁并当作新的组件重新渲染进来。
 
-If you don't specify any key, React will warn you and fall back to using the array index as a key – which is not the correct choice if you ever reorder elements in the list or add/remove items anywhere but the bottom of the list. Explicitly passing `key={i}` silences the warning but has the same problem so isn't recommended in most cases.
+**强烈建议你在渲染列表项时添加 keys 值。** 假如你没有现成可以作为唯一 key 值的数据使用的话，你可能需要考虑重新组织设计你的数据了。
 
-Component keys don't need to be globally unique, only unique relative to the immediate siblings.
+假如你不提供任何 key 值，React 会提示警告，并且默认使用数组的索引作为默认的 key ，但这样你想在列表的中间添加或删除项目，对应的键值都会改变（也就会出现我们上面提到的组件key值被改变就会被当作新创建的组件处理那种情况）。手动添加列表索引值 `key={i}` 可以消除警告，但也会存在相同的问题。
 
+组件的 keys 值并不需要在全局都保证唯一，只需要在当前的节点里保证唯一即可。
 
-### Implementing Time Travel
+### 实现时间旅行
 
-For our move list, we already have a unique ID for each step: the number of the move when it happened. In the Game's `render` method, add the key as `<li key={move}>` and the key warning should disappear:
+在我们的棋步的列表中，已经有了现成的唯一 key 值，也就是每一次 move 的记录值。我们通过  `<li key={move}>` 来添加一下。
 
 ```js{6}
     const moves = history.map((step, move) => {
@@ -1006,9 +1004,9 @@ For our move list, we already have a unique ID for each step: the number of the
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)
 
-Clicking any of the move links throws an error because `jumpTo` is undefined. Let's add a new key to Game's state to indicate which step we're currently viewing.
+在上面的代码中，我们同样为每一个 `<a>` 添加了一个 `jumpTo` 方法，用来将棋盘的状态切换至对应的棋步时的状态。接下来我们来着手实现这个方法： 
 
-First, add `stepNumber: 0` to the initial state in Game's `constructor`:
+首先在 Game 组件的初始状态中多设置一项 `stepNumber: 0` ：
 
 ```js{8}
 class Game extends React.Component {
@@ -1024,9 +1022,9 @@ class Game extends React.Component {
   }
 ```
 
-Next, we'll define the `jumpTo` method in Game to update that state. We also want to update `xIsNext`. We set `xIsNext` to true if the index of the move number is an even number.
+接下来，我们正是编写 `jumpTo` 来切换 `stepNumber` 的值。根据游戏的逻辑，与此同时我们还需要修改 `xIsNext` 来保证对应棋步时，执子的一方是能对应上的。我们可以根据棋步计算出是谁在执子。
 
-Add a method called `jumpTo` to the Game class:
+我们把 `jumpTo` 编写在 Game 组件中： 
 
 ```javascript{5-10}
   handleClick(i) {
@@ -1045,7 +1043,7 @@ Add a method called `jumpTo` to the Game class:
   }
 ```
 
-Then update `stepNumber` when a new move is made by adding `stepNumber: history.length` to the state update in Game's `handleClick`:
+接下来，我们在 `handleClick` 方法中对 `stepNumber` 进行更新，添加 `stepNumber: history.length` 保证每走一步 `stepNumber` 会跟着改变：
 
 ```javascript{2,13}
   handleClick(i) {
@@ -1066,7 +1064,7 @@ Then update `stepNumber` when a new move is made by adding `stepNumber: history.
   }
 ```
 
-Now you can modify Game's `render` to read from that step in the history:
+现在你可以直接在 Game 组件的 `render` 方法里根据当前的棋步获取对应的棋局状态了：
 
 ```javascript{3}
   render() {
@@ -1079,30 +1077,39 @@ Now you can modify Game's `render` to read from that step in the history:
 
 [查看此步完整代码示例。](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)
 
-If you click any move link now, the board should immediately update to show what the game looked like at that time.
+现在你试着点击每一步棋记录的列表中的一项，棋盘会自动更新到对应项时的棋局状态。
+
+为了实现“悔棋”的功能，也就是说在切换至某一步之后我们能够继续下，我们需要在 `handleClick` 事件触发时去除掉切回棋步后面的所有记录，最简单的办法就是在 `handleClick` 事件的开头使用 `.slice()` 方法去除。
 
-You may also want to update `handleClick` to be aware of `stepNumber` when reading the current board state so that you can go back in time then click in the board to create a new entry. (Hint: It's easiest to `.slice()` off the extra elements from `history` at the very top of `handleClick`.)
+```javascript{2}
+  render() {
+    const history = this.state.history.slice(0, this.state.stepNumber + 1);
+    const current = history[this.state.stepNumber];
+    const winner = calculateWinner(current.squares);
+
+    // the rest has not changed
+```
 
-### Wrapping Up
+### 总结
 
-Now, you've made a tic-tac-toe game that:
+现在你已经有了一个功能相当丰富的井字棋游戏：
 
-* lets you play tic-tac-toe,
-* indicates when one player has won the game,
-* stores the history of moves during the game,
-* allows players to jump back in time to see older versions of the game board.
+* 实现了井字棋游戏的基本规则并可以进行游戏，
+* 能够判断一方获胜，
+* 能够存储每一步时的棋局状态，
+* 允许玩家切换至之前的某一步“悔棋”。
 
-Nice work! We hope you now feel like you have a decent grasp on how React works.
+干得不错！我们希望你至此已经基本掌握了 React 的使用。
 
-Check out the final result here: [Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010).
+在这里你可以查看游戏代码 [最终的成果](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)。
 
-If you have extra time or want to practice your new skills, here are some ideas for improvements you could make, listed in order of increasing difficulty:
+如果你之后还会有充裕的时间并且想练习你刚掌握的新技能的话，这里有一些可以完善的游戏功能实现供你参考，列表是由易到难排序的：
 
-1. Display the move locations in the format "(1, 3)" instead of "6".
-2. Bold the currently-selected item in the move list.
-3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
-4. Add a toggle button that lets you sort the moves in either ascending or descending order.
-5. When someone wins, highlight the three squares that caused the win.
+1. 以 "(1, 3)" 坐标的方式记录每一步，而不是格子序号 "6"。
+2. 在棋步记录列表里加粗显示当前选中的项目。
+3. 在 Board 组件中用两个循环渲染出 9 个 Square 格子组件。
+4. 添加一个切换按钮来升序或降序显示棋步记录列表。
+5. 当一方获胜时，高亮显示连成一线的3颗棋子。
 
-Throughout this tutorial, we have touched on a number of React concepts including elements, components, props, and state. For a more in-depth explanation for each of these topics, check out [the rest of the documentation](/react/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/react/docs/react-component.html).
+通过这一篇教程，我们大概了解了 React 当中包含 元素、组件、props、state 在内的一些概念。想要更深入地了解每一个关键概念，你可以继续阅读 [文档](/react/docs/hello-world.html)。想要更详细地了解 React 组件，可以查阅 [`React.Component` API 参考](/react/docs/react-component.html)。
 

From 24e7b6bb1ff38dd95604f80fc930222ff1fd9593 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Thu, 25 May 2017 21:07:53 +0800
Subject: [PATCH 07/12] Update tutorial.md

---
 docs/tutorial/tutorial.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md
index 1d0f69d2cb..97e0b1375d 100755
--- a/docs/tutorial/tutorial.md
+++ b/docs/tutorial/tutorial.md
@@ -1111,5 +1111,7 @@ class Game extends React.Component {
 4. 添加一个切换按钮来升序或降序显示棋步记录列表。
 5. 当一方获胜时，高亮显示连成一线的3颗棋子。
 
+> 译者注：如果你在实现上述功能时遇到了问题，也可以参考[React井字棋游戏完整功能示例](https://codepen.io/discountry/pen/ENrZzV)。
+
 通过这一篇教程，我们大概了解了 React 当中包含 元素、组件、props、state 在内的一些概念。想要更深入地了解每一个关键概念，你可以继续阅读 [文档](/react/docs/hello-world.html)。想要更详细地了解 React 组件，可以查阅 [`React.Component` API 参考](/react/docs/react-component.html)。
 

From 7edec82f78ce3a3f04b29595caf21efb6876f493 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Thu, 25 May 2017 21:14:09 +0800
Subject: [PATCH 08/12] Update nav_tutorial.yml

---
 docs/_data/nav_tutorial.yml | 42 ++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/docs/_data/nav_tutorial.yml b/docs/_data/nav_tutorial.yml
index 49cc7557f9..15b50af222 100755
--- a/docs/_data/nav_tutorial.yml
+++ b/docs/_data/nav_tutorial.yml
@@ -1,77 +1,77 @@
-- title: Tutorial
+- title: 入门教程
   items:
     - id: tutorial
-      title: Before We Start
+      title: 课前准备
       subitems:
         - id: what-were-building 
-          title: What We're Building
+          title: 教程简介
           href: /react/tutorial/tutorial.html#what-were-building
           forceInternal: true
         - id: prerequisites
-          title: Prerequisites
+          title: 前置知识
           href: /react/tutorial/tutorial.html#prerequisites
           forceInternal: true
         - id: how-to-follow-along
-          title: How to Follow Along
+          title: 如何编写代码
           href: /react/tutorial/tutorial.html#how-to-follow-along
           forceInternal: true
         - id: help-im-stuck
-          title: Help, I'm Stuck!
+          title: 寻求帮助
           href: /react/tutorial/tutorial.html#help-im-stuck
           forceInternal: true
     - id: overview
-      title: Overview
+      title: 总览
       href: /react/tutorial/tutorial.html#overview
       forceInternal: true
       subitems:
         - id: what-is-react
-          title: What is React?
+          title: React 是什么？
           href: /react/tutorial/tutorial.html#what-is-react
           forceInternal: true
         - id: getting-started
-          title: Getting Started
+          title: 开始编码
           href: /react/tutorial/tutorial.html#getting-started
           forceInternal: true
         - id: passing-data-through-props
-          title: Passing Data Through Props
+          title: 通过 Props 传递数据
           href: /react/tutorial/tutorial.html#passing-data-through-props
           forceInternal: true
         - id: an-interactive-component
-          title: An Interactive Component
+          title: 给组件添加交互功能
           href: /react/tutorial/tutorial.html#an-interactive-component
           forceInternal: true
         - id: developer-tools 
-          title: Developer Tools
+          title: 开发工具
           href: /react/tutorial/tutorial.html#developer-tools
           forceInternal: true
     - id: lifting-state-up
-      title: Lifting State Up
+      title: 状态提升
       href: /react/tutorial/tutorial.html#lifting-state-up
       forceInternal: true
       subitems:
         - id: why-immutability-is-important 
-          title: Why Immutability Is Important
+          title: 为什么不可变性在React当中非常重要
           href: /react/tutorial/tutorial.html#why-immutability-is-important
           forceInternal: true
         - id: functional-components 
-          title: Functional Components
+          title: 函数定义组件
           href: /react/tutorial/tutorial.html#functional-components
           forceInternal: true
         - id: taking-turns
-          title: Taking Turns
+          title: 轮流落子
           href: /react/tutorial/tutorial.html#taking-turns
           forceInternal: true
         - id: declaring-a-winner
-          title: Declaring a Winner
+          title: 判断赢家
           href: /react/tutorial/tutorial.html#declaring-a-winner
           forceInternal: true
     - id: storing-a-history
-      title: Storing A History
+      title: 保存历史纪录
       href: /react/tutorial/tutorial.html#storing-a-history
       forceInternal: true
       subitems:
         - id: showing-the-moves
-          title: Showing the Moves
+          title: 展示每步历史纪录链接
           href: /react/tutorial/tutorial.html#showing-the-moves
           forceInternal: true
         - id: keys
@@ -79,10 +79,10 @@
           href: /react/tutorial/tutorial.html#keys
           forceInternal: true
         - id: implementing-time-travel 
-          title: Implementing Time Travel
+          title: 实现时间旅行
           href: /react/tutorial/tutorial.html#implementing-time-travel
           forceInternal: true
         - id: wrapping-up
-          title: Wrapping Up
+          title: 总结
           href: /react/tutorial/tutorial.html#wrapping-up
           forceInternal: true

From d67845ad6f13a98e8a3c5b2ba45946f259493f36 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Thu, 25 May 2017 21:22:18 +0800
Subject: [PATCH 09/12] Update tutorial.html

---
 docs/_layouts/tutorial.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_layouts/tutorial.html b/docs/_layouts/tutorial.html
index c6bd4832df..9e91f1fa7b 100755
--- a/docs/_layouts/tutorial.html
+++ b/docs/_layouts/tutorial.html
@@ -8,8 +8,8 @@
 
   <div class="inner-content">
     <a class="edit-page-link"
-    href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}"
-    target="_blank">Edit on GitHub</a>
+    href="https://github.com/discountry/react/tree/master/docs/{{ page.path }}"
+    target="_blank">纠错</a>
     <h1>
       {{ page.title }}
     </h1>

From 76d4760feefddea19c724afd8705f9ceceffccd2 Mon Sep 17 00:00:00 2001
From: = <chenshigang1@letv.com>
Date: Fri, 26 May 2017 17:26:09 +0800
Subject: [PATCH 10/12] Update.

---
 docs/docs/reconciliation.md | 84 ++++++++++++++++++-------------------
 docs/docs/web-components.md | 21 +++++-----
 2 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/docs/docs/reconciliation.md b/docs/docs/reconciliation.md
index 19178069b5..1ea3c84e87 100755
--- a/docs/docs/reconciliation.md
+++ b/docs/docs/reconciliation.md
@@ -1,35 +1,35 @@
 ---
 id: reconciliation
-title: Reconciliation
+title: 协调（Reconciliation）
 permalink: docs/reconciliation.html
 ---
 
-React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React's "diffing" algorithm so that component updates are predictable while being fast enough for high-performance apps.
+React提供了一组声明式API以让你不必关心每次更新的变化。这使得应用的编写容易了很多，但在React中如何实现并不是很清晰。这篇文章解释了React对比算法的选择以让组件更新可预测并使得高性能应用足够快。
 
-## Motivation
+## 目的
 
-When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
+当你使用React，在单一时间点你可以考虑`render()`函数作为创建React元素的树。在下一次状态或属性更新，`render()`函数将返回一个不同的React元素的树。React需要算出如何高效更新UI以匹配最为接近的树。
 
-There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
+有一些解决将一棵树转换为另一棵树的最小操作数算法问题的通用方案。然而，树中元素个数为n，[最先进的算法](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) 的时间复杂度为O(n<sup>3</sup>) 。
 
-If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
+若我们在React中使用，展示1000个元素则需要进行10亿次的比较。这操作太过昂贵，相反，React基于两点假设，实现了一个启发的O(n)算法：
 
-1. Two elements of different types will produce different trees.
-2. The developer can hint at which child elements may be stable across different renders with a `key` prop.
+1. 两个不同类型的元素将产生不同的树。
+2. 通过渲染器附带`key`属性，开发者可以示意哪些子元素可能是稳定的。
 
-In practice, these assumptions are valid for almost all practical use cases.
+实践中，上述假设适用于大部分应用场景。
 
-## The Diffing Algorithm
+## 对比算法
 
-When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.
+当对比两棵树时，React首先比较两个根节点。根据不同类型的根元素，其行为也不同。
 
-### Elements Of Different Types
+### 元素的不同类型
 
-Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from `<a>` to `<img>`, or from `<Article>` to `<Comment>`, or from `<Button>` to `<div>` - any of those will lead to a full rebuild.
+每当根元素有不同类型，React将卸载旧树并重新构建新树。从`<a>`到`<img>`或从`<Article>`到`<Comment>`，或从`<Button>` 到 `<div>`，任何的调整都会导致全部重建。
 
-When tearing down a tree, old DOM nodes are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive `componentWillMount()` and then `componentDidMount()`. Any state associated with the old tree is lost.
+当树被卸载，旧的DOM节点将被销毁。组件实例将会接收到`componentWillUnmount()`方法。当构建一棵新树，新的DOM节点被插入到DOM中。组件实例将接收到`componentWillMount()`以及之后的`componentDidMount()`。任何有关旧树的状态都将被丢弃。
 
-Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:
+下面任何组件的根节点将会被卸载同时他们的状态将销毁。例如，在进行对比：
 
 ```xml
 <div>
@@ -41,11 +41,11 @@ Any components below the root will also get unmounted and have their state destr
 </span>
 ```
 
-This will destroy the old `Counter` and remount a new one.
+这将会销毁旧的`Counter`并重装新节点。
 
-### DOM Elements Of The Same Type
+### 相同类型的DOM元素
 
-When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. For example:
+当比较两个相同类型的React DOM元素时，React则会观察二者的属性，保持相同的底层DOM节点，并仅更新变化的属性。例如：
 
 ```xml
 <div className="before" title="stuff" />
@@ -53,9 +53,9 @@ When comparing two React DOM elements of the same type, React looks at the attri
 <div className="after" title="stuff" />
 ```
 
-By comparing these two elements, React knows to only modify the `className` on the underlying DOM node.
+通过比较两个元素，React知道仅更改底层DOM元素的`className`。
 
-When updating `style`, React also knows to update only the properties that changed. For example:
+当更新`style`时，React同样知道仅更新变更的属性。例如：
 
 ```xml
 <div style={{'{{'}}color: 'red', fontWeight: 'bold'}} />
@@ -63,21 +63,21 @@ When updating `style`, React also knows to update only the properties that chang
 <div style={{'{{'}}color: 'green', fontWeight: 'bold'}} />
 ```
 
-When converting between these two elements, React knows to only modify the `color` style, not the `fontWeight`.
+当在调整两个元素时，React知道仅改变`color`样式而不是`fontWeight`。
 
-After handling the DOM node, React then recurses on the children.
+在处理完DOM元素后，React递归其子元素。
 
-### Component Elements Of The Same Type
+### 相同类型的组件元素
 
-When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls `componentWillReceiveProps()` and `componentWillUpdate()` on the underlying instance.
+当组件更新时，实例仍保持一致，以让状态能够在渲染之间保留。React更新底层组件实例的属性以满足新元素，并在底层实例上调用`componentWillReceiveProps()` 和 `componentWillUpdate()` 方法。
 
-Next, the `render()` method is called and the diff algorithm recurses on the previous result and the new result.
+接下来，`render()`方法被调用，同时对比算法会递归处理之前的结果和新的结果。
 
-### Recursing On Children
+### 递归子节点
 
-By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there's a difference.
+默认时。当递归DOM节点的子节点，React仅在同一时间点递归两个子节点列表，并在有不同时产生一个变更。
 
-For example, when adding an element at the end of the children, converting between these two trees works well:
+例如，当在子节点末尾增加一个元素，两棵树的转换效果很好：
 
 ```xml
 <ul>
@@ -92,9 +92,9 @@ For example, when adding an element at the end of the children, converting betwe
 </ul>
 ```
 
-React will match the two `<li>first</li>` trees, match the two `<li>second</li>` trees, and then insert the `<li>third</li>` tree.
+React将会匹配两棵树的`<li>first</li>`，并匹配两棵树的`<li>second</li>` 节点，并插入`<li>third</li>`节点树。
 
-If you implement it naively, inserting an element at the beginning has worse performance. For example, converting between these two trees works poorly:
+若原生实现，在开始插入元素会使得性能更棘手。例如，两棵树的转换效果则比较糟糕：
 
 ```xml
 <ul>
@@ -109,11 +109,11 @@ If you implement it naively, inserting an element at the beginning has worse per
 </ul>
 ```
 
-React will mutate every child instead of realizing it can keep the `<li>Duke</li>` and `<li>Villanova</li>` subtrees intact. This inefficiency can be a problem.
+React会调整每个子节点，而非意识到可以完整保留`<li>Duke</li>` 和 `<li>Villanova</li>`子树。低效成了一个问题。
 
 ### Keys
 
-In order to solve this issue, React supports a `key` attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a `key` to our inefficient example above can make the tree conversion efficient:
+为解决该问题，React支持了一个`key`属性。当子节点有key时，React使用key来匹配原本树的子节点和新树的子节点。例如，增加一个`key`在之前效率不高的样例中能让树的转换变得高效：
 
 ```xml
 <ul>
@@ -128,26 +128,26 @@ In order to solve this issue, React supports a `key` attribute. When children ha
 </ul>
 ```
 
-Now React knows that the element with key `'2014'` is the new one, and the elements with the keys `'2015'` and `'2016'` have just moved.
+现在React知道带有`'2014'`的key的元素是新的，并仅移动带有`'2015'`和`'2016'`的key的元素。
 
-In practice, finding a key is usually not hard. The element you are going to display may already have a unique ID, so the key can just come from your data:
+实践中，发现key通常不难。你将展示的元素可能已经带有一个唯一的ID，因此key可以来自于你的数据中：
 
 ```js
 <li key={item.id}>{item.name}</li>
 ```
 
-When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. The key only has to be unique among its siblings, not globally unique.
+当这已不再是问题，你可以增加一个新的ID属性到数据层或内容的部分哈希值以生成key。key必须在其兄弟节点中是唯一的，而非全局唯一。
 
-As a last resort, you can pass item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
+万不得已，你可以传递他们在数组中的索引作为key。若元素没有重排，该方法效果不错，但重排会使得其变慢。
 
-## Tradeoffs
+## 权衡
 
-It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. We are regularly refining the heuristics in order to make common use cases faster.
+牢记协调算法的实现细节非常中。React可能会在每次操作时渲染整个应用；而结果仍是相同的。为保证大多数场景效率能更快，我们通常提炼启发式的算法。
 
-In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree.
+在目前实现中，可以表明一个事实，即子树在其兄弟节点中移动，但你无法告知其移动到哪。该算法会重渲整个子树。
 
-Because React relies on heuristics, if the assumptions behind them are not met, performance will suffer.
+由于React依赖于该启发式算法，若其背后的假设没得到满足，则其性能将会受到影响：
 
-1. The algorithm will not try to match subtrees of different component types. If you see yourself alternating between two component types with very similar output, you may want to make it the same type. In practice, we haven't found this to be an issue.
+1. 算法无法尝试匹配不同组件类型的子元素。若你发现两个输出非常相似的组件类型交替出现，你可能希望使其成为相同类型。实践中，我们并非发现这是一个问题。
 
-2. Keys should be stable, predictable, and unique. Unstable keys (like those produced by `Math.random()`) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.
+2. Keys应该是稳定的，可预测的，且唯一的。不稳定的key（类似由`Math.random()`生成的）将使得大量组件实例和DOM节点进行不必要的重建，使得性能下降并丢失子组件的状态。
diff --git a/docs/docs/web-components.md b/docs/docs/web-components.md
index 1012ea795b..1a648f7e7b 100755
--- a/docs/docs/web-components.md
+++ b/docs/docs/web-components.md
@@ -1,15 +1,15 @@
 ---
 id: web-components
-title: Web Components
+title: Web组件（Web Components）
 permalink: docs/web-components.html
 redirect_from: "docs/webcomponents.html"
 ---
 
-React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems.  Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
+React 和 [web组件](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 被用以解决不同问题。Web组件为可重用组件提供了强大的封装能力，而React则是提供了保持DOM和数据同步的声明式库。二者目标互补。作为开发者，你可以随意地在Web组件里使用React或在React里，或者在React里使用Web组件，或都有。
 
-Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
+大部分使用React的开发者并不使用Web组件，但你可能想要，尤其若你正在使用那些用Web组件编写的第三方UI组件。
 
-## Using Web Components in React
+## 在React中使用Web组件
 
 ```javascript
 class HelloMessage extends React.Component {
@@ -19,14 +19,15 @@ class HelloMessage extends React.Component {
 }
 ```
 
-> Note:
+>注意：
 >
-> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
+> Web组件通常暴露一个必要的API，例如，一个`video`Web组件可能会暴露`play()`和`pause()`方法。为访问组件的必要API，你需要使用一个引用以能够直接和DOM节点交互。若你正在使用第三方Web组件，其最好的解决方案是编写一个React组件，以包装该Web组件。
 >
-> Events emitted by a Web Component may not properly propagate through a React render tree.
-> You will need to manually attach event handlers to handle these events within your React components.
+> 由Web组件触发的事件可能无法通过React渲染树来正确冒泡。
+>
+> 你需要手动捕获事件处理器以处理那些在React组件里的事件。 
 
-One common confusion is that Web Components use "class" instead of "className".
+一个普遍的困扰是Web组件使用“class”而非“claassName”。
 
 ```javascript
 function BrickFlipbox() {
@@ -39,7 +40,7 @@ function BrickFlipbox() {
 }
 ```
 
-## Using React in your Web Components
+## 在Web组件中使用React
 
 ```javascript
 const proto = Object.create(HTMLElement.prototype, {

From a09e0025dfb58efb9e208e07f5891996d89fff01 Mon Sep 17 00:00:00 2001
From: Disney <331027793@qq.com>
Date: Sat, 27 May 2017 12:31:59 +0800
Subject: [PATCH 11/12] Update web-components.md

---
 docs/docs/web-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/web-components.md b/docs/docs/web-components.md
index 1a648f7e7b..d9840cd9cb 100755
--- a/docs/docs/web-components.md
+++ b/docs/docs/web-components.md
@@ -1,6 +1,6 @@
 ---
 id: web-components
-title: Web组件（Web Components）
+title: Web Components
 permalink: docs/web-components.html
 redirect_from: "docs/webcomponents.html"
 ---

From 5a22740a1df7869cccfc08d85fbb602bd4116a8d Mon Sep 17 00:00:00 2001
From: S1ngS1ng <liuxing0514@gmail.com>
Date: Sat, 27 May 2017 01:10:05 -0400
Subject: [PATCH 12/12] Finish integration-with-other-libraries

---
 docs/docs/integrating-with-other-libraries.md | 129 +++++++++---------
 1 file changed, 65 insertions(+), 64 deletions(-)

diff --git a/docs/docs/integrating-with-other-libraries.md b/docs/docs/integrating-with-other-libraries.md
index c7a3ab0083..94f8276144 100755
--- a/docs/docs/integrating-with-other-libraries.md
+++ b/docs/docs/integrating-with-other-libraries.md
@@ -4,23 +4,23 @@ 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](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
+我们可以在任何网页应用中使用 React。不仅可以把 React 添加到其他应用里，而且只要稍作改动，我们也可以把其他应用添加到 React 项目里。本文将着重介绍如何将 React 与 [jQuery](https://jquery.com/) 以及 [Backbone](http://backbonejs.org/) 结合使用。当然，类似的思路同样可以应用与其他场景。
 
-## Integrating with DOM Manipulation Plugins
+## 与 DOM 节点操作类插件结合
 
-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 之外的 DOM 节点操作，React 是不会去处理的，因为 React 内部有自己的渲染逻辑。当相同的 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 are 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
+### 进一步的解释
 
-To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin.
+为了解释得更清楚，我们先来封装一个通用的 jQuery 插件吧。
 
-We will attach a [ref](/react/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.
+在这里，我们给 DOM 的根节点元素加了一个 [ref](/react/docs/refs-and-the-dom.html)。在 `componentDidMount` 中，我们会调用这个 ref，并把它传给 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 插件就可以随意地更新这个节点。
 
 ```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 hooks](/react/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` [生命周期函数](/react/docs/react-component.html#the-component-lifecycle)。由于很多 jQuery 的插件都会在 DOM 上挂载事件监听器，因此我们必须要在 `componentWillUnmount` 的时候把这个监听器删掉。如果某个插件没有提供“删除监听器”这类的方法，那你很可能需要自己写一个。为了防止内存泄漏，请务必在生命周期函数中移除插件挂载的事件监听器。
 
-### Integrating with jQuery Chosen Plugin
+### 集成 jQuery Chosen 插件
 
-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.
+为了进一步解释上面提到的内容，我们来封装一个 [Chosen](https://harvesthq.github.io/chosen/) 插件，这是一个可以扩充 `<select>` 功能的 jQuery 插件。
 
->**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 应用中组件的可复用性强，而且通常来说，组件的行为及外观也是更容易控制的。
 
-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>` 节点中调用 Chosen 插件，首先它会读取节点中原本存在的属性，然后通过添加行内样式，把 `<select>` 这个节点隐藏起来。接下来，Chosen 插件会在隐藏起来的这个 `<select>` 节点之后添加它自己定义的节点。最后，调用 jQuery，并告知我们节点已经被它改变了。
 
-Let's say that this is the API we're striving for with our `<Chosen>` wrapper React component:
+那么，我们就需要把上面提到的这个节点封装成 React 组件。在这里我们把它封装成 `<Chosen>`：
 
 ```js
 function Example() {
@@ -67,9 +67,9 @@ function Example() {
 }
 ```
 
-We will implement it as an [uncontrolled component](/react/docs/uncontrolled-components.html) for simplicity.
+为了方便，我么先把它写成一个 [不可控组件](/react/docs/uncontrolled-components.html)。
 
-First, we will create an empty component with a `render()` method where we return `<select>` wrapped in a `<div>`:
+首先，我们来创建一个带有 `render()` 方法的空组件，这个组件返回用 `<div>` 包着的 `<select>`：
 
 ```js{4,5}
 class Chosen extends React.Component {
@@ -85,9 +85,10 @@ 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.
+需要注意，这里我们必须用一个 `<div>` 包着 `<select>`，因为 Chosen 插件会在 `<select>` 之后添加 DOM 元素。对于 React 来说，`<div>` 就应该只有一个子级元素，因此这样做就可以让 React 忽略 Chosen 插件添加的 DOM 元素，也就不会存在冲突了。请记住，如果你想让其他插件修改某一个 DOM 节点，那你一定要保证 React 不会同时修改这个节点。
 
-Next, we will implement the lifecycle hooks. We need to initialize Chosen with the ref to the `<select>` node in `componentDidMount`, and tear it down in `componentWillUnmount`:
+
+接下来，我们需要添加生命周期函数。在 Chosen 插件初始化节点的时候，我们需要在 `componentDidMount` 里面给 `<select>` 节点设置一个 ref，然后在 `componentWillUnmount` 的时候删掉它：
 
 ```js{2,3,7}
 componentDidMount() {
@@ -100,17 +101,17 @@ componentWillUnmount() {
 }
 ```
 
-[Try it on CodePen.](http://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:
+我们不需要直接给 Chosen 传入 `this.props.onChange`，因为组件的 props 会随时发生变化，而且我们还需要一个处理 jQuery 事件的方法。在这里，我们定义了一个 `handleChange` 方法，这个方法会调用 `this.props.onChange`。然后，我们就用方法来订阅 jQuery 的 `change` 事件：
 
 ```js{5,6,10,14-16}
 componentDidMount() {
@@ -131,11 +132,11 @@ handleChange(e) {
 }
 ```
 
-[Try it on CodePen.](http://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>` 组件父级元素的 state 改变了，那么 `<Chosen>` 组件里面的 DOM 节点也很可能发生变化。这也就意味着，在集成插件的时候，如果 props 发生了改变，那我们就需要手动更新 DOM 元素，这是因为我们之前已经保证过 React 不会去处理这个节点。
 
-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 hook that notifies Chosen about changes in the children list:
+Chosen 插件的文档中提到，我们可以用 jQuery 的 `trigger()` 方法来更新 Chosen 中的 DOM 元素。那么，我们可以让 React 负责处理 `<select>` 中的 `this.props.children`，然后用 `componentDidUpdate()` 来通知 Chosen 去更新节点的 DOM 元素：
 
 ```js{2,3}
 componentDidUpdate(prevProps) {
@@ -145,9 +146,9 @@ componentDidUpdate(prevProps) {
 }
 ```
 
-This way, Chosen will know to update its DOM element when the `<select>` children managed by React change.
+这样一来，Chosen 插件就可以在 React 获取到 `<select>` 子元素变化的时候去更新 DOM 元素了。
 
-The complete implementation of the `Chosen` component looks like this:
+我们把上面提到的内容结合起来，`Chosen` 组件的最终代码如下：
 
 ```js
 class Chosen extends React.Component {
@@ -186,21 +187,21 @@ class Chosen extends React.Component {
 }
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
+[CodePen 上的示例](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
 
-## Integrating with Other View Libraries
+## 在 React 中使用其他引擎加载页面
 
-React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/react/docs/react-dom.html#render).
+由于 [`ReactDOM.reander()`](/react/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 是在页面加载的时候把一个根组件放到 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 it with our existing server-generated templates and other client-side code.
+事实上，Facebook 就是这么使用 React 的。我们可以独立地开发每一个部件，然后把这些部件与服务端创建的模板以及客户端代码结合起来，这样就形成了一个完整的应用。
 
-### Replacing String-Based Rendering with React
+### 在 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.
+早起的网页应用中，一个常用的方式是先把内容定义成字符串片段，然后插入到 DOM 节点中，就像这样：`$el.html(htmlString)`。采用这种方式写出来的应用，其实非常适合引入 React。只需要把那些字符串定义成 React 组件就可以了。
 
-So the following jQuery implementation...
+比如，这一段 jQuery 代码……
 
 ```js
 $('#container').html('<button id="btn">Say Hello</button>');
@@ -209,7 +210,7 @@ $('#btn').click(function() {
 });
 ```
 
-...could be rewritten using a React component:
+……可以改写成这样的 React 组件：
 
 ```js
 function Button() {
@@ -227,7 +228,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](/react/docs/handling-events.html) and register the click handler directly on the React `<button>` element:
+那么现在开始，你就可以在这个组件中应用 React 的思路，加入更多的逻辑代码。比如，习惯上来说组件是不应该依赖 ID 的，因为这一个组件可能会显示很多次。因此，我们需要使用 [React 事件系统](/react/docs/handling-events.html) 来给 `<button>` 添加点击事件的回调
 
 ```js{2,6,9}
 function Button(props) {
@@ -247,15 +248,15 @@ ReactDOM.render(
 );
 ```
 
-[Try it on CodePen.](http://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
+### 在 React 中使用 Backbone 的视图
 
-[Backbone](http://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 组件中的 render 方法。
 
-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()`](/react/docs/react-dom.html#render):
+现在我们来创建一个叫做 `ParagraphView` 的 Backbone 视图，然后我们要覆盖 Backbone 原有的 `render()` 方法，让 Backbone 中 (`this.el`) 创建的 DOM 元素加载 React 的 `<Paragraph>` 组件：
 
 ```js{1,5,8,12}
 function Paragraph(props) {
@@ -275,23 +276,23 @@ const ParagraphView = Backbone.View.extend({
 });
 ```
 
-[Try it on CodePen.](http://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 it this method.
+当一个组件被 React 从树中删除，在这个组件上绑定的监听器之类的也会被清除掉。但由于我们是在手动操作这些，因此需要调用相关方法。
 
-## Integrating with Model Layers
+## 在 React 中使用其他数据层库和框架
 
-While it is generally recommended to use unidirectional data flow such as [React state](/react/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), or [Redux](http://redux.js.org/), React components can use a model layer from other frameworks and libraries.
+一般来说，推荐大家使用符合单向数据流的框架和库，比如 [React state](/react/docs/lifting-state-up.html)、[Flux](http://facebook.github.io/flux/) 或 [Redux](http://redux.js.org/)。但 React 的组件也可以支持其他处理数据流的框架和库。
 
-### Using Backbone Models in React Components
+### 在 React 组件中使用 Backbone 处理数据
 
-The simplest way to consume [Backbone](http://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/) 处理数据模型，最简单的实现方式就是监听多个事件，然后手动调用方法，强制更新页面。
 
-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()`](/react/docs/react-component.html#forceupdate) to rerender the component with the new data.
+负责处理数据模型的组件通常都会监听 `'change'` 事件，但负责处理数据本身的组件还要监听 `'add'` 和 `'remove'` 事件。无论对于哪种，我们都可以通过调用 [`this.forceUpdate()`](/react/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 的数据，而 `Item` 组件是负责显示每一条数据的。
 
 ```js{1,7-9,12,16,24,30-32,35,39,46}
 class Item extends React.Component {
@@ -347,19 +348,19 @@ class List extends React.Component {
 }
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
+[CodePen 上的示例](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
 
-### Extracting Data from Backbone Models
+### 从 Backbone 的数据模型中提取数据
 
-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 数据的更新。如果将来你打算迁移到另一个数据管理系统，你肯定不愿意在 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](/react/docs/higher-order-components.html) that extracts all attributes of a Backbone model into state, passing the data to the wrapped component.
+一种解决方案就是在数据变化时，提取出数据模型的属性，并把这个逻辑封装起来。这里有个 [高阶组件](/react/docs/higher-order-components.html) 的例子，作用就是把 Backbone 数据模型中的属性提取出来成为 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 数据模型的更新，应用中的其他组件都不需要与 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.
+在下面的例子中，我们会把数据模型的属性复制到初始 state 中。然后我们会订阅 `change` 事件（当然，我们也要在组件移除的时候取消订阅）。`change` 事件触发的时候，我们会根据数据模型当前的属性来更新 state。最后，我们还要确认一件事，就是在 `model` 这个 prop 本身发生变化的时候，我们同样要取消原来的订阅，同时订阅更新后的 prop。
 
-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 +400,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:
+为了展示如何调用，我们在 Backbone 模型中引入一个叫做 `NameInput` 的 React 组件。当输入发生变化时更新组件的 `firstName` 属性。
 
 ```js{4,6,11,15,19-21}
 function NameInput(props) {
@@ -434,6 +435,6 @@ ReactDOM.render(
 );
 ```
 
-[Try it on CodePen.](http://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 hooks and, optionally, copying the data into the local React state.
+以上提到的内容不局限于 Backbone。对于任何处理数据模型的库或框架，你都可以在 React 中通过生命周期函数订阅它的变化事件。你还可以把这些数据直接复制到 React 组件的 state 中，不过这个步骤不是必须的。