docs(cn): refine Composition vs Inheritance & remove control chars (#109)

Author: robertying

content/docs/composition-vs-inheritance.md

@@ -10,13 +10,13 @@ next: thinking-in-react.html
 
 React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。
 
-在这篇文档中，我们将展示 React 初学者倾向于使用继承来解决的几个问题，并给出使用组合的思想来解决这些问题的方法。
+在这篇文档中，我们将考虑初学 React 的开发人员使用继承时经常会遇到的一些问题，并展示如何通过组合思想来解决这些问题。
 
 ## 包含关系 {#containment}
 
-有些组件无法提前知晓它们的子组件。`Sidebar`（侧边栏）和 `Dialog`（对话框）等代表一般容器（box）的组件就是很好的例子。
+有些组件无法提前知晓它们子组件的具体内容。在 `Sidebar`（侧边栏）和 `Dialog`（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。
 
-我们建议这些组件使用一个特殊的 `children` prop 来将他们的子组件输出到渲染结果中：
+我们建议这些组件使用一个特殊的 `children` prop 来将他们的子组件传递到渲染结果中：
 
 ```js{4}
 function FancyBorder(props) {
@@ -28,7 +28,7 @@ function FancyBorder(props) {
 }
 ```
 
-这使得别的组件可以通过 JSX 嵌套将任意组件作为子组件传递给它们。
+这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。
 
 ```js{4-9}
 function WelcomeDialog() {
@@ -47,9 +47,9 @@ function WelcomeDialog() {
 
 **[在 CodePen 上尝试](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
 
-`<FancyBorder>` JSX 标签中的所有内容都会作为一个 `children` prop 传递给 `FancyBorder` 组件。因为 `FancyBorder` 将 `{props.children}` 渲染在一个 `<div>` 中，被传递的这些子组件最终都会出现在输出结果中。
+`<FancyBorder>` JSX 标签中的所有内容都会作为一个 `children` prop 传递给 `FancyBorder` 组件。因为 `FancyBorder` 将 `{props.children}` 渲染在一个 `<div>` 中，被传递的这些子组件最终都会出现在输出结果中。
 
-有些情况下，你可能需要在一个组件中留出几个“洞”。尽管这种情况相对少见，但是你不需要拘泥于单一的 `children`，还可以自主设计相应的 props 和“洞”的位置来进行组件组合。
+少数情况下，你可能需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用 `children`，而是自行约定：将所需内容传入 props，并使用相应的 prop。
 
 ```js{5,8,18,21}
 function SplitPane(props) {
@@ -80,13 +80,13 @@ function App() {
 
 [**在 CodePen 上尝试**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
 
-`<Contacts />` 和 `<Chat />` 之类的 React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递。这种方法可能使你想起别的库中“槽”（slot）的概念，但在 React 中你可以将任何东西作为 props 进行传递，没有限制。
+`<Contacts />` 和 `<Chat />` 之类的 React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递。这种方法可能使你想起别的库中“槽”（slot）的概念，但在 React 中没有“槽”这一概念的限制，你可以将任何东西作为 props 进行传递。
 
 ## 特例关系 {#specialization}
 
 有些时候，我们会把一些组件看作是其他组件的特殊实例，比如 `WelcomeDialog` 可以说是 `Dialog` 的特殊实例。
 
-在 React 中，我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件：
+在 React 中，我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件：
 
 ```js{5,8,16-18}
 function Dialog(props) {
@@ -167,6 +167,6 @@ class SignUpDialog extends React.Component {
 
 在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况。
 
-Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
+Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
 
-如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需扩展它们。
+如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。