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