From 92b2bb8fe23f1a3b38e68ed349c8e52c1c189fb6 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Fri, 1 Feb 2019 22:02:14 +0800
Subject: [PATCH 01/55] basic/state_and_lifeccycle

---
 content/docs/state-and-lifecycle.md | 168 ++++++++++++++--------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index c58efae616..2fac5c1cd0 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -1,6 +1,6 @@
 ---
 id: state-and-lifecycle
-title: State and Lifecycle
+title: State 和生命周期
 permalink: docs/state-and-lifecycle.html
 redirect_from:
   - "docs/interactivity-and-dynamic-uis.html"
@@ -8,9 +8,9 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-This page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](/docs/react-component.html).
+本页面会在一个 React 组件之中介绍一些 state 和生命周期的概念。你可以在这查阅[详细的组件 API 参考文档](/docs/react-component.html)。
 
-Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
+请参考[之前一节](/docs/rendering-elements.html#updating-the-rendered-element)中的 Ticking Clock 的例子。在[元素渲染](/docs/rendering-elements.html#rendering-an-element-into-the-dom)章节中，我们只了解了一种更新 UI 界面的方法。通过调用 `ReactDOM.render()` 来修改我们想要渲染的元素：
 
 ```js{8-11}
 function tick() {
@@ -29,11 +29,11 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
+在本节中，我们将学习如何使真正的重用与封装 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
 
-We can start by encapsulating how the clock looks:
+我们可以从像这样封装 Clock 开始：
 
 ```js{3-6,12}
 function Clock(props) {
@@ -55,11 +55,11 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
+可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 U I应该是 `Clock` 的实现细节。
 
-Ideally we want to write this once and have the `Clock` update itself:
+理想情况下，我们希望像这样来编写 `Clock` 而且它会自己更新自己：
 
 ```js{2}
 ReactDOM.render(
@@ -68,25 +68,25 @@ ReactDOM.render(
 );
 ```
 
-To implement this, we need to add "state" to the `Clock` component.
+我们需要在 `Clock` 组件中添加 "state" 来实现这个功能。
 
-State is similar to props, but it is private and fully controlled by the component.
+State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
 
-We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
+我们[之前提到](/docs/components-and-props.html#functional-and-class-components)过组件如果一个组件用 class 定义时，会有一些额外的特性。 state 是： 仅属于类定义组件的特性。
 
-## Converting a Function to a Class
+## 从函数定义组件转换成类定义组件
 
-You can convert a function component like `Clock` to a class in five steps:
+你可以用以下五个步骤把一个类似于 `Clock` 的函数定义组件转换成一个类定义组件：
 
-1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), with the same name, that extends `React.Component`.
+1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
 
-2. Add a single empty method to it called `render()`.
+2. 添加一个空的 `render()` 方法。
+   
+3. 把函数体移动到 `render()` 方法之中。
 
-3. Move the body of the function into the `render()` method.
+4. 在 `render()` 方法中用 `this.props` 替换 `props`。
 
-4. Replace `props` with `this.props` in the `render()` body.
-
-5. Delete the remaining empty function declaration.
+5. 删除剩下声明的空函数。
 
 ```js
 class Clock extends React.Component {
@@ -101,17 +101,17 @@ class Clock extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-`Clock` is now defined as a class rather than a function.
+`Clock` 现在定义为一个 class，而不是一个函数。
 
-The `render` method will be called each time an update happens, but as long as we render `<Clock />` into the same DOM node, only a single instance of the `Clock` class will be used. This lets us use additional features such as local state and lifecycle methods.
+`render` 方法会在每次组件更新时被调用。然而只要在相同的 DOM 节点中渲染 `<Clock />` ，就会只有一个 `clock` class 的实例被调用。这就让我们可以使用一些比如 state 或是生命周期方法的一些额外特性。
 
-## Adding Local State to a Class
+## 向类型定义组件中添加局部的 state
 
-We will move the `date` from props to state in three steps:
+我们用以下三个步骤把 `date` 从 props 移动到 state ：
 
-1) Replace `this.props.date` with `this.state.date` in the `render()` method:
+1) 把 `render()` 方法中的 `this.props.date` 替换成 `this.state.date` ：
 
 ```js{6}
 class Clock extends React.Component {
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`:
+2) 添加一个[class 构造函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在其中为 `this.state` 赋初值：
 
 ```js{4}
 class Clock extends React.Component {
@@ -146,7 +146,7 @@ class Clock extends React.Component {
 }
 ```
 
-Note how we pass `props` to the base constructor:
+注意看我们是如何把 `props` 传递到基类的构造函数中的：
 
 ```js{2}
   constructor(props) {
@@ -155,9 +155,9 @@ Note how we pass `props` to the base constructor:
   }
 ```
 
-Class components should always call the base constructor with `props`.
+类定义组件应该始终用 `props` 参数来调用基类的构造函数。
 
-3) Remove the `date` prop from the `<Clock />` element:
+3) 删除 `<Clock />` 元素中的 `date` 属性。
 
 ```js{2}
 ReactDOM.render(
@@ -166,9 +166,9 @@ ReactDOM.render(
 );
 ```
 
-We will later add the timer code back to the component itself.
+我们之后会把计时器相关的代码添加回组件本身。
 
-The result looks like this:
+结果看上去是这样的：
 
 ```js{2-5,11,18}
 class Clock extends React.Component {
@@ -193,19 +193,19 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Next, we'll make the `Clock` set up its own timer and update itself every second.
+接下来，我们会让 `Clock` 设置自己的计时器并每秒更新一次。
 
-## Adding Lifecycle Methods to a Class
+## 将生命周期方法添加到 Class 中
 
-In applications with many components, it's very important to free up resources taken by the components when they are destroyed.
+在具有许多组件的应用程序中，当组件被卸载时释放所占用的资源是非常重要的。
 
-We want to [set up a timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) whenever the `Clock` is rendered to the DOM for the first time. This is called "mounting" in React.
+我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为 "挂载" 。
 
-We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) whenever the DOM produced by the `Clock` is removed. This is called "unmounting" in React.
+同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为 "卸载" 。
 
-We can declare special methods on the component class to run some code when a component mounts and unmounts:
+我们可以在类定义组件中声明一些特殊的方法，每当一个组件挂载或卸载时就会去执行这些方法：
 
 ```js{7-9,11-13}
 class Clock extends React.Component {
@@ -233,9 +233,9 @@ class Clock extends React.Component {
 }
 ```
 
-These methods are called "lifecycle methods".
+这些方法叫做“生命周期方法”。
 
-The `componentDidMount()` method runs after the component output has been rendered to the DOM. This is a good place to set up a timer:
+`componentDidMount()` 方法会在组件已经被渲染到 DOM 中后运行。这是一个不错的地方来设置我们的计时器：
 
 ```js{2-5}
   componentDidMount() {
@@ -246,11 +246,11 @@ The `componentDidMount()` method runs after the component output has been render
   }
 ```
 
-Note how we save the timer ID right on `this`.
+注意看我们是如何把计时器的 ID 保存在 `this` 之中的。
 
-While `this.props` is set up by React itself and `this.state` has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).
+尽管 `this.props` 是 React 本身设置的， `this.state` 拥有一个特殊的含义，但是你可以向 class 中随意添加不参与数据流（比如计时器 ID）的额外字段。
 
-We will tear down the timer in the `componentWillUnmount()` lifecycle method:
+我们会在 `componentWillUnmount()` 生命周期方法中清除计时器：
 
 ```js{2}
   componentWillUnmount() {
@@ -258,9 +258,9 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle method:
   }
 ```
 
-Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
+最后，我们会实现一个叫 `tick()`　的方法， `Clock` 组件每秒都会调用它。
 
-It will use `this.setState()` to schedule updates to the component local state:
+它会用 `this.setState()`  来安排组件 state 的更新：
 
 ```js{18-22}
 class Clock extends React.Component {
@@ -302,51 +302,51 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
-Now the clock ticks every second.
+现在时钟每秒都会刷新。
 
-Let's quickly recap what's going on and the order in which the methods are called:
+让我们来快速概括一下发生了什么和这些方法的调用顺序：
 
-1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
+1) 当 `<Clock />` 被传给 `ReactDOM.render()`的时候，React 会调用 `Clock` 组件的构造函数。 因为 `Clock` 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 `this.state`。我们会在之后更新 state。
 
-2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
+2) 之后 React 会调用组件的 `render()` 方法。这就是　React 确定该在页面上展示什么的方式。然后　React 更新 DOM 来匹配 `Clock` 渲染的输出。
 
-3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle method. Inside it, the `Clock` component asks the browser to set up a timer to call the component's `tick()` method once a second.
+3) 当 `Clock` 的输出被插入到 DOM 中后， React 就会调用 `ComponentDidMount()` 生命周期方法。在这个方法中，`Clock` 组件向浏览器请求设置一个计时器来每秒调用一次组件的 `tick()` 方法。
 
-4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls the `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
+4) 浏览器每秒都会调用一次 `tick()` 方法。 在这方法之中，`Clock` 组件会通过调用 `setState()` 来计划进行一次 UI 更新。得益于 `setState()` 的调用，React 能够知道 state 已经改变了，然后会重新调用 `render()` 方法来确定页面上该显示什么。这一次，`render()` 方法中的 `this.state.data` 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
 
-5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle method so the timer is stopped.
+5) 一旦 `Clock` 组件从 DOM 中被移除，React 就会调用 `componentWillUnmount()` 生命周期方法，这样计时器就停止了。
 
-## Using State Correctly
+## 正确地使用 State
 
-There are three things you should know about `setState()`.
+关于 `setState()` 你应该了解三件事：
 
-### Do Not Modify State Directly
+### 不要直接修改 State
 
-For example, this will not re-render a component:
+例如，此代码不会重新渲染组件：
 
 ```js
 // Wrong
 this.state.comment = 'Hello';
 ```
 
-Instead, use `setState()`:
+而是应该使用 `setState()`:
 
 ```js
 // Correct
 this.setState({comment: 'Hello'});
 ```
 
-The only place where you can assign `this.state` is the constructor.
+构造函数是唯一可以给 `this.state` 赋值的地方：
 
-### State Updates May Be Asynchronous
+### State 的更新可能是异步的
 
-React may batch multiple `setState()` calls into a single update for performance.
+出于性能考虑，React 可能会把多个 `setState()` 调用合并成一个调用。
 
-Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.
+因为 `this.props` 和 `this.state` 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
 
-For example, this code may fail to update the counter:
+例如，此代码可能会无法更新计数器：
 
 ```js
 // Wrong
@@ -355,7 +355,7 @@ this.setState({
 });
 ```
 
-To fix it, use a second form of `setState()` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
+要解决这个问题，可以让 `setState()` 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：
 
 ```js
 // Correct
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
+我们上面用到了一个[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，但是用普通的函数也是可以运行的：
 
 ```js
 // Correct
@@ -375,11 +375,11 @@ this.setState(function(state, props) {
 });
 ```
 
-### State Updates are Merged
+### State 的更新会被合并
 
-When you call `setState()`, React merges the object you provide into the current state.
+当你调用 `setState()` 的时候，React 会把你提供的对象合并到当前的 state。
 
-For example, your state may contain several independent variables:
+例如，你的 state 包含几个独立的变量：
 
 ```js{4,5}
   constructor(props) {
@@ -391,7 +391,7 @@ For example, your state may contain several independent variables:
   }
 ```
 
-Then you can update them independently with separate `setState()` calls:
+然后你可以分开调用 `setState()` 来单独地更新它们：
 
 ```js{4,10}
   componentDidMount() {
@@ -409,27 +409,27 @@ Then you can update them independently with separate `setState()` calls:
   }
 ```
 
-The merging is shallow, so `this.setState({comments})` leaves `this.state.posts` intact, but completely replaces `this.state.comments`.
+这里的合并是浅合并，所以 `this.setState({coments})` 完整保留了 `this.state.posts`， 但是完全替换了 `this.state.comments`。
 
-## The Data Flows Down
+## 数据是朝下方单向流动的
 
-Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
+不管是父组件或是子组件都无法知道一个确切的组件是有状态的还是无状态的，而且它们也不应该关心它是以函数定义的还是以类定义的。
 
-This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
+这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。
 
-A component may choose to pass its state down as props to its child components:
+一个组件可以选择把他的 state 作为 props 向下传递到它的子组件：
 
 ```js
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
-This also works for user-defined components:
+这对于用户定义的组件同样适用：
 
 ```js
 <FormattedDate date={this.state.date} />
 ```
 
-The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
+`FormattedDate` 组件会在他的 props 中接收 `date` 参数，但是却无法知道它是来自于 `Clock` 的 state，或是 `Clock` 的 props，又或者是手动输入的：
 
 ```js
 function FormattedDate(props) {
@@ -437,13 +437,13 @@ function FormattedDate(props) {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
-This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
+这通常会被叫做“自顶向下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
 
-If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
+如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
 
-To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
+为了展示所有的组件都是真正独立的，我们可以创建一个渲染三个 `Clock` 的 `App` 组件：
 
 ```js{4-6}
 function App() {
@@ -462,8 +462,8 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
-Each `Clock` sets up its own timer and updates independently.
+每个 `Clock` 会单独的设置它自己的计时器并且更新它。
 
-In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.
+在 React 应用中，一个组件是有状态的还是无状态的是会随着时间变化。你可以在有状态的组件中使用无状态的组件，反之亦然。

From a81a3e7f6a4300b34fd3a618bc5a312b83bcc800 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Sat, 2 Feb 2019 10:13:10 +0800
Subject: [PATCH 02/55] merge some suggestions

---
 content/docs/state-and-lifecycle.md | 40 ++++++++++++++---------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 2fac5c1cd0..4dde34b5e0 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -8,7 +8,7 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-本页面会在一个 React 组件之中介绍一些 state 和生命周期的概念。你可以在这查阅[详细的组件 API 参考文档](/docs/react-component.html)。
+本页面会介绍一个 React 组件中 state 和生命周期的概念。你可以在这查阅[详细的组件 API 参考文档](/docs/react-component.html)。
 
 请参考[之前一节](/docs/rendering-elements.html#updating-the-rendered-element)中的 Ticking Clock 的例子。在[元素渲染](/docs/rendering-elements.html#rendering-an-element-into-the-dom)章节中，我们只了解了一种更新 UI 界面的方法。通过调用 `ReactDOM.render()` 来修改我们想要渲染的元素：
 
@@ -31,9 +31,9 @@ setInterval(tick, 1000);
 
 [**在 CodePen 中试试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-在本节中，我们将学习如何使真正的重用与封装 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
+在本节中，我们将学习如何使真正的复用与封装 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
 
-我们可以从像这样封装 Clock 开始：
+我们可以从像这样封装 Clock 的外观显示开始：
 
 ```js{3-6,12}
 function Clock(props) {
@@ -57,9 +57,9 @@ setInterval(tick, 1000);
 
 [**在 CodePen 中试试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 U I应该是 `Clock` 的实现细节。
+可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 UI 应该是 `Clock` 的实现细节。
 
-理想情况下，我们希望像这样来编写 `Clock` 而且它会自己更新自己：
+理想情况下，我们希望像这样只写一次，然后让`Clock` 会自己更新自己：
 
 ```js{2}
 ReactDOM.render(
@@ -86,7 +86,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 4. 在 `render()` 方法中用 `this.props` 替换 `props`。
 
-5. 删除剩下声明的空函数。
+5. 删除剩下的空函数声明。
 
 ```js
 class Clock extends React.Component {
@@ -103,9 +103,9 @@ class Clock extends React.Component {
 
 [**在 CodePen 中试试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-`Clock` 现在定义为一个 class，而不是一个函数。
+`Clock` 现在被定义为一个 class，而不是一个函数。
 
-`render` 方法会在每次组件更新时被调用。然而只要在相同的 DOM 节点中渲染 `<Clock />` ，就会只有一个 `clock` class 的实例被调用。这就让我们可以使用一些比如 state 或是生命周期方法的一些额外特性。
+`render` 方法会在每次组件更新时被调用。然而只要在相同的 DOM 节点中渲染 `<Clock />` ，就会只有一个 `Clock` class 的实例被调用。这就让我们可以使用一些比如 state 或是生命周期方法的一些额外特性。
 
 ## 向类型定义组件中添加局部的 state
 
@@ -146,7 +146,7 @@ class Clock extends React.Component {
 }
 ```
 
-注意看我们是如何把 `props` 传递到基类的构造函数中的：
+注意看我们是如何把 `props` 传递到父类的构造函数中的：
 
 ```js{2}
   constructor(props) {
@@ -155,9 +155,9 @@ class Clock extends React.Component {
   }
 ```
 
-类定义组件应该始终用 `props` 参数来调用基类的构造函数。
+类定义组件应该始终用 `props` 参数来调用父类的构造函数。
 
-3) 删除 `<Clock />` 元素中的 `date` 属性。
+1) 删除 `<Clock />` 元素中的 `date` 属性。
 
 ```js{2}
 ReactDOM.render(
@@ -199,11 +199,11 @@ ReactDOM.render(
 
 ## 将生命周期方法添加到 Class 中
 
-在具有许多组件的应用程序中，当组件被卸载时释放所占用的资源是非常重要的。
+在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。
 
-我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为 "挂载" 。
+我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为 "挂载(mount)" 。
 
-同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为 "卸载" 。
+同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
 
 我们可以在类定义组件中声明一些特殊的方法，每当一个组件挂载或卸载时就会去执行这些方法：
 
@@ -235,7 +235,7 @@ class Clock extends React.Component {
 
 这些方法叫做“生命周期方法”。
 
-`componentDidMount()` 方法会在组件已经被渲染到 DOM 中后运行。这是一个不错的地方来设置我们的计时器：
+`componentDidMount()` 方法会在组件已经被渲染到 DOM 中后运行，所以，最好在这里设置计时器：
 
 ```js{2-5}
   componentDidMount() {
@@ -260,7 +260,7 @@ class Clock extends React.Component {
 
 最后，我们会实现一个叫 `tick()`　的方法， `Clock` 组件每秒都会调用它。
 
-它会用 `this.setState()`  来安排组件 state 的更新：
+它会用 `this.setState()`  来调度组件 state 的更新：
 
 ```js{18-22}
 class Clock extends React.Component {
@@ -314,7 +314,7 @@ ReactDOM.render(
 
 3) 当 `Clock` 的输出被插入到 DOM 中后， React 就会调用 `ComponentDidMount()` 生命周期方法。在这个方法中，`Clock` 组件向浏览器请求设置一个计时器来每秒调用一次组件的 `tick()` 方法。
 
-4) 浏览器每秒都会调用一次 `tick()` 方法。 在这方法之中，`Clock` 组件会通过调用 `setState()` 来计划进行一次 UI 更新。得益于 `setState()` 的调用，React 能够知道 state 已经改变了，然后会重新调用 `render()` 方法来确定页面上该显示什么。这一次，`render()` 方法中的 `this.state.data` 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
+4) 浏览器每秒都会调用一次 `tick()` 方法。 在这方法之中，`Clock` 组件会通过调用 `setState()` 来计划进行一次 UI 更新。得益于 `setState()` 的调用，React 能够知道 state 已经改变了，然后会重新调用 `render()` 方法来确定页面上该显示什么。这一次，`render()` 方法中的 `this.state.date` 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
 
 5) 一旦 `Clock` 组件从 DOM 中被移除，React 就会调用 `componentWillUnmount()` 生命周期方法，这样计时器就停止了。
 
@@ -411,9 +411,9 @@ this.setState(function(state, props) {
 
 这里的合并是浅合并，所以 `this.setState({coments})` 完整保留了 `this.state.posts`， 但是完全替换了 `this.state.comments`。
 
-## 数据是朝下方单向流动的
+## 数据是向下流动的
 
-不管是父组件或是子组件都无法知道一个确切的组件是有状态的还是无状态的，而且它们也不应该关心它是以函数定义的还是以类定义的。
+不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，而且它们也不应该关心它是以函数定义的还是以类定义的。
 
 这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。
 
@@ -466,4 +466,4 @@ ReactDOM.render(
 
 每个 `Clock` 会单独的设置它自己的计时器并且更新它。
 
-在 React 应用中，一个组件是有状态的还是无状态的是会随着时间变化。你可以在有状态的组件中使用无状态的组件，反之亦然。
+在 React 应用中，，一个组件是有状态的还是无状态的属于组件实现的细节，他会随着时间变化。你可以在有状态的组件中使用无状态的组件，反之亦然。

From b48503cc5e2e9fa8d67405cab0673fceca1453c3 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Sat, 2 Feb 2019 10:18:43 +0800
Subject: [PATCH 03/55] list order number fixed

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 4dde34b5e0..6c74a05809 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -157,7 +157,7 @@ class Clock extends React.Component {
 
 类定义组件应该始终用 `props` 参数来调用父类的构造函数。
 
-1) 删除 `<Clock />` 元素中的 `date` 属性。
+3) 删除 `<Clock />` 元素中的 `date` 属性。
 
 ```js{2}
 ReactDOM.render(

From 954801b1b59484b68bb0081c24bd57fbbf5ed826 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Sun, 3 Feb 2019 10:21:53 +0800
Subject: [PATCH 04/55] update external linking to official CDhinese pages

---
 content/docs/state-and-lifecycle.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 6c74a05809..f0a0b4ce4b 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -78,7 +78,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 你可以用以下五个步骤把一个类似于 `Clock` 的函数定义组件转换成一个类定义组件：
 
-1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
+1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
 
 2. 添加一个空的 `render()` 方法。
    
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) 添加一个[class 构造函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在其中为 `this.state` 赋初值：
+2) 添加一个[class 构造函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在其中为 `this.state` 赋初值：
 
 ```js{4}
 class Clock extends React.Component {
@@ -201,9 +201,9 @@ ReactDOM.render(
 
 在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。
 
-我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为 "挂载(mount)" 。
+我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval)。这在 React 中被称为 "挂载(mount)" 。
 
-同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
+同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
 
 我们可以在类定义组件中声明一些特殊的方法，每当一个组件挂载或卸载时就会去执行这些方法：
 
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-我们上面用到了一个[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，但是用普通的函数也是可以运行的：
+我们上面用到了一个[箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，但是用普通的函数也是可以运行的：
 
 ```js
 // Correct

From 6123064ed696335d557429ee7a3efc7e420c23ad Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Sun, 3 Feb 2019 10:21:53 +0800
Subject: [PATCH 05/55] update external links to official Chinese pages

---
 content/docs/state-and-lifecycle.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 6c74a05809..f0a0b4ce4b 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -78,7 +78,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 你可以用以下五个步骤把一个类似于 `Clock` 的函数定义组件转换成一个类定义组件：
 
-1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
+1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
 
 2. 添加一个空的 `render()` 方法。
    
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) 添加一个[class 构造函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在其中为 `this.state` 赋初值：
+2) 添加一个[class 构造函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在其中为 `this.state` 赋初值：
 
 ```js{4}
 class Clock extends React.Component {
@@ -201,9 +201,9 @@ ReactDOM.render(
 
 在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。
 
-我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为 "挂载(mount)" 。
+我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval)。这在 React 中被称为 "挂载(mount)" 。
 
-同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
+同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
 
 我们可以在类定义组件中声明一些特殊的方法，每当一个组件挂载或卸载时就会去执行这些方法：
 
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-我们上面用到了一个[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，但是用普通的函数也是可以运行的：
+我们上面用到了一个[箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，但是用普通的函数也是可以运行的：
 
 ```js
 // Correct

From 919f0332f6e6abfe8b7fd85e49b7e3bd53923203 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Wed, 13 Feb 2019 17:32:52 +0800
Subject: [PATCH 06/55] update  `CodePen`

Consistent with mainstream.
---
 content/docs/state-and-lifecycle.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index f0a0b4ce4b..a122ea82aa 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -29,7 +29,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
 在本节中，我们将学习如何使真正的复用与封装 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
 
@@ -55,7 +55,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**在 CodePen 中尝试*](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
 可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 UI 应该是 `Clock` 的实现细节。
 
@@ -101,7 +101,7 @@ class Clock extends React.Component {
 }
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
 `Clock` 现在被定义为一个 class，而不是一个函数。
 
@@ -193,7 +193,7 @@ ReactDOM.render(
 );
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
 接下来，我们会让 `Clock` 设置自己的计时器并每秒更新一次。
 
@@ -302,7 +302,7 @@ ReactDOM.render(
 );
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
 现在时钟每秒都会刷新。
 
@@ -437,7 +437,7 @@ function FormattedDate(props) {
 }
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
 这通常会被叫做“自顶向下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
 
@@ -462,7 +462,7 @@ ReactDOM.render(
 );
 ```
 
-[**在 CodePen 中试试**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
 每个 `Clock` 会单独的设置它自己的计时器并且更新它。
 

From a903234286599c1aff192bbdee4ed92662f9d8c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=A1=E9=91=AB-King?= <45808948@qq.com>
Date: Sun, 17 Feb 2019 16:59:08 +0800
Subject: [PATCH 07/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index a122ea82aa..3ef1b26576 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -55,7 +55,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**在 CodePen 中尝试*](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
 可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 UI 应该是 `Clock` 的实现细节。
 

From 03a20397a7e32d539473a490974be22dba383316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=A1=E9=91=AB-King?= <45808948@qq.com>
Date: Sun, 17 Feb 2019 16:59:30 +0800
Subject: [PATCH 08/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 3ef1b26576..3cc86f31bf 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -59,7 +59,7 @@ setInterval(tick, 1000);
 
 可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 UI 应该是 `Clock` 的实现细节。
 
-理想情况下，我们希望像这样只写一次，然后让`Clock` 会自己更新自己：
+理想情况下，我们希望像这样只写一次，然后让 `Clock` 会自己更新自己：
 
 ```js{2}
 ReactDOM.render(

From 487ebf7503967823fdf52c741798758d08a575a9 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:58:10 +0800
Subject: [PATCH 09/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 3cc86f31bf..fb402a663d 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -1,6 +1,6 @@
 ---
 id: state-and-lifecycle
-title: State 和生命周期
+title: State & 生命周期
 permalink: docs/state-and-lifecycle.html
 redirect_from:
   - "docs/interactivity-and-dynamic-uis.html"

From e37130787a8faa408f877fe13d8fbdb2cf3269cc Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:58:36 +0800
Subject: [PATCH 10/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index fb402a663d..6465502554 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -10,7 +10,7 @@ next: handling-events.html
 
 本页面会介绍一个 React 组件中 state 和生命周期的概念。你可以在这查阅[详细的组件 API 参考文档](/docs/react-component.html)。
 
-请参考[之前一节](/docs/rendering-elements.html#updating-the-rendered-element)中的 Ticking Clock 的例子。在[元素渲染](/docs/rendering-elements.html#rendering-an-element-into-the-dom)章节中，我们只了解了一种更新 UI 界面的方法。通过调用 `ReactDOM.render()` 来修改我们想要渲染的元素：
+请参考[前一章节](/docs/rendering-elements.html#updating-the-rendered-element)中时钟的例子。在[元素渲染](/docs/rendering-elements.html#rendering-an-element-into-the-dom)章节中，我们只了解了一种更新 UI 界面的方法。通过调用 `ReactDOM.render()` 来修改我们想要渲染的元素：
 
 ```js{8-11}
 function tick() {

From bae86eefb01520ade769c228acd17e7985387a9f Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:59:54 +0800
Subject: [PATCH 11/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 6465502554..998cb285e3 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -31,7 +31,7 @@ setInterval(tick, 1000);
 
 [**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-在本节中，我们将学习如何使真正的复用与封装 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
+在本章节中，我们将学习如何封装真正可复用的 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
 
 我们可以从像这样封装 Clock 的外观显示开始：
 

From 86a7d74a22366dbd2f594f9c3ef325a66a285da8 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:59:00 +0800
Subject: [PATCH 12/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 998cb285e3..94a0bc9ebd 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -33,7 +33,7 @@ setInterval(tick, 1000);
 
 在本章节中，我们将学习如何封装真正可复用的 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
 
-我们可以从像这样封装 Clock 的外观显示开始：
+我们可以从封装时钟的外观开始：
 
 ```js{3-6,12}
 function Clock(props) {

From 947fe04173f947fbd6138cec99b936ec0d78c45d Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:59:18 +0800
Subject: [PATCH 13/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 94a0bc9ebd..12d3ca013a 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -55,7 +55,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
 可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 UI 应该是 `Clock` 的实现细节。
 

From c1c1589d66bf04440616f692bca4e37bbde9ee3e Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:59:41 +0800
Subject: [PATCH 14/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 12d3ca013a..5904f1f475 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -423,7 +423,7 @@ this.setState(function(state, props) {
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
-这对于用户定义的组件同样适用：
+这对于自定义组件同样适用：
 
 ```js
 <FormattedDate date={this.state.date} />

From e8641d0799ebc3b8c689288f3e83e0168346cd46 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 08:59:54 +0800
Subject: [PATCH 15/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 5904f1f475..59c1290515 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -417,7 +417,7 @@ this.setState(function(state, props) {
 
 这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。
 
-一个组件可以选择把他的 state 作为 props 向下传递到它的子组件：
+组件可以选择把它的 state 作为 props 向下传递到它的子组件中：
 
 ```js
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>

From 580e743de83e473d4a67526b161126cd00120e5f Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:00:10 +0800
Subject: [PATCH 16/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 59c1290515..20a769da1c 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -413,7 +413,7 @@ this.setState(function(state, props) {
 
 ## 数据是向下流动的
 
-不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，而且它们也不应该关心它是以函数定义的还是以类定义的。
+不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。
 
 这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。
 

From 00b238e5d542a2435b4692165fd86acb33ca35f8 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:00:21 +0800
Subject: [PATCH 17/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 20a769da1c..edfc660e80 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -391,7 +391,7 @@ this.setState(function(state, props) {
   }
 ```
 
-然后你可以分开调用 `setState()` 来单独地更新它们：
+然后你可以分别调用 `setState()` 来单独地更新它们：
 
 ```js{4,10}
   componentDidMount() {

From e0615f3f5c75e030f0c54c771676c7c24dc80b85 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:00:39 +0800
Subject: [PATCH 18/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index edfc660e80..036e5a50d6 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-我们上面用到了一个[箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，但是用普通的函数也是可以运行的：
+上面使用了[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_function)，不过使用普通的函数也同样可以：
 
 ```js
 // Correct

From 5ca8a9044cc7e0a1272fd8759a9322c88d14dfcd Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Tue, 26 Feb 2019 09:05:22 +0800
Subject: [PATCH 19/55] Consistent translation on `Try in on CodePen`

---
 content/docs/state-and-lifecycle.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 036e5a50d6..044be627f8 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -29,7 +29,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
 在本章节中，我们将学习如何封装真正可复用的 `Clock` 组件。它将设置自己的计时器并每秒更新一次。
 
@@ -101,7 +101,7 @@ class Clock extends React.Component {
 }
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
 `Clock` 现在被定义为一个 class，而不是一个函数。
 
@@ -193,7 +193,7 @@ ReactDOM.render(
 );
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
 接下来，我们会让 `Clock` 设置自己的计时器并每秒更新一次。
 
@@ -302,7 +302,7 @@ ReactDOM.render(
 );
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
 现在时钟每秒都会刷新。
 
@@ -437,7 +437,7 @@ function FormattedDate(props) {
 }
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
 这通常会被叫做“自顶向下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
 
@@ -462,7 +462,7 @@ ReactDOM.render(
 );
 ```
 
-[**在 CodePen 中尝试**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
 每个 `Clock` 会单独的设置它自己的计时器并且更新它。
 

From 169df871f9594d3f20542ee8c0a633ca1592a172 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:06:51 +0800
Subject: [PATCH 20/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 044be627f8..87988438f2 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -57,7 +57,7 @@ setInterval(tick, 1000);
 
 [**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-可是，这样我们就错过了一个关键要求： `Clock` 设置一个计时器并且每秒更新 UI 应该是 `Clock` 的实现细节。
+然而，它忽略了一个关键的技术细节：`Clock` 组件需要设置一个计时器，并且需要每秒更新 UI。
 
 理想情况下，我们希望像这样只写一次，然后让 `Clock` 会自己更新自己：
 

From 686f54ac8356f79d2471be3014deac1938c7ab69 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:07:32 +0800
Subject: [PATCH 21/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 87988438f2..0d23f71f73 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -59,7 +59,7 @@ setInterval(tick, 1000);
 
 然而，它忽略了一个关键的技术细节：`Clock` 组件需要设置一个计时器，并且需要每秒更新 UI。
 
-理想情况下，我们希望像这样只写一次，然后让 `Clock` 会自己更新自己：
+理想情况下，我们希望只编写一次代码，便可以让 `Clock` 组件自我更新：
 
 ```js{2}
 ReactDOM.render(

From f13936f62d90740b4ab7ceb9f8c80b44a3747edf Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:07:57 +0800
Subject: [PATCH 22/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 0d23f71f73..6b29835a70 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -72,7 +72,7 @@ ReactDOM.render(
 
 State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
 
-我们[之前提到](/docs/components-and-props.html#functional-and-class-components)过组件如果一个组件用 class 定义时，会有一些额外的特性。 state 是： 仅属于类定义组件的特性。
+我们[之前提到](/docs/components-and-props.html#functional-and-class-components)过组件如果一个组件用 class 定义时，会包含一些额外的特性。State 是： 仅属于 class 组件的特性。
 
 ## 从函数定义组件转换成类定义组件
 

From 14556dffdb1e4b2ad96ed9a588a95e6a4604fbf4 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:09:37 +0800
Subject: [PATCH 23/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 6b29835a70..7aa816f55d 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -74,7 +74,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 我们[之前提到](/docs/components-and-props.html#functional-and-class-components)过组件如果一个组件用 class 定义时，会包含一些额外的特性。State 是： 仅属于 class 组件的特性。
 
-## 从函数定义组件转换成类定义组件
+## 将函数组件转换成 class 组件
 
 你可以用以下五个步骤把一个类似于 `Clock` 的函数定义组件转换成一个类定义组件：
 

From c2863378fdcea671da420af5293b992bf96658b2 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:09:50 +0800
Subject: [PATCH 24/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 7aa816f55d..230e017388 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -76,7 +76,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 ## 将函数组件转换成 class 组件
 
-你可以用以下五个步骤把一个类似于 `Clock` 的函数定义组件转换成一个类定义组件：
+通过以下五步将 `Clock` 的函数组件转成 class 组件：
 
 1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
 

From 12b7c0fa0007618a6ef85a53b1937b6dff7b8f40 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:10:11 +0800
Subject: [PATCH 25/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 230e017388..19c4ec5755 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -78,7 +78,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 通过以下五步将 `Clock` 的函数组件转成 class 组件：
 
-1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)，并且继承自 `React.Component`。
+1. 创建一个同名的 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)，并且继承于 `React.Component`。
 
 2. 添加一个空的 `render()` 方法。
    

From afda1ec802fb8d41cb31b8b132d9e0561997d9fc Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:10:32 +0800
Subject: [PATCH 26/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 19c4ec5755..24f17a6d5b 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -82,7 +82,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 2. 添加一个空的 `render()` 方法。
    
-3. 把函数体移动到 `render()` 方法之中。
+3. 将函数体移动到 `render()` 方法之中。
 
 4. 在 `render()` 方法中用 `this.props` 替换 `props`。
 

From cb9f483e1c15e0b819539b5310f55d58496fb61b Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:10:49 +0800
Subject: [PATCH 27/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 24f17a6d5b..8c81907531 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -84,7 +84,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
    
 3. 将函数体移动到 `render()` 方法之中。
 
-4. 在 `render()` 方法中用 `this.props` 替换 `props`。
+4. 在 `render()` 方法中使用 `this.props` 替换 `props`。
 
 5. 删除剩下的空函数声明。
 

From e709d243be283456dcc2a228d08d2cb56d8cb221 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:11:06 +0800
Subject: [PATCH 28/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 8c81907531..e15eadc4b8 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -86,7 +86,7 @@ State 与 props 类似，但是 state 是私有的，并且完全受控于当前
 
 4. 在 `render()` 方法中使用 `this.props` 替换 `props`。
 
-5. 删除剩下的空函数声明。
+5. 删除剩余的空函数声明。
 
 ```js
 class Clock extends React.Component {

From b67b10e075370c084630aa5bc1896fbc6f74e890 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:11:28 +0800
Subject: [PATCH 29/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index e15eadc4b8..e35b689e97 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -103,7 +103,7 @@ class Clock extends React.Component {
 
 [**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-`Clock` 现在被定义为一个 class，而不是一个函数。
+现在 `Clock` 组件被定义为 class，而不是函数。
 
 `render` 方法会在每次组件更新时被调用。然而只要在相同的 DOM 节点中渲染 `<Clock />` ，就会只有一个 `Clock` class 的实例被调用。这就让我们可以使用一些比如 state 或是生命周期方法的一些额外特性。
 

From a2a46800a77da5de6e19ec33c8825e36a62bfbc7 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:11:50 +0800
Subject: [PATCH 30/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index e35b689e97..da13f4d8ce 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -105,7 +105,7 @@ class Clock extends React.Component {
 
 现在 `Clock` 组件被定义为 class，而不是函数。
 
-`render` 方法会在每次组件更新时被调用。然而只要在相同的 DOM 节点中渲染 `<Clock />` ，就会只有一个 `Clock` class 的实例被调用。这就让我们可以使用一些比如 state 或是生命周期方法的一些额外特性。
+每次组件更新时 `render` 方法都会被调用，但只要在相同的 DOM 节点中渲染 `<Clock />` ，就仅有一个 `Clock` 组件的 class 实例被创建使用。这就使得我们可以使用如 state 或生命周期方法等很多其他特性。
 
 ## 向类型定义组件中添加局部的 state
 

From 7e4e99b6169201e9f578fdbff39f2f2d342e09ab Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:12:04 +0800
Subject: [PATCH 31/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index da13f4d8ce..02ddd7aa44 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -107,7 +107,7 @@ class Clock extends React.Component {
 
 每次组件更新时 `render` 方法都会被调用，但只要在相同的 DOM 节点中渲染 `<Clock />` ，就仅有一个 `Clock` 组件的 class 实例被创建使用。这就使得我们可以使用如 state 或生命周期方法等很多其他特性。
 
-## 向类型定义组件中添加局部的 state
+## 向 class 组件中添加局部的 state
 
 我们用以下三个步骤把 `date` 从 props 移动到 state ：
 

From 47c648a538b55675fe50a296e324b5c4558daef5 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:12:20 +0800
Subject: [PATCH 32/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 02ddd7aa44..ad0c2073bf 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -109,7 +109,7 @@ class Clock extends React.Component {
 
 ## 向 class 组件中添加局部的 state
 
-我们用以下三个步骤把 `date` 从 props 移动到 state ：
+我们通过以下三步将 `date` 从 props 移动到 state 中：
 
 1) 把 `render()` 方法中的 `this.props.date` 替换成 `this.state.date` ：
 

From 2a22da1d0d6ac237076825fd94c68a603316989c Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:12:44 +0800
Subject: [PATCH 33/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index ad0c2073bf..1e9a7ec8a4 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -466,4 +466,4 @@ ReactDOM.render(
 
 每个 `Clock` 会单独的设置它自己的计时器并且更新它。
 
-在 React 应用中，，一个组件是有状态的还是无状态的属于组件实现的细节，他会随着时间变化。你可以在有状态的组件中使用无状态的组件，反之亦然。
+在 React 应用中，组件是有状态组件还是无状态组件属于组件实现的细节，它可能会随着时间的推移而改变。你可以在有状态的组件中使用无状态的组件，反之亦然。

From 0c446c4be182b1e197b11a76a17f579ba84c457e Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:13:00 +0800
Subject: [PATCH 34/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 1e9a7ec8a4..65b349e9b2 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -464,6 +464,6 @@ ReactDOM.render(
 
 [**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
-每个 `Clock` 会单独的设置它自己的计时器并且更新它。
+每个 `Clock` 组件都会单独设置它自己的计时器并且更新它。
 
 在 React 应用中，组件是有状态组件还是无状态组件属于组件实现的细节，它可能会随着时间的推移而改变。你可以在有状态的组件中使用无状态的组件，反之亦然。

From d90050b1fdf3e977e72916070e03052d29431fa4 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:13:19 +0800
Subject: [PATCH 35/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 65b349e9b2..19462d5818 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -443,7 +443,7 @@ function FormattedDate(props) {
 
 如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
 
-为了展示所有的组件都是真正独立的，我们可以创建一个渲染三个 `Clock` 的 `App` 组件：
+为了证明每个组件都是真正独立的，我们可以创建一个渲染三个 `Clock` 的 `App` 组件：
 
 ```js{4-6}
 function App() {

From bcde3f5c8a2863be2af649566aaa296355fe973e Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:13:46 +0800
Subject: [PATCH 36/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 19462d5818..225b314304 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) 添加一个[class 构造函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在其中为 `this.state` 赋初值：
+2) 添加一个[class 构造函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在该函数中为 `this.state` 赋初值：
 
 ```js{4}
 class Clock extends React.Component {

From 3f78496aefc47955c61145ef589dde1d5a39d988 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:14:04 +0800
Subject: [PATCH 37/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 225b314304..47d7724f3d 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -146,7 +146,7 @@ class Clock extends React.Component {
 }
 ```
 
-注意看我们是如何把 `props` 传递到父类的构造函数中的：
+通过以下方式将 `props` 传递到父类的构造函数中：
 
 ```js{2}
   constructor(props) {

From 5bc7739f01aefa4908fb6dc95aa2ce8a3d7721bd Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:14:19 +0800
Subject: [PATCH 38/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 47d7724f3d..457f8924ae 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -155,7 +155,7 @@ class Clock extends React.Component {
   }
 ```
 
-类定义组件应该始终用 `props` 参数来调用父类的构造函数。
+Class 组件应该始终使用 `props` 参数来调用父类的构造函数。
 
 3) 删除 `<Clock />` 元素中的 `date` 属性。
 

From 7c611df5f4b89b6725e8043c0036dbe060ac94de Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:14:32 +0800
Subject: [PATCH 39/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 457f8924ae..61675cbc50 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -157,7 +157,7 @@ class Clock extends React.Component {
 
 Class 组件应该始终使用 `props` 参数来调用父类的构造函数。
 
-3) 删除 `<Clock />` 元素中的 `date` 属性。
+3) 移除 `<Clock />` 元素中的 `date` 属性：
 
 ```js{2}
 ReactDOM.render(

From f7af5d5b60f74cedd8a51ce45dacef0bf0ea9f9e Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:14:47 +0800
Subject: [PATCH 40/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 61675cbc50..a73b51de99 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -166,7 +166,7 @@ ReactDOM.render(
 );
 ```
 
-我们之后会把计时器相关的代码添加回组件本身。
+我们之后会将计时器相关的代码添加到组件中。
 
 结果看上去是这样的：
 

From d26602a433e632b786b8e2ddc8550ede4adbbc39 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:15:02 +0800
Subject: [PATCH 41/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index a73b51de99..e7b5859725 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -168,7 +168,7 @@ ReactDOM.render(
 
 我们之后会将计时器相关的代码添加到组件中。
 
-结果看上去是这样的：
+代码如下：
 
 ```js{2-5,11,18}
 class Clock extends React.Component {

From 785fddb07cdff81c762311dfa9746901fd47b601 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:15:17 +0800
Subject: [PATCH 42/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index e7b5859725..b822c5c65b 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -195,7 +195,7 @@ ReactDOM.render(
 
 [**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-接下来，我们会让 `Clock` 设置自己的计时器并每秒更新一次。
+接下来，我们会设置 `Clock` 的计时器并每秒更新它。
 
 ## 将生命周期方法添加到 Class 中
 

From 06646574c5047e5250a884b7e388e46a171e213c Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:15:31 +0800
Subject: [PATCH 43/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index b822c5c65b..990d855cf8 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -201,7 +201,7 @@ ReactDOM.render(
 
 在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。
 
-我们想要在每当 `Clock` 第一次被渲染到 DOM 中的时候，就[设置一个计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval)。这在 React 中被称为 "挂载(mount)" 。
+当 `Clock` 组件第一次被渲染到 DOM 中的时候，就为其[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为“挂载（mount）”。
 
 同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
 

From efddf98506f228c690ba6330ad64a4ad7b479f46 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:15:45 +0800
Subject: [PATCH 44/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 990d855cf8..a315e0dc8e 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -203,7 +203,7 @@ ReactDOM.render(
 
 当 `Clock` 组件第一次被渲染到 DOM 中的时候，就为其[设置一个计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)。这在 React 中被称为“挂载（mount）”。
 
-同时，我们还想在当 DOM 告知我们 `Clock` 被删除的时候[清除计时器](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/clearInterval)。这在 React 中被称为 "卸载(umount)" 。
+同时，当 DOM 中 `Clock` 组件被删除的时候，应该[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为“卸载（umount）”。
 
 我们可以在类定义组件中声明一些特殊的方法，每当一个组件挂载或卸载时就会去执行这些方法：
 

From 170101ec03f66a657f03f31acd2b068fdba0b568 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:15:59 +0800
Subject: [PATCH 45/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index a315e0dc8e..0f4eea094f 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -205,7 +205,7 @@ ReactDOM.render(
 
 同时，当 DOM 中 `Clock` 组件被删除的时候，应该[清除计时器](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval)。这在 React 中被称为“卸载（umount）”。
 
-我们可以在类定义组件中声明一些特殊的方法，每当一个组件挂载或卸载时就会去执行这些方法：
+我们可以为 class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法：
 
 ```js{7-9,11-13}
 class Clock extends React.Component {

From fcfe291ad348e429563d8ec5c60943572fc15a66 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:16:11 +0800
Subject: [PATCH 46/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 0f4eea094f..037923ab5a 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -246,7 +246,7 @@ class Clock extends React.Component {
   }
 ```
 
-注意看我们是如何把计时器的 ID 保存在 `this` 之中的。
+接下来把计时器的 ID 保存在 `this` 之中。
 
 尽管 `this.props` 是 React 本身设置的， `this.state` 拥有一个特殊的含义，但是你可以向 class 中随意添加不参与数据流（比如计时器 ID）的额外字段。
 

From 4432ed7f65b8ab7617b3e2d63fa42cdb1173702f Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:16:36 +0800
Subject: [PATCH 47/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 037923ab5a..3438ae99e5 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -248,7 +248,7 @@ class Clock extends React.Component {
 
 接下来把计时器的 ID 保存在 `this` 之中。
 
-尽管 `this.props` 是 React 本身设置的， `this.state` 拥有一个特殊的含义，但是你可以向 class 中随意添加不参与数据流（比如计时器 ID）的额外字段。
+尽管 `this.props` 和 `this.state` 是 React 本身设置的，且都拥有特殊的含义，但是其实你可以向 class 中随意添加不参与数据流（比如计时器 ID）的额外字段。
 
 我们会在 `componentWillUnmount()` 生命周期方法中清除计时器：
 

From 86938a8a5437e27033461372b9ed60ada72e4efa Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:16:52 +0800
Subject: [PATCH 48/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 3438ae99e5..b052825b39 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -258,7 +258,7 @@ class Clock extends React.Component {
   }
 ```
 
-最后，我们会实现一个叫 `tick()`　的方法， `Clock` 组件每秒都会调用它。
+最后，我们会实现一个叫 `tick()`　的方法，`Clock` 组件每秒都会调用它。
 
 它会用 `this.setState()`  来调度组件 state 的更新：
 

From 81e1e17cc99366939416ea9005fcad6a2395e2b5 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:17:09 +0800
Subject: [PATCH 49/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index b052825b39..977ce71a87 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -260,7 +260,7 @@ class Clock extends React.Component {
 
 最后，我们会实现一个叫 `tick()`　的方法，`Clock` 组件每秒都会调用它。
 
-它会用 `this.setState()`  来调度组件 state 的更新：
+使用 `this.setState()` 来时刻更新组件 state：
 
 ```js{18-22}
 class Clock extends React.Component {

From bd4a896b99774bd020f06b02923138228b684123 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:17:26 +0800
Subject: [PATCH 50/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 977ce71a87..e8cdb7f7eb 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -429,7 +429,7 @@ this.setState(function(state, props) {
 <FormattedDate date={this.state.date} />
 ```
 
-`FormattedDate` 组件会在他的 props 中接收 `date` 参数，但是却无法知道它是来自于 `Clock` 的 state，或是 `Clock` 的 props，又或者是手动输入的：
+`FormattedDate` 组件会在其 props 中接收参数 `date`，但是组件本身无法知道它是来自于 `Clock` 的 state，或是 `Clock` 的 props，还是手动输入的：
 
 ```js
 function FormattedDate(props) {

From e62f8bab9e5526590910b8958bcdcf25b3016331 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Tue, 26 Feb 2019 09:17:40 +0800
Subject: [PATCH 51/55] Update content/docs/state-and-lifecycle.md

Co-Authored-By: chenjie3323 <chenjie3323@yeah.net>
---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index e8cdb7f7eb..b811e487df 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -439,7 +439,7 @@ function FormattedDate(props) {
 
 [**在 CodePen 上尝试**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
-这通常会被叫做“自顶向下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
+这通常会被叫做“自上而下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
 
 如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
 

From 942b01d34f368ff1a6a0939c5e30dbccac70f10c Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Tue, 26 Feb 2019 20:50:41 +0800
Subject: [PATCH 52/55] Update state-and-lifecycle.md

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index b811e487df..c1082efbb5 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -8,7 +8,7 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-本页面会介绍一个 React 组件中 state 和生命周期的概念。你可以在这查阅[详细的组件 API 参考文档](/docs/react-component.html)。
+本页面介绍了 React 组件中 state 和生命周期的概念。。你可以查阅[详细的组件 API 参考文档](/docs/react-component.html)。
 
 请参考[前一章节](/docs/rendering-elements.html#updating-the-rendered-element)中时钟的例子。在[元素渲染](/docs/rendering-elements.html#rendering-an-element-into-the-dom)章节中，我们只了解了一种更新 UI 界面的方法。通过调用 `ReactDOM.render()` 来修改我们想要渲染的元素：
 

From 80aa9020bb98a614960f4e7cb11506e854981cf5 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Tue, 26 Feb 2019 20:52:29 +0800
Subject: [PATCH 53/55] Space between Chinese and English

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index c1082efbb5..a4354c0882 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) 添加一个[class 构造函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在该函数中为 `this.state` 赋初值：
+2) 添加一个 [class 构造函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)，然后在该函数中为 `this.state` 赋初值：
 
 ```js{4}
 class Clock extends React.Component {

From 3a8bbca82b693cfc921073852344870ad635bc4a Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Tue, 26 Feb 2019 20:54:33 +0800
Subject: [PATCH 54/55] fix tybo

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index a4354c0882..cd4cbe1071 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -409,7 +409,7 @@ this.setState(function(state, props) {
   }
 ```
 
-这里的合并是浅合并，所以 `this.setState({coments})` 完整保留了 `this.state.posts`， 但是完全替换了 `this.state.comments`。
+这里的合并是浅合并，所以 `this.setState({comments})` 完整保留了 `this.state.posts`， 但是完全替换了 `this.state.comments`。
 
 ## 数据是向下流动的
 

From d9ed7ff977a6cd74e485ec262c02142e59c09117 Mon Sep 17 00:00:00 2001
From: Jimmy Chen <chenjie3323@yeah.net>
Date: Tue, 26 Feb 2019 20:57:09 +0800
Subject: [PATCH 55/55] Update state-and-lifecycle.md

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index cd4cbe1071..76d9c5beab 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -8,7 +8,7 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-本页面介绍了 React 组件中 state 和生命周期的概念。。你可以查阅[详细的组件 API 参考文档](/docs/react-component.html)。
+本页面介绍了 React 组件中 state 和生命周期的概念。你可以查阅[详细的组件 API 参考文档](/docs/react-component.html)。
 
 请参考[前一章节](/docs/rendering-elements.html#updating-the-rendered-element)中时钟的例子。在[元素渲染](/docs/rendering-elements.html#rendering-an-element-into-the-dom)章节中，我们只了解了一种更新 UI 界面的方法。通过调用 `ReactDOM.render()` 来修改我们想要渲染的元素：