@ -119,7 +119,7 @@ var ComponentWithDefaultProps = React.createClass({
## 传递 Props：捷径
有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想 复制任何传进你的组件的HTML属性 到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成：
有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想复制任何传进你的组件的HTML属性到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成：
```javascript
var CheckLink = React.createClass({
@ -139,9 +139,9 @@ ReactDOM.render(
## Mixins
组件是 React 里复用代码最佳方式，但是有时一些复杂 的组件间也需要共用一些功能。有时会被称为 [跨切面关注点 ](https://en.wikipedia.org/wiki/Cross-cutting_concern )。React 使用 `mixins` 来解决这类问题。
组件是 React 里复用代码的最佳方式，但是有时一些不同 的组件间也需要共用一些功能。有时会被称为 [跨切面关注点 ](https://en.wikipedia.org/wiki/Cross-cutting_concern )。React 使用 `mixins` 来解决这类问题。
一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法 ](/react/docs/working-with-the-browser.html#component-lifecycle ) 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。
一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法 ](/react/docs/working-with-the-browser.html#component-lifecycle ) 来告知你 组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。
```javascript
var SetIntervalMixin = {
@ -186,7 +186,7 @@ ReactDOM.render(
## ES6 Classes
你也可以以一个简单的JavaScript 类来定义你的React classes。使用ES6 class的例子:
你也可以以一个简单的 JavaScript 类来定义你的React classes。使用ES6 class的例子:
```javascript
class HelloMessage extends React.Component {
@ -197,9 +197,9 @@ class HelloMessage extends React.Component {
ReactDOM.render(< HelloMessage name = "Sebastian" / > , mountNode);
```
API近似于 `React.createClass` 除了 `getInitialState` 。 你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。
API近似于 `React.createClass` 除了 `getInitialState` 。 你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。就像 `getInitialState` 的返回值，你赋给 `this.state` 的值会被作为组件的初始 state。
另一个不同是 `propTypes` 和 `defaultProps` 在构造函数而不是class body里被定义为属性 。
另一个不同是 `propTypes` 和 `defaultProps` 是 在构造函数里被定义为属性， 而不是在 class body 里。
```javascript
export class Counter extends React.Component {
@ -224,11 +224,38 @@ Counter.defaultProps = { initialCount: 0 };
### 无自动绑定
方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数 ](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions ) `=>` .
方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数 ](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions ) `=>` ：
```javascript
// 你可以使用 bind() 来绑定 `this`
< div onClick = {this.tick.bind(this)} >
// 或者你可以使用箭头函数
< div onClick = {() = > this.tick()}>
```
我们建议你在构造函数中绑定事件处理器，这样对于所有实例它们只需绑定一次：
```javascript
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
```
现在你可以直接使用 `this.tick` 因为它已经在构造函数里绑定过一次了。
```javascript
// 它已经在构造函数里绑定过了
< div onClick = {this.tick} >
```
这对应用的性能有帮助，特别是当你用 [浅层比较 ](/react/docs/shallow-compare.html ) 实现 [shouldComponentUpdate() ](/react/docs/component-specs.html#updating-shouldcomponentupdate ) 时。
### 没有 Mixins
不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易支持这些用例不依靠mixins。
不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易不依靠mixins支持这些用例 。
## 无状态函数
@ -249,7 +276,7 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```
这个简化的组件API旨在用于那些纯函数态的组件 。这些组件必须没有保持任何内部状态，没有备份实例，也没有组件生命周期方法。他们纯粹的函数式的转化他们的输入，没有引用。
然而，你仍然可以以设置为函数的properties 的方式来指定 `.propTypes` 和 `.defaultProps` ，就像你在ES6类里设置他们那样。
然而，你仍然可以以设置函数 properties 的方式来指定 `.propTypes` 和 `.defaultProps` ，就像你在ES6类里设置他们那样。
> 注意：
>
scloudyy
9 years ago
Keyan Zhang