1. 函数组件 （无状态组件）

组件名称首字母大写

1. 创建并使用组件

function Component1(props) {
  return <h1>我是组件1</h1>;
}

function App() {
  return (
    <div>
      <Component1 />
    </div>
  );
}

export default App;

2. 组件传参、props 默认值、props 验证

import PropTypes from "prop-types";
function Component1(props) {
  return (
    <div>
      <h1>我是组件1</h1>
      <div>{props.param1 + " " + props.param2.objKey}</div>
    </div>
  );
}

// props 默认值
Component1.defaultProps = {
  param1: "不传显示",
  param2: { objKey: "不传显示" },
};

// props 类型验证
Component1.propTypes = {
  param1: PropTypes.string,
  param2: PropTypes.object,
};

// 方式二：对象拓展符传参
const params = {
  param1: "参数1",
  param2: { objKey: "对象参数" },
};

function App() {
  return (
    <div>
      {/* 方式一：属性传参 */}
      <Component1 param1="参数1" param2={{ objKey: "对象参数" }} />

      {/* 方式二：对象拓展符传参 */}
      <Component1 {...params} />
    </div>
  );
}

export default App;

2. 类组件(有状态组件 可使用 state)

1. 创建并使用组件

组件名称首字母大写

import React from "react";
class Component1 extends React.Component {
  render() {
    return (
      <div>
        <h1>我是组件1</h1>
      </div>
    );
  }
}
function App() {
  return (
    <div>
      <Component1 />
    </div>
  );
}

export default App;

2. 组件传参、props 默认值、props 验证

import PropTypes from "prop-types";
import React from "react";

class Component1 extends React.Component {
  // props 默认值：类组件中第二种写法
  static defaultProps = {
    param1: "类组件 props 默认值 的第二种写法，不传显示",
    param2: { objKey: "类组件 props 默认值 的第二种写法，不传显示" },
  };
  render() {
    return (
      <div>
        <h1>我是组件1</h1>
        <div>{this.props.param1 + " " + this.props.param2.objKey}</div>
      </div>
    );
  }
}
// props 默认值
Component1.defaultProps = {
  param1: "不传显示",
  param2: { objKey: "不传显示" },
};

// props 类型验证
Component1.propTypes = {
  param1: PropTypes.string,
  param2: PropTypes.object,
};

// 方式二：对象拓展符传参
const params = {
  param1: "参数1",
  param2: { objKey: "对象参数" },
};
function App() {
  return (
    <div>
      {/* 方式一：属性传参 */}
      <Component1 param1="参数1" param2={{ objKey: "对象参数" }} />

      {/* 方式二：对象拓展符传参 */}
      <Component1 {...params} />
    </div>
  );
}

export default App;