组合 vs 继承

Composition vs Inheritance

• React 有十分强大的组合模式，我们推荐使用组合而非继承来实现组件间的代码重用

包含关系

• 有些组件无法提前知晓它们子组件的具体内容。比如说侧边栏 sidebar 和 对话框 Dialog 等展现通用容器的组件中特别容易遇到这种情况

  ```jsx harmony

function FancyBorder(props) { return ( {props.children} ) }

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

* 少数情况下，你可能需要一个组件中预留出几个 洞，这种情况下，我们可以不适用 children 而是自行约定：将所需的内容传入 props 并使用相应的 prop
```jsx harmony

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

• 这里面的 Contacts 和 Chat 之类的 React 元素本质就是对象，所以你可以把它们当作 props，你可以将任何东西作为 props 进行传递