diff --git a/docs/02.2-jsx-spread.zh-CN.md b/docs/02.2-jsx-spread.zh-CN.md
index 13d2eb97..ac4dd957 100644
--- a/docs/02.2-jsx-spread.zh-CN.md
+++ b/docs/02.2-jsx-spread.zh-CN.md
@@ -25,7 +25,7 @@ next: jsx-gotchas-zh-CN.html
这样是反模式,因为 React 不能帮你检查属性类型(propTypes)。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
-Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。
+Props 应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果,所以原则上这将是一个冻结的对象。
## 展开属性(Spread Attributes)
diff --git a/docs/02.3-jsx-gotchas.zh-CN.md b/docs/02.3-jsx-gotchas.zh-CN.md
index a086cb37..61da0c0c 100644
--- a/docs/02.3-jsx-gotchas.zh-CN.md
+++ b/docs/02.3-jsx-gotchas.zh-CN.md
@@ -46,7 +46,7 @@ HTML 实体可以插入到 JSX 的文本中。
{['First ', ·, ' Second']}
```
-万不得已,可以直接使用原始 HTML。
+万不得已,可以直接[插入原始HTML](/react/tips/dangerously-set-inner-html.html)。
```javascript
@@ -60,7 +60,7 @@ HTML 实体可以插入到 JSX 的文本中。
```
-以 `aria-` 开头的 [网络无障碍] 属性可以正常使用。
+以 `aria-` 开头的 [网络无障碍](http://www.w3.org/WAI/intro/aria) 属性可以正常使用。
```javascript
diff --git a/docs/03-interactivity-and-dynamic-uis.zh-CN.md b/docs/03-interactivity-and-dynamic-uis.zh-CN.md
index 812a51b6..8d747596 100644
--- a/docs/03-interactivity-and-dynamic-uis.zh-CN.md
+++ b/docs/03-interactivity-and-dynamic-uis.zh-CN.md
@@ -44,7 +44,7 @@ React 里只需把事件处理器(event handler)以骆峰命名(camelCased
在幕后,React 做了一些操作来让代码高效运行且易于理解。
-**Autobinding:** 在 JavaScript 里创建回调的时候,为了保证 `this` 的正确性,一般都需要显式地绑定方法到它的实例上。有了 React,所有方法被自动绑定到了它的组件实例上。React 还缓存这些绑定方法,所以 CPU 和内存都是非常高效。而且还能减少打字!
+**Autobinding:** 在 JavaScript 里创建回调的时候,为了保证 `this` 的正确性,一般都需要显式地绑定方法到它的实例上。在 React,所有方法被自动绑定到了它的组件实例上(除非使用ES6的class符号)。React 还缓存这些绑定方法,所以 CPU 和内存都是非常高效。而且还能减少打字!
**事件代理 :** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候,它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时,只是在内部映射里添加或删除事件处理器。当事件触发,React 根据映射来决定如何分发。当映射里处理器时,会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。
diff --git a/docs/04-multiple-components.zh-CN.md b/docs/04-multiple-components.zh-CN.md
index 7684b6ee..2e717ff5 100644
--- a/docs/04-multiple-components.zh-CN.md
+++ b/docs/04-multiple-components.zh-CN.md
@@ -57,7 +57,7 @@ React.render(
## 从属关系
上面例子中,`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说,
-如果组件 `Y` 在 `render()` 方法是创建了组件 `X`,那么 `Y` 就拥有 `X`。上面讲过,组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。
+如果组件 `Y` 在 `render()` 方法是创建了组件 `X`,那么 `Y` 就拥有 `X`。上面讲过,组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。
把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的,而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中,`Avatar` 拥有 `div`、`ProfilePic` 和 `ProfileLink` 实例,`div` 是 `ProfilePic` 和 `ProfileLink` 实例的**父级**(但不是拥有者)。
@@ -147,7 +147,8 @@ var MyComponent = React.createClass({
);
}
});
-
+```
+```javascript
// 正确 :)
var ListItemWrapper = React.createClass({
render: function() {
@@ -167,26 +168,7 @@ var MyComponent = React.createClass({
});
```
-也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的 `key`。但是一定要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序,**除了** 使用 32位无符号数字做为 key 的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况,React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免:
-
-```javascript
- render: function() {
- var items = {};
-
- this.props.results.forEach(function(result) {
- // 如果 result.id 看起来是一个数字(比如短哈希),那么
- // 对象字面量的顺序就得不到保证。这种情况下,需要添加前缀
- // 来确保 key 是字符串。
- items['result-' + result.id] = {result.text};
- });
-
- return (
-
- {items}
-
- );
- }
-```
+也可以传递ReactFragment 对象 来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)
## 数据流
diff --git a/docs/05-reusable-components.zh-CN.md b/docs/05-reusable-components.zh-CN.md
index 986f9d74..b84b6371 100644
--- a/docs/05-reusable-components.zh-CN.md
+++ b/docs/05-reusable-components.zh-CN.md
@@ -26,7 +26,7 @@ React.createClass({
optionalString: React.PropTypes.string,
// 所有可以被渲染的对象:数字,
- // 字符串,DOM 元素或包含这些类型的数组。
+ // 字符串,DOM 元素或包含这些类型的数组(or fragment) 。
optionalNode: React.PropTypes.node,
// React 元素
@@ -150,7 +150,7 @@ var SetIntervalMixin = {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
- this.intervals.map(clearInterval);
+ this.intervals.forEach(clearInterval);
}
};
@@ -181,3 +181,50 @@ React.render(
```
关于 mixin 值得一提的优点是,如果一个组件使用了多个 mixin,并用有多个 mixin 定义了同样的生命周期方法(如:多个 mixin 都需要在组件销毁时做资源清理操作),所有这些生命周期方法都保证会被执行到。方法执行顺序是:首先按 mixin 引入顺序执行 mixin 里方法,最后执行组件内定义的方法。
+
+## ES6 Classes
+
+你也可以以一个简单的JavaScript 类来定义你的React classes。使用ES6 class的例子:
+
+```javascript
+class HelloMessage extends React.Component {
+ render() {
+ return Hello {this.props.name}
;
+ }
+}
+React.render(, mountNode);
+```
+
+API近似于 `React.createClass` 除了 `getInitialState`。 你应该在构造函数里设置你的`state`,而不是提供一个单独的 `getInitialState` 方法。
+
+另一个不同是 `propTypes` 和 `defaultProps` 在构造函数而不是class body里被定义为属性。
+
+```javascript
+export class Counter extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {count: props.initialCount};
+ }
+ tick() {
+ this.setState({count: this.state.count + 1});
+ }
+ render() {
+ return (
+
+ Clicks: {this.state.count}
+
+ );
+ }
+}
+Counter.propTypes = { initialCount: React.PropTypes.number };
+Counter.defaultProps = { initialCount: 0 };
+```
+
+### 无自动绑定
+
+方法遵循正式的ES6 class的语义,意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`.
+
+### 没有 Mixins
+
+不幸的是ES6的发布没有任何mixin的支持。因此,当你在ES6 classes下使用React时不支持mixins。作为替代,我们正在努力使它更容易支持这些用例不依靠mixins。
+
diff --git a/docs/06-transferring-props.zh-CN.md b/docs/06-transferring-props.zh-CN.md
index d9087d7c..08ceebf6 100644
--- a/docs/06-transferring-props.zh-CN.md
+++ b/docs/06-transferring-props.zh-CN.md
@@ -11,18 +11,17 @@ React 里有一个非常常用的模式就是对组件做一层抽象。组件
可以使用 [JSX 展开属性](/react/docs/jsx-spread-zh-CN.html) 来合并现有的 props 和其它值:
```javascript
-return ;
+
```
如果不使用 JSX,可以使用一些对象辅助方法如 ES6 的 `Object.assign` 或 Underscore `_.extend`。
```javascript
-return Component(Object.assign({}, this.props, { more: 'values' }));
+React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
```
下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。
-
## 手动传递
大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
@@ -48,9 +47,12 @@ React.render(
但 `name` 这个属性怎么办?还有 `title`、`onMouseOver` 这些 props?
-
## 在 JSX 里使用 `...` 传递
+> 注意:
+>
+> 在下面的例子中,`--harmony ` 标志是必须的因为这个语法是ES7的实验性语法。如果用浏览器中的JSX转换器,以 `