Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Feb 17, 2019
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions content/docs/composition-vs-inheritance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -28,7 +28,7 @@ function FancyBorder(props) {
}
```

这使得别的组件可以通过 JSX 嵌套将任意组件作为子组件传递给它们。
这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。

```js{4-9}
function WelcomeDialog() {
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -167,6 +167,6 @@ class SignUpDialog extends React.Component {

在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况。

Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需扩展它们。
如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。