component

组件

作为软件设计的通用原则，组件的划分要满足高内聚和低耦合。高内聚是指把逻辑紧密相关的内容放在一个组件中，低耦合是指不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

在React里，你能看到首字母大写的标签都是组件。

React组件要求：首字母必须大写

组件划分原则：

结偶：降低单一模块/组件的复杂度
复用：保证组件的一致性，提升开发效率
组件颗粒度需要避免过大或过小

组件定义

只要js文件中出现了html标签，都必须引入React - jsx语法需要react库解析（新版好像不用引入了）

import React from "react";

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

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

const Welcome = (props) => {
    return (
       <h1>Hello, {props.name}</h1>
    )
}

类组件

推荐使用赋值语句加箭头函数

class Welcome extends React.Component {
  //state
  state = {
    a: 1,
    b: false,
    c:[]
  }

  func1 = () => {}

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

返回多个组件

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

render() {
  return (
    <Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    <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>
  );
}

组件使用

<SomeComponet />
<SomeComponet> </SomeComponet>

注意

react组件最外层需要一个根元素包裹

组件​

组件定义​

类组件​

返回多个组件​

组件使用​

组件

组件定义

类组件

返回多个组件

组件使用