diff --git a/content/blog/2015-12-18-react-components-elements-and-instances.md b/content/blog/2015-12-18-react-components-elements-and-instances.md
index aea0411d0f..143f3d5e65 100644
--- a/content/blog/2015-12-18-react-components-elements-and-instances.md
+++ b/content/blog/2015-12-18-react-components-elements-and-instances.md
@@ -1,24 +1,24 @@
 ---
-title: "React Components, Elements, and Instances"
+title: "React 组件，元素和实例"
 author: [gaearon]
 ---
 
-The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
+许多 React 初学者对**组件、其实例以及元素**之间的区别感到困惑。为什么有三个不同的术语来指代屏幕上绘制的内容？
 
-## Managing the Instances {#managing-the-instances}
+## 管理实例 {#managing-the-instances}
 
-If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
+如果你不熟悉 React，那么此前你可能仅仅工作用到过组件类和实例。例如，你可能通过新建一个 class 来声明 `Button` *组件*。当 app 运行起来以后，你可能会有若干个拥有自己属性和本地 state 的*实例*运行在屏幕上。这是传统的面向对象 UI 编程。那为什么要引入*元素*？
 
-In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
+在这些传统的 UI 模型中，需要由你来关心创建及销毁子组件们的实例。如果一个 `Form` 组件要渲染一个 `Button` 组件，那么它需要创建其实例并手动根据最新的信息使其保持同步。
 
 ```js
 class Form extends TraditionalObjectOrientedView {
   render() {
-    // Read some data passed to the view
+    // 读取一些数据到当前视图
     const { isSubmitted, buttonText } = this.attrs;
 
     if (!isSubmitted && !this.button) {
-      // Form is not yet submitted. Create the button!
+      // 表单还未提交。创建按钮！
       this.button = new Button({
         children: buttonText,
         color: 'blue'
@@ -27,19 +27,19 @@ class Form extends TraditionalObjectOrientedView {
     }
 
     if (this.button) {
-      // The button is visible. Update its text!
+      // 按钮可见。更新其文本！
       this.button.attrs.children = buttonText;
       this.button.render();
     }
 
     if (isSubmitted && this.button) {
-      // Form was submitted. Destroy the button!
+      // 表单已提交。销毁按钮！
       this.el.removeChild(this.button.el);
       this.button.destroy();
     }
 
     if (isSubmitted && !this.message) {
-      // Form was submitted. Show the success message!
+      // 表达已经提交。显示成功信息！
       this.message = new Message({ text: 'Success!' });
       this.el.appendChild(this.message.el);
     }
@@ -47,21 +47,21 @@ class Form extends TraditionalObjectOrientedView {
 }
 ```
 
-This is pseudocode, but it is more or less what you end up with when you write composite UI code that behaves consistently in an object-oriented way using a library like Backbone.
+虽然这是一段伪代码，但只要你在使用一个库（比如 Backbone）编写复合界面代码的同时，恪守面向对象的思想，最终代码多少都会变成这个样子。
 
-Each component instance has to keep references to its DOM node and to the instances of the children components, and create, update, and destroy them when the time is right. The lines of code grow as the square of the number of possible states of the component, and the parents have direct access to their children component instances, making it hard to decouple them in the future.
+每个组件实例都必须保持对 DOM 节点和子组件实例的引用，同时在正确的时机新建、更新、销毁它们。随着组件可能状态的平方式增长，代码行数也将增长。与此同时，父组件直接访问子组件实例也使得将来它们彼此之间更难解耦。
 
-So how is React different?
+所以 React 有何不同呢？
 
-## Elements Describe the Tree {#elements-describe-the-tree}
+## 元素描述了树 {#elements-describe-the-tree}
 
-In React, this is where the *elements* come to rescue. **An element is a plain object *describing* a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
+这正是 React 希望*元素*施展拳脚之处。**元素是一个用来*描述*组件实例或 DOM 节点及其需要属性的普通对象**。它只包含组件类型（比如 `Button`），其属性（比如`color`）以及所有其下子元素的相关信息。
 
-An element is not an actual instance. Rather, it is a way to tell React what you *want* to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
+一个元素不是一个确切的实例。他是一种告诉 React 你*想要*在屏幕上看到什么的方法。你不能在元素上调用任何方法。它只是一个携有 `type: (string | ReactClass)` 和 `props: Object`[^1] 字段的不可变描述对象。
 
-### DOM Elements {#dom-elements}
+### DOM 元素 {#dom-elements}
 
-When an element’s `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
+当一个元素的 `type` 是字符串时，它代表了一个具有该标签名称的 DOM 节点。`props` 对应于它的属性。React 这就是 React 将呈现的内容。举个例子：
 
 ```js
 {
@@ -78,7 +78,7 @@ When an element’s `type` is a string, it represents a DOM node with that tag n
 }
 ```
 
-This element is just a way to represent the following HTML as a plain object:
+这个元素只不过是一种将下面这段 HTML 表示成一个普通对象的方法。
 
 ```html
 <button class='button button-blue'>
@@ -88,15 +88,15 @@ This element is just a way to represent the following HTML as a plain object:
 </button>
 ```
 
-Note how elements can be nested. By convention, when we want to create an element tree, we specify one or more child elements as the `children` prop of their containing element.
+注意元素是如何嵌套的。按照惯例，当我们要创建一棵 element tree 时，我们指定一或多个子元素作为其 `children` 成员。
 
-What’s important is that both child and parent elements are *just descriptions and not the actual instances*. They don’t refer to anything on the screen when you create them. You can create them and throw them away, and it won’t matter much.
+重要的是子元素和父元素*仅仅作为描述而不是真正的实例*。当你创建了它们，它们并不代表任何屏幕上的东西。你可以创建、丢弃它们，不必担心什么。
 
-React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!
+React 元素易于遍历，无需解析。此外它们比起真实的 DOM 元素更轻——它们只是对象！
 
-### Component Elements {#component-elements}
+### 组件元素 {#component-elements}
 
-However, the `type` of an element can also be a function or a class corresponding to a React component:
+然而，元素的 `type` 究竟是一个函数还是一个类则视 React 组件而定：
 
 ```js
 {
@@ -108,11 +108,11 @@ However, the `type` of an element can also be a function or a class correspondin
 }
 ```
 
-This is the core idea of React.
+这是 React 的核心思想。
 
-**An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.**
+**一个用于描述组件的元素也是一个元素，就像一个用于描述 DOM 节点的元素一样。它们可以彼此嵌套，互相混合。**
 
-This feature lets you define a `DangerButton` component as a `Button` with a specific `color` property value without worrying about whether `Button` renders to a DOM `<button>`, a `<div>`, or something else entirely:
+该特性让你可以将 `DangerButton` 组件定义为一个被指定 `color` 值的 `Button`，而你完全不必关心 `Button` 是渲染成一个 DOM `<button>`、`<div>` 或其他东西。
 
 ```js
 const DangerButton = ({ children }) => ({
@@ -124,7 +124,7 @@ const DangerButton = ({ children }) => ({
 });
 ```
 
-You can mix and match DOM and component elements in a single element tree:
+你可以混合和匹配 DOM 及组件元素在一个单独的 element tree 中：
 
 ```js
 const DeleteAccount = () => ({
@@ -150,7 +150,7 @@ const DeleteAccount = () => ({
 });
 ```
 
-Or, if you prefer JSX:
+或者，如果你喜欢 JSX：
 
 ```js
 const DeleteAccount = () => (
@@ -162,17 +162,17 @@ const DeleteAccount = () => (
 );
 ```
 
-This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
+这种混合和匹配有助于组件彼此分离，因为它们可以仅仅通过组合来表示 *is-a* 和 *has-a* 的关系:
 
-* `Button` is a DOM `<button>` with specific properties.
-* `DangerButton` is a `Button` with specific properties.
-* `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
+* `Button` 是一个被指定部分属性的 DOM `<button>`。
+* `DangerButton` 是一个被指定部分属性的 `Button`。
+* `DeleteAccount` 在一个 `<div>`中包含一个 `Button` 和一个 `DangerButton` 。
 
-### Components Encapsulate Element Trees {#components-encapsulate-element-trees}
+### 组件封装 Element Trees {#components-encapsulate-element-trees}
 
-When React sees an element with a function or class `type`, it knows to ask *that* component what element it renders to, given the corresponding `props`.
+当 React 遇到一个带有函数或类 `type` 的元素时，它知道要问*那个*组件它要呈现什么元素，并给出相应的 `props`。
 
-When it sees this element:
+当它遇到这个元素:
 
 ```js
 {
@@ -184,7 +184,7 @@ When it sees this element:
 }
 ```
 
-React will ask `Button` what it renders to. The `Button` will return this element:
+React 将问 `Button` 它将渲染成什么。`Button` 将会返回这个元素：
 
 ```js
 {
@@ -201,16 +201,16 @@ React will ask `Button` what it renders to. The `Button` will return this elemen
 }
 ```
 
-React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
+React 将重复这个过程直到它知道了页面上每一个组件之下的 DOM 标签元素。
 
-React is like a child asking “what is Y” for every “X is Y” you explain to them until they figure out every little thing in the world.
+React 就像一个孩子。在搞清楚这个世界的每一件小事之前，它都要向每一个你所解释的 ”X是Y“ 询问 ”Y是什么“。
 
-Remember the `Form` example above? It can be written in React as follows[^1]:
+还记得之前 `Form` 的例子吗？它可以用 React 编写如下[^1]：
 
 ```js
 const Form = ({ isSubmitted, buttonText }) => {
   if (isSubmitted) {
-    // Form submitted! Return a message element.
+    // Form 提交了！返回一个 message 元素。
     return {
       type: Message,
       props: {
@@ -219,7 +219,7 @@ const Form = ({ isSubmitted, buttonText }) => {
     };
   }
 
-  // Form is still visible! Return a button element.
+  // Form 还在继续显示！返回一个 button 元素。
   return {
     type: Button,
     props: {
@@ -230,18 +230,18 @@ const Form = ({ isSubmitted, buttonText }) => {
 };
 ```
 
-That’s it! For a React component, props are the input, and an element tree is the output.
+这就是它！对于一个 React 组件，props 就是输入，element tree 就是输出。
 
-**The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.**
+**返回的 element tree 可以包含描述 DOM 节点的元素，描述其他组件的元素。这使你可以组成 UI 的独立部分，而无需依赖其内部 DOM 结构。**
 
-We let React create, update, and destroy instances. We *describe* them with elements we return from the components, and React takes care of managing the instances.
+我们让 React 创建，更新，销毁实例。我们通过组件返回的元素*描述*它们，而 React 负责管理这些实例。
 
-### Components Can Be Classes or Functions {#components-can-be-classes-or-functions}
+### 组件可以是类或函数 {#components-can-be-classes-or-functions}
 
-In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
+在之前的代码中，`Form`, `Message` 和 `Button` 是 React 组件。它们既可以像此前那样被写作函数，也可以通过`React.Component`写作类。这三种声明组件的方式几乎是等效的：
 
 ```js
-// 1) As a function of props
+// 1) 作为一个带 props 的函数
 const Button = ({ children, color }) => ({
   type: 'button',
   props: {
@@ -255,7 +255,7 @@ const Button = ({ children, color }) => ({
   }
 });
 
-// 2) Using the React.createClass() factory
+// 2) 使用 React.createClass() 工厂
 const Button = React.createClass({
   render() {
     const { children, color } = this.props;
@@ -274,7 +274,7 @@ const Button = React.createClass({
   }
 });
 
-// 3) As an ES6 class descending from React.Component
+// 3) 作为从 React.Component 继承的ES6类
 class Button extends React.Component {
   render() {
     const { children, color } = this.props;
@@ -294,15 +294,15 @@ class Button extends React.Component {
 }
 ```
 
-When a component is defined as a class, it is a little bit more powerful than a function component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
+当一个组件用类定义时，它会比一个函数组件要强大一点。当创建或销毁相应的 DOM 节点时，它能存储一些本地状态并执行自定义逻辑。
 
-A function component is less powerful but is simpler, and acts like a class component with just a single `render()` method. Unless you need features available only in a class, we encourage you to use function components instead.
+函数组件功能更弱，但它更简单。它就像一个只有 `render()` 方法的 class 组件。除非你需要只有从类组件那才能得到的功能，否则我们建议你用函数组件。
 
-**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
+**然而，不论函数或类，根本上来说它们都是 React 组件。它们将 props 作为输入，返回元素作为输出。**
 
-### Top-Down Reconciliation {#top-down-reconciliation}
+### 自上而下的的协调 {#top-down-reconciliation}
 
-When you call:
+当你调用：
 
 ```js
 ReactDOM.render({
@@ -314,10 +314,10 @@ ReactDOM.render({
 }, document.getElementById('root'));
 ```
 
-React will ask the `Form` component what element tree it returns, given those `props`. It will gradually “refine” its understanding of your component tree in terms of simpler primitives:
+React 先将那些 `props` 传入 `Form` 组件，随后等待返回 element tree。它将通过更简单的”基元“逐步完善对组件树的理解：
 
 ```js
-// React: You told me this...
+// React: 你告诉了我这...
 {
   type: Form,
   props: {
@@ -326,7 +326,7 @@ React will ask the `Form` component what element tree it returns, given those `p
   }
 }
 
-// React: ...And Form told me this...
+// React: ...然后 Form 告诉了我这...
 {
   type: Button,
   props: {
@@ -335,7 +335,7 @@ React will ask the `Form` component what element tree it returns, given those `p
   }
 }
 
-// React: ...and Button told me this! I guess I'm done.
+// React: ...然后 Button 告诉了我这！我觉得我做完了。
 {
   type: 'button',
   props: {
@@ -350,34 +350,35 @@ React will ask the `Form` component what element tree it returns, given those `p
 }
 ```
 
-This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the resulting DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
+这是 React 称之为[协调](/docs/reconciliation.html)过程的一部分。它开始于你调用 [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) 或 [`setState()`](/docs/component-api.html#setstate)。在协调结束的时候，React 知道了结果的 DOM 树，然后一个渲染器像 `react-dom` 或 `react-native` 尽可能使用最少的变化来更新 DOM 节点（或在 React Native 中的特定平台视图）。
 
-This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
+这种逐步改善过程也是为什么 React 应用易于优化的原因。如果你组件树的一部分因为变得太大导致 React 无法高效的访问，你可以告诉它[如果相关props没有变化，跳过这个”改善“并且只比对树的某些部分](/docs/advanced-performance.html)。如果 props 是不可变的，那么计算其是否发生变化是非常快的，因此 React 和不可变性可以很好地协同工作，并且可以以最小的努力提供出色的优化。
 
-You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
+你可能已经注意到，此博客文章讨论了很多组件和元素的内容，没有提到太多实例。事实上，与绝大多数面向对象 UI 框架相比，实例在 React 中的重要性要小很多。
 
-Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
+只有使用类声明的组件有实例，而且你永远不会直接创建它们：React 为你做了那些。尽管存在[父组件实例访问子组件实例的机制](/docs/more-about-refs.html)，但只要不是万不得已（譬如为某个字段设置聚焦），我么通常都应该避免这种操作。
 
-React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
+React 负责为每个类组件创建一个实例，所以你可以用面向对象的方法写一个带有方法和本地状态的组件。但除此之外，在 React 的编程模型中实例并不十分重要，而且这些都由它自己管理。
 
+## 总结 {#summary}
 ## Summary {#summary}
 
-An *element* is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
+一个*元素*是一个普通的对象。它被用来描述什么需要在屏幕上显示，根据 DOM 节点还是其他组件。元素可以在它们的 props 里包含其他元素。创建一个 React 元素很廉价。一旦一个元素被创建了，它就不再改变。
 
-A *component* can be declared in several different ways. It can be a class with a `render()` method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.
+一个*组件*可以通过多种不同的方式声明。它可以是一个带有 `render()` 方法的类。或者，更简单些，它可以被定义成一个函数。不论何种方式，它都需要 props 作为输入，返回一个 element tree 作为输出。
 
-When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
+当一个组件收到一些 props 作为输入，其必是因为某个父组件返回了一个带有它 `type` 和这些 props 的元素。这就是为什么在 React 中人们说 props 是单向流：从父级到子级。
 
-An *instance* is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/docs/component-api.html).
+*实例*是你在编写组件类中称为`this`的东西。它在[保存本地状态和响应生命周期事件](/docs/component-api.html)上很有用。
 
-Function components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
+函数组件根本没有实例。类组件才有实例，但你永远不需要去直接创建组件实例——React 会负责这些。
 
-Finally, to create elements, use [`React.createElement()`](/docs/top-level-api.html#react.createelement), [JSX](/docs/jsx-in-depth.html), or an [element factory helper](/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
+最后，要新建一个元素，使用[`React.createElement()`](/docs/top-level-api.html#react.createelement)， [JSX](/docs/jsx-in-depth.html), 或 [element factory helper](/docs/top-level-api.html#react.createfactory)。不要在真实代码中将元素写作普通对象——知道它们是处于底层的普通对象足矣。
 
-## Further Reading {#further-reading}
+## 拓展阅读 {#further-reading}
 
 * [Introducing React Elements](/blog/2014/10/14/introducing-react-elements.html)
 * [Streamlining React Elements](/blog/2015/02/24/streamlining-react-elements.html)
 * [React (Virtual) DOM Terminology](/docs/glossary.html)
 
-[^1]: All React elements require an additional ``$$typeof: Symbol.for('react.element')`` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of what’s happening underneath but the code won’t run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.
+[^1]: 出于[安全原因](https://github.com/facebook/react/pull/4832)，所有 React 元素都需要在对象上声明一个额外的 ``$$typeof: Symbol.for('react.element')`` 字段。在上文的示例中将其省略了。为了使你理解底层发生了什么，这篇博客为元素使用了内联对象，但无论是为元素添加 `$$typeof` 还是更改代码使用 `React.createElement()` 或 JSX，代码都不会如预期运行。