Skip to content

Commit

Permalink
fix: fix review
Browse files Browse the repository at this point in the history
  • Loading branch information
zhaozhiming committed Feb 28, 2019
1 parent 2b8e128 commit c26f400
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions content/docs/react-without-es6.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ ES6 中的 class 与 `createReactClass()` 方法十分相似,但有以下几

## 声明默认属性 {#declaring-default-props}

如果使用函数和 ES6 的 class 关键字创建组件,可以直接把自定义属性对象写到组件的 `defaultProps` 属性中
无论是函数组件还是 class 组件,都拥有 `defaultProps` 属性

```javascript
class Greeting extends React.Component {
Expand All @@ -42,7 +42,7 @@ Greeting.defaultProps = {
};
```

如果使用 `createReactClass()` 方法创建组件,那就需要在参数对象中定义 `getDefaultProps()` 方法,并且在这个方法中返回包含自定义属性的对象
如果使用 `createReactClass()` 方法创建组件,那就需要在组件中定义 `getDefaultProps()` 函数

```javascript
var Greeting = createReactClass({
Expand All @@ -57,7 +57,7 @@ var Greeting = createReactClass({
});
```

## 设置初始状态 {#setting-the-initial-state}
## 初始化 State {#setting-the-initial-state}

如果使用 ES6 的 class 关键字创建组件,你可以通过给 `this.state` 赋值的方式来定义组件的初始 state:

Expand Down Expand Up @@ -173,11 +173,11 @@ class SayHello extends React.Component {
>
>ES6 本身是不包含任何 mixin 支持。因此,当你在 React 中使用 ES6 class 时,将不支持 mixins 。
>
>**我们也发现了很多使用 mixin 然后出现了问题的代码库。[并且不建议在新代码中使用 mixin ](/blog/2016/07/13/mixins-considered-harmful.html)**
>**我们也发现了很多使用 mixins 然后出现了问题的代码库。[并且不建议在新代码中使用它们](/blog/2016/07/13/mixins-considered-harmful.html)**
>
> 以下内容仅作为参考。
如果完全不同的组件有相似的功能,这就会产生["横切关注点" 问题(cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern)。针对这个问题,在使用 createReactClass 创建 React 组件的时候,引入 `mixin` 功能会是一个很好的解决方案。
如果完全不同的组件有相似的功能,这就会产生["横切关注点(cross-cutting concerns)"问题](https://en.wikipedia.org/wiki/Cross-cutting_concern)。针对这个问题,在使用 createReactClass 创建 React 组件的时候,引入 `mixins` 功能会是一个很好的解决方案。

一个常见的使用情景是,一个组件每隔一段时间需要更新。使用 `setInterval()` 可以很容易实现这个功能,但更重要的是,当你不再需要它时,你应该删掉它以节省内存。React 提供了[生命周期方法](/docs/working-with-the-browser.html#component-lifecycle),这样你就可以知道一个组件何时被创建或被销毁了。让我们创建一个简单的 mixin,它使用这些方法提供一个简单的 `setInterval()` 函数,它会在组件被销毁时被自动清理。

Expand Down Expand Up @@ -222,4 +222,4 @@ ReactDOM.render(
);
```

如果一个组件有多个 mixin,且其中几个 mixin 中定义了相同的生命周期方法(比如都会在组件被摧毁的时候执行),那么这些生命周期方法是一定会被调用的。通过 mixin 定义的方法,执行顺序也与定义时的顺序一致,且会在组件上的方法执行之后再执行
如果组件拥有多个 mixins,且这些 mixins 中定义了相同的生命周期方法(例如,当组件被销毁时,几个 mixins 都想要进行一些清理工作),那么这些生命周期方法都会被调用的。使用 mixins 时,mixins 会先按照定义时的顺序执行,最后调用组件上对应的方法

0 comments on commit c26f400

Please sign in to comment.