refine the translation of chapter 12-context (#6665)

facebook · May 7, 2016 · 9ddf9e1 · 9ddf9e1
1 parent 96cb8c5
commit 9ddf9e1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/docs/docs/12-context.md b/docs/docs/12-context.md
@@ -179,10 +179,10 @@ var MediaQuery = React.createClass({
     var checkMediaQuery = function(){
       var type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
       if (type !== this.state.type){
-        this.setState({type:type}); 
+        this.setState({type:type});
       }
     };
-    
+
     window.addEventListener('resize', checkMediaQuery);
     checkMediaQuery();
   },

diff --git a/docs/docs/12-context.zh-CN.md b/docs/docs/12-context.zh-CN.md
@@ -5,21 +5,21 @@ permalink: context-zh-CN.html
 prev: advanced-performance-zh-CN.html
 ---
 
-React最大的优势之一是很容易从你的React组件里跟踪数据流动。当你看着一个组件，你可以很容易准确看出哪个props被传入，这让你的APP很容易推断。
+React优势之一是你可以很容易地从React组件里跟踪数据流动。当你查看一个组件时，你可以很容易地判断出传入了哪些props，而这也有利于你的App进行逻辑推断。
 
-偶尔，你想通过组件树传递数据，而不在每一级上手工下传prop，React的 "context" 让你做到这点。
+有时，你想不通过在每一级组件设置prop的方式来向组件树内传递数据。那么，React的"context"特性可以让你做到这点。
 
-＞　注意：
-＞　
-＞　Context是一个先进的实验性特性．这个 API 很可能在未来版本变化.
+> 注意：
 >
-> 大多数应用将不会需要用到 context. 尤其是如果你刚开始用React,你很可能不会想用 context.使用 context 将会使你的代码很难理解因为它让数据流不清晰.它类似于在你的应用里使用全局变量传递state.
+> Context是一个先进的实验性特性，这个API很可能在未来版本变化。
 >
-> **如果你必须使用 context ,保守的使用它**
+> 大多数应用将不会需要用到context。尤其是如果你刚开始用React，你很可能不会想用它。使用context将会使你的代码难以理解，因为它让数据流变得不清晰。它类似于在你的应用里用以传递state的全局变量。
 >
-> 不论你正在创建一个应用或者是库,试着分离你对 context 的使用到一个小区域,并尽可能避免直接使用 context API,以便在API变动时容易升级.
+> **如果你必须使用context，请保守地使用它。**
+>
+> 不论你正在创建一个应用或者是库，试着缩小context的使用范围，并尽可能避免直接使用context相关API，以便在API变动时容易升级。
 
-## 从树里自动传递info
+## 在组件树内自动传递info
 
 假设你有一个这样的结构:
 
@@ -55,7 +55,7 @@ var MessageList = React.createClass({
 });
 ```
 
-在这里例子里,我们手工穿透一个 `color` prop 以便于恰当格式化 `Button` 和 `Message` 组件.主题是一个很好的例子,当你可能想整个子树都可以访问一部分信息时(比如color). 使用 context 我们可以自动传过这个树:
+在这个例子里，我们手工传递一个叫`color`的prop，以便于给`Button`和`Message`组件添加合适的样式。当你想所有子组件可以访问一部分信息时(比如color)，上面的设置主题是一个很好的例子。通过使用context，我们能自动在组件树中传递信息：
 
 ```javascript{2-4,7,18,25-30,33}
 var Button = React.createClass({
@@ -97,13 +97,13 @@ var MessageList = React.createClass({
 });
 ```
 
-通过添加 `childContextTypes` 和 `getChildContext` 到 `MessageList` ( context 提供),React下传信息到子树中的任何组件(在这个例子中, `Button`可以由定义 `contextTypes`来访问它).
+通过添加`childContextTypes`和`getChildContext`到 `MessageList`(context提供者)，React会自动下传信息，并且通过定义`contextTypes`，子树中的任何组件(在这个例子中，子组件是`Button`)可以访问`context`。
 
-如果 `contextTypes` 没有定义,那么 `this.context` 将是一个空对象.
+如果`contextTypes`没有定义，那么`this.context`将是一个空对象。
 
 ## 父子耦合
 
-Context 同样可以使你构建这样的 APT:
+Context同样可以使你构建这样的API:
 
 ```javascript
 <Menu>
@@ -113,19 +113,19 @@ Context 同样可以使你构建这样的 APT:
 </Menu>
 ```
 
-通过在 `Menu` 组件下传相关的信息,每个 `MenuItem` 可以与包含他们的 `Menu` 组件沟通.
+通过在`Menu`组件内下传相关的信息，每个`MenuItem` 可以与包含他们的`Menu`组件沟通。
 
-**在你用这个API构建组件以前,考虑一下是否有清晰的替代方案** 我们 喜欢像这样简单的用数组传递items:
+**在你用这个API构建组件以前，考虑一下是否有清晰的替代方案** 我们喜欢用数组传递items，就像下面这样：
 
 ```javascript
 <Menu items={['aubergine', 'butternut squash', 'clementine']} />
 ```
 
-记住你同样可以在props里传递整个React组件,如果你想.
+记住，如果你愿意，你同样可以在props里传递整个React组件。
 
-## 在生命周期方法里引用 context
+## 在生命周期方法里引用context
 
-如果 `contextTypes` 在一个组件中定义,接下来的生命周期方法会收到一个额外的参数, `context` 对象:
+如果`contextTypes`是定义在一个组件中，接下来的生命周期方法会收到一个额外的参数，`context`对象：
 
 ```javascript
 void componentWillReceiveProps(
@@ -147,7 +147,7 @@ void componentDidUpdate(
 
 ## 在无状态函数组件里引用 context
 
-无状态函数同样能够引用 `context` 如果 `contextTypes` 被定义为函数的属性.下面的代码展示了被写为无状态函数组件的 `Button` 组件.
+如果 `contextTypes` 被定义为函数的属性，无状态函数同样能够引用`context`。下面的代码展示了被写为无状态函数组件的`Button`组件：
 
 ```javascript
 function Button(props, context) {
@@ -160,9 +160,9 @@ function Button(props, context) {
 Button.contextTypes = {color: React.PropTypes.string};
 ```
 
-## Updating context
+## 更新context
 
-当 state 或者 props 变化时 `getChildContext` 函数会被调用。为了更新context里的数据，用 `this.setState` 触发一个本地的state更新。这将会触发一个新的 context 并且子级将收到变化。
+当state或props改变时，会调用`getChildContext`方法。为了能更新context内的数据，需要使用`this.setState`来触发组件state更新。这将会触发一个新的context，并且子组件也能接收变化。
 
 ```javascript
 var MediaQuery = React.createClass({
@@ -179,10 +179,10 @@ var MediaQuery = React.createClass({
     var checkMediaQuery = function(){
       var type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
       if (type !== this.state.type){
-        this.setState({type:type}); 
+        this.setState({type:type});
       }
     };
-    
+
     window.addEventListener('resize', checkMediaQuery);
     checkMediaQuery();
   },
@@ -194,12 +194,12 @@ var MediaQuery = React.createClass({
 
 ## 什么时候不用 context
 
-正像全局变量是在写清晰代码时最好要避免的,你应该在大多数情况下避免使用context. 特别是,在用它来"节省输入"和代替显示传入props时要三思.
+正如在写清晰代码时最好要避免使用全局变量一样，在大多数情况下，你应该避免使用context。特别是，在用它来"节省输入"和代替显式传入props时要三思。
 
-context最好的使用场景是隐式的传入登录的用户,当前的语言,或者主题信息.要不然所有这些可能就是全局变量,但是context让你限定他们到一个单独的React树里.
+隐式传入登录的用户，当前的语言，或者主题信息，是context最好的使用场景。要不然所有这些可能就是全局变量，但是context让你限定他们到一个单独的React树里。
 
-不要用context在组件里传递你的模型数据.通过树显示的传递你的数据更容易理解.使用context使你的组件更耦合和不可复用,因为  依赖于他们在哪里渲染,他们会表现不同的行为.
+在组件里传递你的模型数据时，不要依赖context。在组件树内显式传递数据，会更容易令人理解。之所以使用context会增加组件耦合度以及降低复用性，是因为组件在不同的地方渲染时，他们会表现出不同的行为。
 
 ## 已知的限制
 
-如果一个由组件提供的context值变动,使用那个值的子级不会更新,如果一个直接的父级从 `shouldComponentUpdate` 返回 `false` .详见 issue [#2517](https://github.com/facebook/react/issues/2517) . 
+假设由父组件提供的context值发生变动，但中间父级组件的`shouldComponentUpdate`返回了`false`，那么后代子级不会更新context。详见 issue [#2517](https://github.com/facebook/react/issues/2517) 。