React - 组合特性解读

React 组合特性

在React中实现代码复用，常常使用组合模式，而不是继承模式。
下面通过简单的例子来说明：
现在有个写好了的通用边框组件，对话框中要用到它。但是对于不同的对话框，边框展示的内容
也是不相同的，比如在Welcome对话框中，我们希望边框显示一些welcome有关的信息（比如欢迎标题等），要怎么处理呢？

这里有很明显的包含关系，即对话框包含了边框组件，因此可以使用这样的组合方式：

//子：可复用的边框组件
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

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

注意到这里把FancyBorder组件写成了嵌套JSX的形式，在其中传入的
子组件，需要在Border中用props.children渲染。

另一种方式更容易理解，直接以属性的方式来传递：
当然这样就要实现在FancyBorder组件上留好空位。

//子：可复用的边框组件
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      <h1 className={props.h1ClassName}>
        {props.h1}
      </h1>
      <p className={props.pClassName}>
        {props.p}
      </p>
    </div>
  );
}

//父：对话框
function WelcomeDialog() {
  return (
    <FancyBorder 
    color="blue" 
    h1ClassName="Dialog-title" 
    pClassName="Dialog-message"
    />
  );
}

有些时候，我们希望构造一些特殊实例，比如Welcome对话框是对话框的特殊实例，
但即使这样我们也不需要用继承来实现，使用props组合即可：

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 visiting our spacecraft!" />
  );
}

传入额外的props即可让一些通用的组件“特殊”化，或者说“增强”一些组件，
因此在React中增强某种组件不需要用到继承。