Reactjs入门官方文档(十)【composition-vs-inheritance】_react compositionselector-优快云博客

本文探讨了React中的组合和继承概念，推荐使用组合而非继承来构建组件。通过具体示例介绍了如何利用props传递子组件，以及如何通过配置props来实现组件的特例。

此文章是翻译composition vs inheritance这篇React（版本v15.5.4）官方文档。

组合和继承

React 有一个非常强大的组合模式（composition model），在组件之间，我们建议使用组合（composition）而不是继承（inheritance）。

在这个部分，我们将会考虑几个对React 开发新手来说经常遇到的几个继承问题，展示我们如何使用组合方式来解决它们。

包含

一些组件提前并不知道它们的孩子元素（children）。对Sidebar 或者Dialog 这些通用的”boxes” 的组件来说尤其常见。

我们通常建议这种组件使用children prop 作为孩子元素（children elments）直接作为输出：

function FancyBorder(props){
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  )
}

这允许其他组件通过嵌套 JSX 传递任意子组件给他们：

function WelcomeDialog(){
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  )
}

在CodePen 上尝试

在<FancyBorder> JSX 标签中的任何东西都可以作为FancyBorder 组件的children prop 传入。由于Fancyborder 在<div> 标签中渲染{props.chidren} ，所以传入的elements 最终被输出显示。

虽然这不是常见的的，但是有时候，你需要多个“占位符”(holes)，在一个component 中。在这种情况下，你可以使用自定义的 prop(属性)，而不是使用 children ：：

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

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

在CodePen 上尝试

<Contacts /> 和<Chat /> 这种React elements 就是一个object，你可以像其它数据一样将其作为props 传入。

特例

有时我们考虑到组件可以作为其它组件的“特例（special cases）”。例如，我们可以说WelcomeDialog 是Dialog 的一个“特例（special cases）”。

在React 中，这也可以通过组合来实现，通过使用props 来配置实现在一个 “特殊的（special）” 组件中在一个“常用的（generic）”组件中渲染：

function Dialog(props){
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  )
}
function WelcomeDialog(){
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visting our spacecraft!"/>
  )
}

在CodePen 上尝试

通过类定义的组件也可以使用组合方式：

function Dialog(props){
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  )
}
class SignUpDialog extends Component {
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSignUp = this.handleSignUp.bind(this)
    this.state = {
      login: ''
    }
  }

  handleChange(event){
    this.setState({
      login: event.target.value
    })
  }

  handleSignUp(){
    alert(`Welcome aboard, ${this.state.login}!`)
  }

  render(){
    return (
      <Dialog
        title="Mars Exploration Program"
        message="How should we refer to you ?">
        <input
          value={this.state.login}
          onChange={this.handleChange} />
        <button
          onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    )
  }
}