React组件概念

组件

  作为软件设计的通用原则，组件的划分要满足高内聚和低耦合。高内聚是指把逻辑紧密相关的内容放在一个组件中，低耦合是指不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

【函数组件】
　　定义一个组件最简单的方式是使用JavaScript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

【类组件】

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

【返回多个元素】
　　React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。
　　Fragments 看起来像空的 JSX 标签：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

  [注意]<></> 语法不能接受键值或属性。

  另一种使用片段的方式是使用 React.Fragment组件，React.Fragment 组件可以在 React 对象上使用，<></>是 <React.Fragment/>的语法糖。

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

  如果需要一个带 key 的片段，可以直接使用 <React.Fragment /> 。 一个使用场景是映射一个集合为一个片段数组 — 例如：创建一个描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

[注意]如果使用create-react-app构建的项目，不支持<></>，但支持<React.Fragment />的形式。