React学习之组合和继承（十）

React自身有一套非常强大的组合模型，官方强烈建议使用组合来代替继承实现组件的重用性

1.包容化组件

所谓的包容化组件即为不管孩子是什么都可以加进这个容器中作为它的子组件，比如说我们的Dialog弹框，或者是导航栏等等

代码如下：

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>
  );
}

当然还可以通过props属性进行增加

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 /> } /> ); }

2.特殊化组件

将包容化组件进行扩展，形成某一种特殊的组件，比如Dialog可以形成专门的一个欢迎Dialog

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

当然将扩展的组件写为类组件更好

对于继承实现的评价

官方对其评价是，在facebook中，大量的React组件都没有采用继承方式来重用组件。

对于创建一个组件的意见

创建的组件，尽可能的可以接受任意值来实现对行为的扩展

如果你要重复使用一个不是UI组件的功能，强烈建议编写成一个单独的javascript模块，提供相应的接口供组件使用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!