React-----Composition(构造)VS Inheritance(继承)

概述：

我们该如何选择是构造还是继承。

1.包含

对于对话框和工具栏不确定它包含的内容，可用children进行注入

代码：

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

ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}

总结： 

• 1.对于有计算用{}进行包裹
• 2.children表示标签包含的子标签

2.对于不是一个整体加入情况

比如布局

css样式：

html, body, #root {
  width: 100%;
  height: 100%;
}

.SplitPane {
  width: 100%;
  height: 100%;
}

.SplitPane-left {
  float: left;
  width: 30%;
  height: 100%;
}

.SplitPane-right {
  float: left;
  width: 70%;
  height: 100%;
}

.Contacts {
  width: 100%;
  height: 100%; 
  background: lightblue;
}

.Chat {
  width: 100%;
  height: 100%; 
  background: pink;
}

JS代码：

function Contacts() {
  return <div className="Contacts" />;
}

function Chat() {
  return <div className="Chat" />;
}

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

总结：只要引用变量和标签内部嵌入标签变量，只能用{},如果不是整体可以用变量替代。

3.如果你定义一个模板（类似框架），只是数据不同，比如对话框

效果图：

分三部分：

1.MarsExploration Program是标题，2.How should we refer to you ? 是信息，3.输入框和按钮是children

代码 ：

CSS:

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}

JS:

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

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 React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    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>
    );
  }

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

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

ReactDOM.render(
  <SignUpDialog />,
  document.getElementById('root')
);

总结：1.不断封装，

    2.alert(`Welcome aboard, ${this.state.login}!`); 慢慢捡一点知识，发现没有对于在字符串引用变量除了加{}还要$符号。

构造全屏脑洞大开。。。。。自由发挥了

参考官方文档https://facebook.github.io/react/docs/composition-vs-inheritance.html