React(4)-状态提升及组合

2020-03-22

React

字数统计: 531字 | 阅读时长≈ 2分钟

状态提升

React应用中，任何可变的数据应只有一个唯一数据源，此时state首先添加到需要渲染的组件中。但当多个组件需要共用反映同样的变化数据时，即其他组件也需要这个state时，需要将state提升到这些组件的共同父组件中。通过自顶向下的数据源，更新唯一的数据源state。

在子组件中使用this.props.xxx代替this.state。在共同父组件中使用state更新子组件中的值。

组合

React有丰富的组合模式，供组件间的代码重用。

包含关系

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

WelcomeDialog方法中<FancyBorder>标签内的内容对应FancyBorder函数里的{props.children}，此时props.children中的内容都被渲染到<div>中。

也可以通过标签属性来自行约定children，将所需的内容传入props。

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

上例中<Contacts />和<Chat />本质即为对象，故可以当作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!" />
  );
}

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！