@@ -14,7 +14,7 @@ class Greeting extends React.Component {
14
14
}
15
15
```
16
16
17
- 如果你不打算使用 ES6,你也可以使用 ` create-react-class ` 模块来创建 :
17
+ 如果你还未使用过 ES6,你可以使用 ` create-react-class ` 模块 :
18
18
19
19
20
20
``` javascript
@@ -59,7 +59,7 @@ var Greeting = createReactClass({
59
59
60
60
## 设置初始状态 {#setting-the-initial-state}
61
61
62
- 如果使用 ES6 的 class 关键字创建组件,你可以通过给 ` this.state ` 赋值的方式来定义组件的初始状态 :
62
+ 如果使用 ES6 的 class 关键字创建组件,你可以通过给 ` this.state ` 赋值的方式来定义组件的初始 state :
63
63
64
64
``` javascript
65
65
class Counter extends React .Component {
@@ -71,7 +71,7 @@ class Counter extends React.Component {
71
71
}
72
72
```
73
73
74
- 如果使用 ` createReactClass ` 方法创建组件,你就需要多写一个 ` getInitialState ` 方法,并让这个方法返回你要定义的初始属性 :
74
+ 如果使用 ` createReactClass ` 方法创建组件,你需要提供一个单独的 ` getInitialState ` 方法,让其返回初始 state :
75
75
76
76
``` javascript
77
77
var Counter = createReactClass ({
@@ -84,7 +84,7 @@ var Counter = createReactClass({
84
84
85
85
## 自动绑定 {#autobinding}
86
86
87
- 对于使用 ES6 的 class 关键字创建的 React 组件,组件中的方法遵循与常规 ES6 class 相同的语法规则。这意味着这些方法不会自动绑定 ` this ` 到这个组件实例。 你需要在 constructor 中为方法手动添加 ` .bind(this) ` :
87
+ 对于使用 ES6 的 class 关键字创建的 React 组件,组件中的方法遵循与常规 ES6 class 相同的语法规则。这意味着这些方法不会自动绑定 ` this ` 到这个组件实例。 你需要在 constructor 中显式地调用 ` .bind(this) ` :
88
88
89
89
``` javascript
90
90
class SayHello extends React .Component {
@@ -134,7 +134,7 @@ var SayHello = createReactClass({
134
134
135
135
这就意味着,如果使用 ES6 class 关键字创建组件,那在处理事件回调的时候就要多写一点点代码。但对于大型项目来说,这样做可以提升运行效率。
136
136
137
- 如果你觉得上面这个写法很麻烦,那么可以尝试一下 ** 目前还处于实验性阶段 ** 的 Babel 插件 [ Class Properties] ( https://babeljs.io/docs/plugins/transform-class-properties/ ) 。
137
+ 如果你觉得上面这个写法很麻烦,那么可以尝试一下 ** 目前还处于试验性阶段 ** 的 Babel 插件 [ Class Properties] ( https://babeljs.io/docs/plugins/transform-class-properties/ ) 。
138
138
139
139
140
140
``` javascript
@@ -143,7 +143,7 @@ class SayHello extends React.Component {
143
143
super (props);
144
144
this .state = {message: ' Hello!' };
145
145
}
146
- // 警告:这种语法还处于实验性阶段 !
146
+ // 警告:这种语法还处于试验性阶段 !
147
147
// 在这里使用箭头函数就可以把方法绑定给实例:
148
148
handleClick = () => {
149
149
alert (this .state .message );
@@ -159,7 +159,7 @@ class SayHello extends React.Component {
159
159
}
160
160
```
161
161
162
- 请注意,上面这种语法 ** 目前还处于实验性阶段 ** ,这意味着语法随时都可能改变,也存在最终没有被官方批准的可能 。
162
+ 请注意,上面这种语法** 目前还处于试验性阶段 ** ,这意味着语法随时都可能改变,也存在最终不被列入框架标准的可能 。
163
163
164
164
为了保险起见,以下三种做法都是可以的:
165
165
@@ -171,15 +171,15 @@ class SayHello extends React.Component {
171
171
172
172
> ** 注:**
173
173
>
174
- > ES6 本身是不包含 mixin 支持的 。因此,如果你使用 ES6 class 关键字创建组件,那就不能使用 mixin 功能了 。
174
+ > ES6 本身是不包含任何 mixin 支持 。因此,当你在 React 中使用 ES6 class 时,将不支持 mixins 。
175
175
>
176
- > ** 我们也发现了很多使用混入然后出现了问题的代码库 。[ 因此,我们并不推荐在 ES6 中使用 mixin ] ( /blog/2016/07/13/mixins-considered-harmful.html ) 。**
176
+ > ** 我们也发现了很多使用 mixin 然后出现了问题的代码库 。[ 因此,我们并不推荐在 ES6 中使用 mixin ] ( /blog/2016/07/13/mixins-considered-harmful.html ) 。**
177
177
>
178
178
> 以下内容仅作为参考。
179
179
180
- 如果完全不同的组件有相似的功能,这就会产生 [ "横切关注点" 问题] ( https://en.wikipedia.org/wiki/Cross-cutting_concern ) 。针对这个问题,在使用 createReactClass 创建 React 组件的时候,引入 ` mixin ` 功能会是一个很好的解决方案。
180
+ 如果完全不同的组件有相似的功能,这就会产生[ "横切关注点" 问题] ( https://en.wikipedia.org/wiki/Cross-cutting_concern ) 。针对这个问题,在使用 createReactClass 创建 React 组件的时候,引入 ` mixin ` 功能会是一个很好的解决方案。
181
181
182
- 一个常见的使用情景是,当一个组件想要每隔一段时间更新,那么最简单的方法就是使用 ` setInterval() ` 。 但更重要的是,如果后续代码中不需要这个功能 ,为了节省内存,你应该把它删除。React 提供了 [ 生命周期方法] ( /docs/working-with-the-browser.html#component-lifecycle ) ,这样你就可以知道某一个组件什么时候要被创建或被销毁。我们先来创建一个使用 ` setInterval() ` 的 mixin,它会在组件销毁的时候也销毁 。
182
+ 一个常见的使用情景是,一个组件每隔一段时间需要更新。使用 ` setInterval() ` 可以很容易实现这个功能, 但更重要的是,当你不再需要它时 ,为了节省内存,你应该把它删除。React 提供了[ 生命周期方法] ( /docs/working-with-the-browser.html#component-lifecycle ) ,这样你就可以知道一个组件何时被创建或被销毁了。让我们创建一个简单的 mixin,它使用这些方法提供一个简单的 ` setInterval() ` 函数,它会在组件被销毁时被自动清理 。
183
183
184
184
``` javascript
185
185
var SetIntervalMixin = {
0 commit comments