@samitouri / QOS-React / commits / 5b06667efd

Update docs zh cn (#7254)

* update 03-interactivity-and-dynamic-uis.zh-CN * update 04-multiple-components.zh-CN * update 05-reusable-components.zh-CN * updat 06-transferring-props.zh-CN * update 07-forms.zh-CN * update 08-working-with-the-browser.zh-CN * update 08 and 08.1 * update 09-tooling-integration.zh-CN * revise * don't use ES6

scloudyy committed Jul 26, 2016 at 03:23 UTC 5b06667efd6d097834f9fa3358733cd8a6fd49a7

8 files changed +79 -155

docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md

+6 -6

@@ -42,9 +42,9 @@ React 里只需把事件处理器（event handler）以骆峰命名（camelCased

43 在幕后，React 做了一些操作来让代码高效运行且易于理解。

45 -**Autobinding:** 在 JavaScript 里创建回调的时候，为了保证 `this` 的正确性，一般都需要显式地绑定方法到它的实例上。在 React，所有方法被自动绑定到了它的组件实例上（除非使用ES6的class符号）。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。而且还能减少打字！

45 +**自动绑定:** 在 JavaScript 里创建回调的时候，为了保证 `this` 的正确性，一般都需要显式地绑定方法到它的实例上。在 React 中，所有方法被自动绑定到了它的组件实例上（[除非使用ES6的class符号](/react/docs/reusable-components.html#no-autobinding)）。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。而且还能减少打字！

47 -**事件代理：** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候，它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时，只是在内部映射里添加或删除事件处理器。当事件触发，React 根据映射来决定如何分发。当映射里处理器时，会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。

47 +**事件代理:** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候，它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时，只是在内部映射里添加或删除事件处理器。当事件触发，React 根据映射来决定如何分发。当映射里没有事件处理函数时，会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。

49 ## 组件其实是状态机（State Machines）

@@ -54,7 +54,7 @@ React 里，只需更新组件的 state，然后根据新的 state 重新渲染

55 ## State 工作原理

57 -常用的通知 React 数据变化的方法是调用 `setState(data, callback)`。这个方法会合并（merge） `data` 到 `this.state`，并重新渲染组件。渲染完成后，调用可选的 `callback` 回调。大部分情况下不需要提供 `callback`，因为 React 会负责把界面更新到最新状态。

57 +常用的通知 React 数据变化的方法是调用 `setState(data, callback)`。这个方法会合并（merge） `data` 到 `this.state`，并重新渲染组件。重新渲染完成后，调用可选的 `callback` 回调。大部分情况下不需要提供 `callback`，因为 React 会负责把界面更新到最新状态。

59 ## 哪些组件应该有 State？

@@ -66,12 +66,12 @@ React 里，只需更新组件的 state，然后根据新的 state 重新渲染

67 ## 哪些 *应该* 作为 State？

69 -**State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。** 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 `this.state`。在 `render()` 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。

69 +**State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。** 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，思考一下表示它的状态最少需要哪些数据，并只把这些数据存入 `this.state`。在 `render()` 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，那么你就需要经常手动保持数据同步，而不能让 React 来帮你处理。

71 ## 哪些 *不应该* 作为 State？

73 -`this.state` 应该仅包括能表示用户界面状态所需的最少数据。因些，它不应该包括：

73 +`this.state` 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：

75 * **计算所得数据：** 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 `render()` 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串，直接在 `render()` 里使用 `this.state.listItems.length + ' list items'` 比把它放到 state 里好的多。

76 * **React 组件：** 在 `render()` 里使用当前 props 和 state 来创建它。

77 -* **基于 props 的重复数据：** 尽可能使用 props 来作为实际状态的源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为 props 可能因为父组件重绘的结果而变化。

77 +* **基于 props 的重复数据：** 尽可能使用 props 来作为实际状态的源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为 props 可能因为父组件的重绘而变化。

docs/docs/04-multiple-components.zh-CN.md

+7 -6

@@ -54,9 +54,9 @@ ReactDOM.render(

55 ## 从属关系

57 -上面例子中，`Avatar` 拥有 `PagePic` 和 `PageLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。

57 +上面例子中，`Avatar` 拥有 `PagePic` 和 `PageLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们的拥有者所设置的值保持一致。这是保持用户界面一致性的基本不变量。

59 -把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`PagePic` 和 `PageLink` 实例，`div` 是 `PagePic` 和 `PageLink` 实例的**父级**（但不是拥有者）。

59 +把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是 DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`PagePic` 和 `PageLink` 实例，`div` 是 `PagePic` 和 `PageLink` 实例的**父级**（但不是拥有者）。

61 ## 子级

@@ -66,7 +66,7 @@ ReactDOM.render(

66 <Parent><Child /></Parent>

67 ```

69 -`Parent` 能通过专门的 `this.props.children` props 读取子级。**`this.props.children` 是一个不透明的数据结构：** 通过 [React.Children 工具类](/react/docs/top-level-api.html#react.children) 来操作。

69 +`Parent` 能通过专门的 `this.props.children` prop 读取子级。**`this.props.children` 是一个不透明的数据结构：** 通过 [React.Children 工具类](/react/docs/top-level-api.html#react.children) 来操作。

71 ### 子级校正（Reconciliation）

@@ -123,7 +123,8 @@ ReactDOM.render(

123 ```

124

125 当 React 校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。

126 -`务必` 把 `key` 添加到子级数组里组件本身上，而不是每个子级内部最外层 HTML 上：

126 +

127 +务必把 `key` 添加到子级数组中的组件本身上，而不是数组中每个子级组件内部的最外层 HTML 上：

128

129 ```javascript

130 // 错误！

@@ -164,11 +165,11 @@ var MyComponent = React.createClass({

165 });

166 ```

167

167 -也可以传递ReactFragment 对象来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)

168 +也可以传递 ReactFragment 对象来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)

169

170 ## 数据流

171

171 -React 里，数据通过上面介绍过的 `props` 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding)：拥有者通过它的 `props` 或 `state` 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有被使用的地方自动反映出来。

172 +React 里，数据通过上面介绍过的 `props` 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding)：拥有者们通过它们的 `props` 或 `state` 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有它们被使用的地方反映出来。

173

174

175 ## 性能提醒

docs/docs/05-reusable-components.zh-CN.md

+36 -9

@@ -119,7 +119,7 @@ var ComponentWithDefaultProps = React.createClass({

119

120 ## 传递 Props：捷径

121

122 -有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想复制任何传进你的组件的HTML属性到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成：

122 +有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想复制任何传进你的组件的HTML属性到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成：

123

124 ```javascript

125 var CheckLink = React.createClass({

@@ -139,9 +139,9 @@ ReactDOM.render(

139

140 ## Mixins

141

142 -组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。

142 +组件是 React 里复用代码的最佳方式，但是有时一些不同的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。

143

144 -一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。

144 +一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知你组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。

145

146 ```javascript

147 var SetIntervalMixin = {

@@ -186,7 +186,7 @@ ReactDOM.render(

186

187 ## ES6 Classes

188

189 -你也可以以一个简单的JavaScript 类来定义你的React classes。使用ES6 class的例子:

189 +你也可以以一个简单的 JavaScript 类来定义你的React classes。使用ES6 class的例子:

190

191 ```javascript

192 class HelloMessage extends React.Component {

@@ -197,9 +197,9 @@ class HelloMessage extends React.Component {

197 ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

198 ```

199

200 -API近似于 `React.createClass` 除了 `getInitialState`。你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。

200 +API近似于 `React.createClass` 除了 `getInitialState`。你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。就像 `getInitialState` 的返回值，你赋给 `this.state` 的值会被作为组件的初始 state。

201

202 -另一个不同是 `propTypes` 和 `defaultProps` 在构造函数而不是class body里被定义为属性。

202 +另一个不同是 `propTypes` 和 `defaultProps` 是在构造函数里被定义为属性，而不是在 class body 里。

203

204 ```javascript

205 export class Counter extends React.Component {

@@ -224,11 +224,38 @@ Counter.defaultProps = { initialCount: 0 };

224

225 ### 无自动绑定

226

227 -方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`.

227 +方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`：

228 +

229 +```javascript

230 +// 你可以使用 bind() 来绑定 `this`

231 +<div onClick={this.tick.bind(this)}>

232 +

233 +// 或者你可以使用箭头函数

234 +<div onClick={() => this.tick()}>

235 +```

236 +

237 +我们建议你在构造函数中绑定事件处理器，这样对于所有实例它们只需绑定一次：

238 +

239 +```javascript

240 +constructor(props) {

241 + super(props);

242 + this.state = {count: props.initialCount};

243 + this.tick = this.tick.bind(this);

244 +}

245 +```

246 +

247 +现在你可以直接使用 `this.tick` 因为它已经在构造函数里绑定过一次了。

248 +

249 +```javascript

250 +// 它已经在构造函数里绑定过了

251 +<div onClick={this.tick}>

252 +```

253 +

254 +这对应用的性能有帮助，特别是当你用 [浅层比较](/react/docs/shallow-compare.html) 实现 [shouldComponentUpdate()](/react/docs/component-specs.html#updating-shouldcomponentupdate) 时。

255

256 ### 没有 Mixins

257

231 -不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易支持这些用例不依靠mixins。

258 +不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易不依靠mixins支持这些用例。

259

260 ## 无状态函数

261

@@ -249,7 +276,7 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

276 ```

277

278 这个简化的组件API旨在用于那些纯函数态的组件。这些组件必须没有保持任何内部状态，没有备份实例，也没有组件生命周期方法。他们纯粹的函数式的转化他们的输入，没有引用。

252 -然而，你仍然可以以设置为函数的properties的方式来指定 `.propTypes` 和 `.defaultProps`，就像你在ES6类里设置他们那样。

279 +然而，你仍然可以以设置函数 properties 的方式来指定 `.propTypes` 和 `.defaultProps`，就像你在ES6类里设置他们那样。

280

281 > 注意：

282 >

docs/docs/06-transferring-props.zh-CN.md

+4 -4

@@ -6,7 +6,7 @@ prev: reusable-components-zh-CN.html

6 next: forms-zh-CN.html

7 ---

9 -React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。

9 +React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部的实现可能非常复杂。

11 可以使用 [JSX 展开属性](/react/docs/jsx-spread-zh-CN.html) 来合并现有的 props 和其它值：

@@ -53,7 +53,7 @@ ReactDOM.render(

54 有时把所有属性都传下去是不安全或啰嗦的。这时可以使用 [解构赋值](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 中的剩余属性特性来把未知属性批量提取出来。

56 -列出所有要当前使用的属性，后面跟着 `...other`。

56 +列出所有当前要使用的属性，后面跟着 `...other`。

58 ```javascript

59 var { checked, ...other } = props;

@@ -118,11 +118,11 @@ function FancyCheckbox(props) {

118

119 > 注意:

120 >

121 -> 顺序很重要，把 `{...other}` 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。

121 +> 顺序很重要，把 `{...other}` 放到 JSX props 前面会使 props 不会被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。

122

123 ## 剩余属性和展开属性 `...`

124

125 -剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。

125 +剩余属性可以把对象剩下的属性提取到一个新的对象。这会把所有在解构赋值中列出的属性剔除。

126

127 这是 [ECMAScript 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。

128

docs/docs/07-forms.zh-CN.md

+6 -6

@@ -6,7 +6,7 @@ prev: transferring-props-zh-CN.html

6 next: working-with-the-browser-zh-CN.html

7 ---

9 -诸如 `<input>`、`<textarea>`、`<option>` 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

9 +诸如 `<input>`、`<textarea>`、`<option>` 这样的表单组件不同于其他原生组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

11 关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events-zh-CN.html#form-events)。

@@ -76,7 +76,7 @@ next: working-with-the-browser-zh-CN.html

77 ### 复选框与单选按钮的潜在问题

79 -当心，在力图标准化复选框与单选按钮的变换处理中，React使用`click` 事件代替 `change` 事件。在大多数情况下它们表现的如同预期，除了在`change` handler中调用`preventDefault` 。`preventDefault` 阻止了浏览器视觉上更新输入，即使`checked`被触发。变通的方式是要么移除`preventDefault`的调用，要么把`checked` 的触发放在一个`setTimeout`里。

79 +当心，在力图标准化复选框与单选按钮的变换处理中，React使用 `click` 事件代替 `change` 事件。在大多数情况下它们表现的如同预期，除了在`change` handler中调用`preventDefault` 。`preventDefault` 阻止了浏览器视觉上更新输入，即使`checked`被触发。变通的方式是要么移除`preventDefault`的调用，要么把`checked` 的触发放在一个`setTimeout`里。

81 ## 不受控组件

@@ -102,7 +102,7 @@ next: working-with-the-browser-zh-CN.html

102 }

103 ```

104

105 -这个例子会像上面的 **不受控组件** 例子一样运行。

105 +这个例子会像上面的 **受控组件** 例子一样运行。

106

107 同样的， `<input type="checkbox">` 和 `<input type="radio">` 支持 `defaultChecked` 、 `<select>` 支持 `defaultValue`.

108

@@ -130,7 +130,7 @@ next: working-with-the-browser-zh-CN.html

130 }

131 ```

132

133 -既然这个方法描述了在任意时间点上的视图，那么文本输入框的值就应该*始终*为 `Untitled`。

133 +由于这个方法描述了在任意时间点上的视图，那么文本输入框的值就应该*始终*为 `Untitled`。

134

135 ### 为什么 `<textarea>` 使用 `value` 属性？

136

@@ -141,7 +141,7 @@ next: working-with-the-browser-zh-CN.html

141 <textarea name="description">This is the description.</textarea>

142 ```

143

144 -对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符串限制，可以使用 `\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此，设置 `<textarea>` 值时不应该使用子节点：

144 +对 HTML 而言，让开发者设置多行的值很容易。但是，由于 React 是 JavaScript，没有字符串限制，可以使用 `\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`<textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此，设置 `<textarea>` 值时不应该使用子节点：

145

146 ```javascript

147 <textarea name="description" value="This is a description." />

@@ -151,7 +151,7 @@ next: working-with-the-browser-zh-CN.html

151

152 ### 为什么 `<select>` 使用 `value` 属性

153

154 -HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状态；React 为了更方面的控制组件，采用以下方式代替：

154 +HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状态；React 为了更方便地控制组件，采用以下方式代替：

155

156 ```javascript

157 <select value="B">

docs/docs/08-working-with-the-browser.zh-CN.md

+11 -48

@@ -8,17 +8,17 @@ next: more-about-refs-zh-CN.html

9 React提供了强大的抽象机制使你在大多数情况下免于直接接触DOM，但有时你仅仅只需要访问底层API，也许是为了与第三方库或者已有的代码协作。

11 -## 虚拟DOM

11 +## 虚拟 DOM

13 -React非常快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。`render()` 方法实际上返回一个对DOM的*描述*，然后React能根据内存中的“描述”来比较此“描述”以计算出最快速的方法更新浏览器。

13 +React非常快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。`render()` 方法实际上返回一个对DOM的*描述*，然后React能将其与内存中的“描述”进行比较，以计算出最快速的方式更新浏览器。

15 -此外，React实现了一个完备的合成事件(synthetic event)系统，以使得所有的事件对象都被保证符合W3C细则，而不论各个浏览器的怪癖，并且所有事件跨浏览器地一致并高效的冒泡（bubbles），你甚至能在IE8里使用一些HTML5事件！

15 +此外，React实现了一个完备的合成事件（synthetic event）系统，以使得所有的事件对象都被保证符合W3C细则，而不论各个浏览器的怪癖，并且所有事件跨浏览器地一致并高效的冒泡（bubbles），你甚至能在IE8里使用一些HTML5事件！

17 -大多数时间你应该和React的"伪造浏览器"呆在一起，因为它更高性能并且容易推理。然而，有时你只需要访问底层API，或许是为了与第三方库比如一个jQuery插件协作。React为你提供了安全仓口来直接使用底层API。

17 +大多数时间你应该和React的"伪造浏览器"呆在一起，因为它更高性能并且容易推理。然而，有时你只需要访问底层API，或许是为了与第三方库比如一个jQuery插件协作。React为你提供了安全舱口来直接使用底层API。

19 ## Refs 和 findDOMNode()

21 -为了与浏览器互动，你需要一个指向DOM node的引用。你可以连接一个 `ref` 到任何的元素，这允许你引用组件的 **backing instance** 。它很有用，如果你需要在组件上调用命令式函数，或者想访问底层的DOM节点。要了解很多关于 refs，包括更有效使用他们的方法，请查看我们的 [关于Refs的更多内容](/react/docs/more-about-refs-zh-CN.html) 文档。

21 +为了与浏览器互动，你需要一个指向DOM node的引用。你可以连接一个 `ref` 到任何的元素，这允许你引用组件的 **backing instance** 。如果你需要在组件上调用命令式函数，或者想访问底层的DOM节点，它很有用。要了解更多关于 refs，包括更有效使用他们的方法，请查看我们的 [关于Refs的更多内容](/react/docs/more-about-refs-zh-CN.html) 文档。

23 ## 组件的生命周期

@@ -32,7 +32,7 @@ React提供生命周期方法，以便你可以指定钩挂到这个过程上。

33 ### 挂载

35 -* `getInitialState(): object` 在组件挂载前被调用. 有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。

35 +* `getInitialState(): object` 在组件挂载前被调用。有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。

36 * `componentWillMount()` 在挂载发生前被立即调用。

37 * `componentDidMount()` 在挂载发生后被立即调用。需要DOM node的初始化应该放在这里。

@@ -45,53 +45,16 @@ React提供生命周期方法，以便你可以指定钩挂到这个过程上。

46 ### 卸载

48 -* `componentWillUnmount()` 在组件被卸载和摧毁后被立即调用。清理应该放在这里。

48 +* `componentWillUnmount()` 在组件被卸载和摧毁前被立即调用。清理应该放在这里。

50 ### 已挂载的方法

52 _Mounted_ 复合组件同样支持以下方法:

54 -* `component.forceUpdate()` 可以在任何已挂载的组件上调用，在你知道某些深处的组件状态被未使用 `this.setState()` 改变了时。

54 +* `component.forceUpdate()` 可以在任何已挂载的组件上调用，在你知道某些深处的组件状态在未使用 `this.setState()` 就被改变了时。

56 -## 浏览器支持和填充物(polyfills)

56 +## 浏览器支持

58 -在 Facebook，我们支持老浏览器，包括IE8。我们由来已久的有适当的填充物(polyfills)来让我们写前瞻性的js。这意味着我们在代码库中没有一堆散落在各处的技巧(hacks)并且我们依然能期望我们的代码"可行（just work）"。例如，我可以只写 `Date.now()`，而不是额外看到`+new Date()`。既然开源的React和我们内部使用的一样，我们也应用了这种使用前瞻性js的哲学。

58 +React 支持绝大多数流行的浏览器，包括 Internet Explorer 9 及以上。

60 -除了这种哲学外，我们也采用了这样的立场，我们，作为一个JS库的作者，不应该把polyfills作为我们库的一部分。如果所有的库这样做，就有很大的机会发送同样的polyfill多次，这可能是一个相当大的无用代码。如果你的产品需要支援老的浏览器，你很有可能已经在使用某些东西比如[es5-shim](https://github.com/es-shims/es5-shim)。

61 -

62 -### 需要用来支持旧浏览器的Polyfills

63 -

64 -来自 [kriskowal's es5-shim](https://github.com/es-shims/es5-shim)的`es5-shim.js` 提供了如下React需要的东西：

65 -

66 -* `Array.isArray`

67 -* `Array.prototype.every`

68 -* `Array.prototype.forEach`

69 -* `Array.prototype.indexOf`

70 -* `Array.prototype.map`

71 -* `Date.now`

72 -* `Function.prototype.bind`

73 -* `Object.keys`

74 -* `String.prototype.split`

75 -* `String.prototype.trim`

76 -

77 -同样来自 [kriskowal's es5-shim](https://github.com/es-shims/es5-shim)的`es5-sham.js`, 提供了如下React需要的东西：

78 -

79 -* `Object.create`

80 -* `Object.freeze`

81 -

82 -非最小化的React build需要如下，来自[paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill).

83 -

84 -* `console.*`

85 -

86 -当在IE8里使用HTML5元素，包括`<section>`, `<article>`, `<nav>`, `<header>`, 和 `<footer>`, 同样必须包含[html5shiv](https://github.com/aFarkas/html5shiv) 或者类似的脚本。

87 -

88 -### 跨浏览器问题

89 -

90 -尽管React在抽象浏览器不同时做的相当好，但一些浏览器被限制或者表现出怪异的行为，我们没能找到变通的方案解决。

91 -

92 -#### IE8的onScroll事件

93 -

94 -在IE8`onScroll` 事件不冒泡，并且IE8没有定义事件捕获阶段handlers的API，意味React这没有办法去监听这些事件。

95 -目前这个事件的handler在IE8中是被忽略的。

96 -

97 -参见 [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) GitHub问题来获得更多信息.

60 +（我们不支持那些不支持 ES5 methods 的更老的浏览器，但你可能发现如果你的页面包含了类似 [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) 的填充物时是可以在更老的浏览器上运行的。是否做这一步取决于你自己。）

docs/docs/08.1-more-about-refs.zh-CN.md

+5 -5

@@ -11,8 +11,7 @@ next: tooling-integration-zh-CN.html

12 ## 从 ReactDOM.render 返回的 ref

14 -不要被你在你的组件（它返回一个虚拟的DOM元素）里定义的 `render()` 迷惑了， [ReactDOM.render()](/react/docs/top-level-api.html#reactdom.render) 会返回一个对你的组件的 **backing instance** 的引用（或者 `null` for [stateless components](/react/docs/reusable-components.html#stateless-functions)).

15 -

14 +不要被你在你的组件（它返回一个虚拟的DOM元素）里定义的 `render()` 迷惑了， [ReactDOM.render()](/react/docs/top-level-api.html#reactdom.render) 会返回一个对你的组件的 **backing instance** 的引用（[无状态组件](/react/docs/reusable-components.html#stateless-functions) 返回 `null`).

16 ```js

17 var myComponent = ReactDOM.render(<MyComponent />, myContainer);

@@ -64,7 +63,7 @@ React支持一种非常特殊的属性，你可以附加到任何的组件上。

64 当连接一个ref到一个DOM组件如 `<div />`，你取回DOM节点;当连接一个ref到一个复合组件如 `<TextInput />`，你会得到React类的实例。在后一种情况下，你可以调用任何那个组件的类暴露的方法。

67 -注意当被引用的组件卸载和每当ref变动，旧的ref将会被以`null`做参数调用。这阻止了在实例被保存的情况下的内存泄露，如第一个例子。注意当像在这里的例子，使用内联函数表达式写refs，React在每次更新都看到不同的函数对象，ref将会被以`null` 立即调用在它被以组件实例调用前。

66 +注意当被引用的组件卸载和每当ref变动，旧的ref将会被以`null`做参数调用。这阻止了在实例被保存的情况下的内存泄露，如第二个例子。注意当像在这里的例子，使用内联函数表达式写refs，React在每次更新都看到不同的函数对象，ref将会被以`null` 立即调用在它被以组件实例调用前。

68 ## ref String 属性

@@ -76,7 +75,7 @@ React同样支持使用一个字符串（代替回调函数）在任意组件上

75 <input ref="myInput" />

76 ```

79 -2. 在其他一些代码中（典型的事件处理代码），通过`this.refs`访问 **支持实例(backing instance)**，如：

78 +2. 在其他一些代码中（典型的如事件处理的代码），通过`this.refs`访问 **支持实例(backing instance)**，如：

80 ```javascript

81 var input = this.refs.myInput;

@@ -85,6 +84,7 @@ React同样支持使用一个字符串（代替回调函数）在任意组件上

84 ```

86 ## 完整的示例

87 +

88 为了获取一个React组件的引用，你既可以使用 `this` 来获取当前的React组件，也可以使用一个 ref 来获取一个你拥有的组件的引用。他们像这样工作：

90 ```javascript

@@ -121,7 +121,7 @@ ReactDOM.render(

121

122 ## 总结

123

124 -Refs是一种很好的发送消息给特定子实例(通过流式的Reactive `props` 和 `state`来做会不方便)的方式。它们应该，不论怎样，不是你数据流通你的应用的首选。默认情况下，使用响应式数据流，并为本身不是reactive的用例保存`ref`s。

124 +Refs是一种很好的发送消息给特定子实例(通过流式的Reactive `props` 和 `state`来做会不方便)的方式。它们应该，不论怎样，不是你的应用中数据流通的首选。默认情况下，使用响应式数据流，并为本身不是reactive的用例保存`ref`。

125

126 ### 优点:

127

docs/docs/09-tooling-integration.zh-CN.md

+4 -71

@@ -6,75 +6,8 @@ prev: more-about-refs-zh-CN.html

6 next: addons-zh-CN.html

7 ---

9 -每个项目使用一个不同的系统来建立和部署JavaScript.我们努力使React尽可能环境无关。

9 +我们尽可能使 React 与环境无关。大家可以在各种语言（JavaScript, TypeScript, ClojureScript, etc）与各种环境(web, iOS, Android, NodeJS, Nashorn, etc)中使用 React。这里有很多工具来帮助你创建优秀的应用。在这一节中我们介绍一些在 React 中最流行的工具。

11 -## React

12 -

13 -### CDN-hosted React

14 -

15 -我们提供了CDN-hosted版本的React[在我们的下载页面](/react/downloads.html).这些预构建的文件使用UMD模块格式。将他们放进一个简单的`<script>` 标签将会注入一个`React` 全局变量到你的环境里。这也同样在CommonJS 和 AMD 环境里开箱即用。

16 -

17 -### 使用 master

18 -

19 -我们[在我们的 GitHub repository](https://github.com/facebook/react)有从`master`构建的说明。我们在`build/modules` 下构建了一个CommonJS模块的树，你可以把它放到任何支持CommonJS的环境或者打包工具里。

20 -

21 -## JSX

22 -

23 -### 浏览器中的JSX转化

24 -

25 -如果你喜欢使用JSX，Babel5 提供了被称为browser.js 用于开发的一个浏览器内的 ES6 和 JSX 转换器，它可以从 [CDNJS](http://cdnjs.com/libraries/babel-core/5.8.34) 引用。Include `<script type="text/babel">` 标记来使用 JSX 转换器.

26 -

27 -> 注意:

28 ->

29 -> 浏览器中的JSX转换器相当大并且导致额外的本可避免的客户端计算。不要在生产环境中使用 - 见下一节。

30 -

31 -### 投入生产: 预编译 JSX

32 -

33 -如果你有[npm](https://www.npmjs.com/)，你可以运行 `npm install -g babel-cli`. Babel 对React v0.12+ 有内建支持。标签被自动转化为它们的等价物`React.createElement(...)`, `displayName` 被自动推断并添加到所有的React.createClass 调用。

34 -

35 -这个工具会把使用JSX语法的文件转化为简单的可直接在浏览器运行的JavaScript文件。它同样将为你监视目录并自动转化文件当他们变动时；例如：`babel --watch src/ --out-dir lib/`.

36 -

37 -从 Babel 6 开始，默认不再包含转换。这意味这必须在运行 `babel` 命令时指定选项，或者 `.babelrc` 必须指定选项。附加的捆绑了一大批转化的包(presets)也同样需要被安装.协同React工作最常用的是 `es2015` 和 `react` presets.更多关于 Babel 变化的信息可以在 [Babel 6 博客发布的信息](http://babeljs.io/blog/2015/10/29/6.0.0/)上找到.

38 -

39 -这里是一个要使用ES2015 语法和 React 你该怎样做的例子：

40 -

41 -```

42 -npm install babel-preset-es2015 babel-preset-react

43 -babel --presets es2015,react --watch src/ --out-dir lib/

44 -```

45 -

46 -默认模式下带有`.js`后缀的JSX文件被转化。运行 `babel --help` 获取更多关于如何使用 Babel 的信息。

47 -

48 -输出的例子：

49 -

50 -```

51 -$ cat test.jsx

52 -var HelloMessage = React.createClass({

53 - render: function() {

54 - return <div>Hello {this.props.name}</div>;

55 - }

56 -});

57 -

58 -ReactDOM.render(<HelloMessage name="John" />, mountNode);

59 -$ babel test.jsx

60 -"use strict";

61 -

62 -var HelloMessage = React.createClass({

63 - displayName: "HelloMessage",

64 -

65 - render: function render() {

66 - return React.createElement(

67 - "div",

68 - null,

69 - "Hello ",

70 - this.props.name

71 - );

72 - }

73 -});

74 -

75 -ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

76 -```

77 -

78 -### 有帮助的开源项目

79 -

80 -开源社区已经创建了一些集成JSX到数个编辑器和构建系统的工具。全部列表请见[JSX integrations](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations) 。

11 +* [语言工具](/react/docs/language-tooling.html) 描述如何设置例如 Babel 的工具来编译 JSX。

12 +* [包管理](/react/docs/package-management.html) 讲述如何设置将 React 配置为项目中的依赖。

13 +* [服务端环境](/react/docs/environments.html) 讲述如何为 React 配置服务端渲染环境。