update zh-docs (v0.14.3+)

.gitignore

@@ -25,3 +25,4 @@ chrome-user-data
 *.sublime-workspace
 .idea
 *.iml
+.vscode

docs/docs/10.10-shallow-compare.zh-CN.md

@@ -0,0 +1,32 @@
+---
+id: shallow-compare-zh-CN
+title: 浅比较
+permalink: shallow-compare-zh-CN.html
+prev: perf-zh-CN.html
+next: advanced-performance-zh-CN.html
+---
+
+`shallowCompare` 是一个辅助函数 在以ES6类使用React时，完成和 `PureRenderMixin` 相同的功能。
+
+如果你的React组件的绘制函数是 “干净的” （换句话说，它在给定的 props 和 state 下绘制相同的结果）,你可以使用这个辅助函数以在某些情况下提升性能。
+
+例如:
+
+```js
+var shallowCompare = require('react-addons-shallow-compare');
+export class SampleComponent extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  }
+
+  render() {
+    return <div className={this.props.className}>foo</div>;
+  }
+}
+```
+
+`shallowCompare` 对当前的 `props` 和 `nextProps`对象 执行一个浅的相等检查，同样对于 `state` 和 `nextState`对象。
+它 通过迭代比较对象的keys 并在 对象的key值不严格相等时返回false 实现此功能.
+
+`shallowCompare` 返回 `true` 如果对 props 或 state的浅比较失败，因此组件应该更新。
+`shallowCompare` 返回 `false` 如果对 props 或 state的浅比较都通过了，因此组件不应该更新。

docs/docs/10.2-form-input-binding-sugar.zh-CN.md

@@ -0,0 +1,117 @@
+---
+id: two-way-binding-helpers-zh-CN
+title: 双向绑定辅助
+permalink: two-way-binding-helpers-zh-CN.html
+prev: animation-zh-CN.html
+next: test-utils-zh-CN.html
+---
+
+`ReactLink` 是一个用React表达双向绑定的简单方法。
+
+> 注意：
+>
+> 如果你刚学这个框架，注意 `ReactLink` 对大多数应用是不需要的，应该慎重的使用。
+
+在React里，数据单向流动： 从拥有者到子级。这是因为数据只单向流动[the Von Neumann model of computing](https://en.wikipedia.org/wiki/Von_Neumann_architecture)。你可以把它想象为 “单向数据绑定”。
+
+然而，有很多应用需要你去读某些数据并回流他们到你的程序。例如，当开发forms，你会常常想更新一些React `state` 当你收到用户输入的时候。或者也许你想在JavaScript完成布局并相应一些DOM元素大小的变化。
+
+在React里，你可以用监听 "change" 事件来实现它，从你的数据源（通常是DOM）读取并在你的某个组件调用 `setState()` 。明确的"Closing the data flow loop" 致使了更容易理解和维护的程序。更多信息见[our forms documentation](/react/docs/forms.html).
+
+双向绑定 -- 隐含的强迫DOM里的某些值总是和某些React `state` 同步 -- 简洁并支持大量多样的应用。 我们提供了 `ReactLink`：设置如上描述的通用数据回流模式的语法糖，或者 "linking" 某些数据结构到 React `state`.
+
+> 注意:
+>
+> `ReactLink` 只是一层对 `onChange`/`setState()` 模式的薄包装。它没有根本性的改变你的React应用里数据如何流动。
+
+## ReactLink: 之前和之后
+
+这里有一个简单的 不用 `ReactLink` 的 form 例子：
+
+```javascript
+var NoLink = React.createClass({
+  getInitialState: function() {
+    return {message: 'Hello!'};
+  },
+  handleChange: function(event) {
+    this.setState({message: event.target.value});
+  },
+  render: function() {
+    var message = this.state.message;
+    return <input type="text" value={message} onChange={this.handleChange} />;
+  }
+});
+```
+
+这个工作的很好并且数据如何流动很清晰，然而，当有大量的 form fields时，可能会有些冗长。让我们使用  `ReactLink` 来节省我们的输入：
+
+```javascript{4,9}
+var LinkedStateMixin = require('react-addons-linked-state-mixin');
+
+var WithLink = React.createClass({
+  mixins: [LinkedStateMixin],
+  getInitialState: function() {
+    return {message: 'Hello!'};
+  },
+  render: function() {
+    return <input type="text" valueLink={this.linkState('message')} />;
+  }
+});
+```
+
+`LinkedStateMixin` 添加了一个 `linkState()` 方法到你的React组件。`linkState()` 返回一个 `ReactLink` 包含当前React state值的对象和一个改变它的回调函数。
+
+`ReactLink` 对象可以作为props在树中上下传递，所以很容易（显示的）在深层次的组件和高层次的state之间 设置双向绑定。
+
+注意 checkboxes 有一个关于他们 `value` 属性的特殊行为，这个行为是 如果checkbox被选中 值会在表单提交时被发送。 `value` 不会 checkbox 选中或是不选中时更新。对于checkboxes，你应该用`checkedLink` 代替 `valueLink`:
+```
+<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
+```
+
+## 引擎盖下
+
+There are two sides to `ReactLink`: the place where you create the `ReactLink` instance and the place where you use it. To prove how simple `ReactLink` is, let's rewrite each side separately to be more explicit.
+
+### ReactLink Without LinkedStateMixin
+
+```javascript{5-7,9-12}
+var WithoutMixin = React.createClass({
+  getInitialState: function() {
+    return {message: 'Hello!'};
+  },
+  handleChange: function(newValue) {
+    this.setState({message: newValue});
+  },
+  render: function() {
+    var valueLink = {
+      value: this.state.message,
+      requestChange: this.handleChange
+    };
+    return <input type="text" valueLink={valueLink} />;
+  }
+});
+```
+
+As you can see, `ReactLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
+
+### ReactLink Without valueLink
+
+```javascript
+var LinkedStateMixin = require('react-addons-linked-state-mixin');
+
+var WithoutLink = React.createClass({
+  mixins: [LinkedStateMixin],
+  getInitialState: function() {
+    return {message: 'Hello!'};
+  },
+  render: function() {
+    var valueLink = this.linkState('message');
+    var handleChange = function(e) {
+      valueLink.requestChange(e.target.value);
+    };
+    return <input type="text" value={valueLink.value} onChange={handleChange} />;
+  }
+});
+```
+
+The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!

docs/docs/10.3-class-name-manipulation.zh-CN.md

@@ -0,0 +1,11 @@
+---
+id: class-name-manipulation-zh-CN
+title: 类名操纵
+permalink: class-name-manipulation-zh-CN.html
+prev: two-way-binding-helpers-zh-CN.html
+next: test-utils-zh-CN.html
+---
+
+> NOTE:
+>
+> 此模块已被弃用; 用 [JedWatson/classnames](https://github.com/JedWatson/classnames) 替代.

docs/docs/12-context.zh-CN.md

@@ -0,0 +1,173 @@
+---
+id: context-zh-CN
+title: Context
+permalink: context-zh-CN.html
+prev: advanced-performance-zh-CN.html
+---
+
+React最大的优势之一是他很容易从你的React组件里跟踪数据流动。当你看着一个组件，你可以很容易准确看出哪个props被传入，这让你的APP很容易推断。
+
+偶尔，你想通过组件树传递数据，而不在每一级上手工下传prop，React的 "context" 让你做到这点。
+
+＞　注意：
+＞　
+＞　Context是一个先进的实验性特性．这个 API 很可能在未来版本变化.
+>
+> 大多数应用将不会需要用到 context. 尤其是如果你刚开始用React,你很可能不会想用 context.使用 context 将会使你的代码很难理解因为它让数据流不清晰.它类似于在你的应用里使用全局变量传递state.
+>
+> **如果你必须使用 context ,保守的使用它**
+>
+> 不论你正在创建一个应用或者是库,试着分离你对 context 的使用到一个小区域,并尽可能避免直接使用 context API,以便在API变动时容易升级.
+
+## 从树里自动传递info
+
+假设你有一个这样的结构:
+
+```javascript
+var Button = React.createClass({
+  render: function() {
+    return (
+      <button style={{'{{'}}background: this.props.color}}>
+        {this.props.children}
+      </button>
+    );
+  }
+});
+
+var Message = React.createClass({
+  render: function() {
+    return (
+      <div>
+        {this.props.text} <Button color={this.props.color}>Delete</Button>
+      </div>
+    );
+  }
+});
+
+var MessageList = React.createClass({
+  render: function() {
+    var color = "purple";
+    var children = this.props.messages.map(function(message) {
+      return <Message text={message.text} color={color} />;
+    });
+    return <div>{children}</div>;
+  }
+});
+```
+
+在这里例子里,我们手工穿透一个 `color` prop 以便于恰当格式化 `Button` 和 `Message` 组件.主题是一个很好的例子,当你可能想整个子树都可以访问一部分信息时(比如color). 使用 context 我们可以自动传过这个树:
+
+```javascript{2-4,7,18,25-30,33}
+var Button = React.createClass({
+  contextTypes: {
+    color: React.PropTypes.string
+  },
+  render: function() {
+    return (
+      <button style={{'{{'}}background: this.context.color}}>
+        {this.props.children}
+      </button>
+    );
+  }
+});
+
+var Message = React.createClass({
+  render: function() {
+    return (
+      <div>
+        {this.props.text} <Button>Delete</Button>
+      </div>
+    );
+  }
+});
+
+var MessageList = React.createClass({
+  childContextTypes: {
+    color: React.PropTypes.string
+  },
+  getChildContext: function() {
+    return {color: "purple"};
+  },
+  render: function() {
+    var children = this.props.messages.map(function(message) {
+      return <Message text={message.text} />;
+    });
+    return <div>{children}</div>;
+  }
+});
+```
+
+通过添加 `childContextTypes` 和 `getChildContext` 到 `MessageList` ( context 提供),React下传信息到子树中的任何组件(在这个例子中, `Button`可以由定义 `contextTypes`来访问它).
+
+如果 `contextTypes` 没有定义,那么 `this.context` 将是一个空对象.
+
+## 父子耦合
+
+Context 同样可以使你构建这样的 APT:
+
+```javascript
+<Menu>
+  <MenuItem>aubergine</MenuItem>
+  <MenuItem>butternut squash</MenuItem>
+  <MenuItem>clementine</MenuItem>
+</Menu>
+```
+
+通过在 `Menu` 组件下传相关的信息,每个 `MenuItem` 可以与包含他们的 `Menu` 组件沟通.
+
+**在你用这个API构建组件以前,考虑一下是否有清晰的替代方案** 我们 喜欢像这样简单的用数组传递items:
+
+```javascript
+<Menu items={['aubergine', 'butternut squash', 'clementine']} />
+```
+
+记住你同样可以在props里传递整个React组件,如果你想.
+
+## 在生命周期方法里引用 context
+
+如果 `contextTypes` 在一个组件中定义,接下来的生命周期方法会收到一个额外的参数, `context` 对象:
+
+```javascript
+void componentWillReceiveProps(
+  object nextProps, object nextContext
+)
+
+boolean shouldComponentUpdate(
+  object nextProps, object nextState, object nextContext
+)
+
+void componentWillUpdate(
+  object nextProps, object nextState, object nextContext
+)
+
+void componentDidUpdate(
+  object prevProps, object prevState, object prevContext
+)
+```
+
+## 在无状态函数组件里引用 context
+
+无状态函数同样能够引用 `context` 如果 `contextTypes` 被定义为函数的属性.下面的代码展示了被写为无状态函数组件的 `Button` 组件.
+
+```javascript
+function Button(props, context) {
+  return (
+    <button style={{'{{'}}background: context.color}}>
+      {props.children}
+    </button>
+  );
+}
+Button.contextTypes = {color: React.PropTypes.string};
+```
+
+## 什么时候不用 context
+
+正像全局变量是在写清晰代码时最好要避免的,你应该在大多数情况下避免使用context. 特别是,在用它来"节省输入"和代替显示传入props时要三思.
+
+context最好的使用场景是隐式的传入登录的用户,当前的语言,或者主题信息.要不然所有这些可能就是全局变量,但是context让你限定他们到一个单独的React树里.
+
+不要用context在组件里传递你的模型数据.通过树显示的传递你的数据更容易理解.使用context使你的组件更耦合和不可复用,因为  依赖于他们在哪里渲染,他们会表现不同的行为.
+
+## 已知的限制
+
+如果一个由组件提供的context值变动,使用那个值的子级不会更新,如果一个直接的父级从 `shouldComponentUpdate` 返回 `false` .详见 issue [#2517](https://github.com/facebook/react/issues/2517) . 

docs/docs/conferences.zh-CN.md

@@ -0,0 +1,29 @@
+---
+id: conferences-zh-CN
+title: 会议
+permalink: conferences-zh-CN.html
+prev: thinking-in-react-zh-CN.html
+next: videos-zh-CN.html
+---
+
+### React.js Conf 2015
+一月 28 & 29
+
+[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
+
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
+
+### ReactEurope 2015
+七月 2 & 3
+
+[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule)
+
+### Reactive 2015
+十一月 2-4
+
+[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule)
+
+### ReactEurope 2016
+六月 2 & 3
+
+[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule)