一、定义
组件是是构建用户界面（UI）的基础，它可以是一个输入框、按钮、也可以是一整个页面。组件可以分为以下2种类型：
1、函数组件（Functional Components）
顾名思义就是用来函数定义的组件，是一种简单灵活的组件形式，又叫无状态组件。函数组件接收一个props对象作为参数，返回一个React元素作为输出。
2、类组件（Class Components）
是一种更加复杂的组件形式，通过继承React.Component类来定义组件。类组件有自己的状态和生命周期方法，提供了更多的功能和控制权。
二、创建React组件
1、函数组件
function handleClick() {console.log('登录了');
};
export default function Login (props){return (<div><button className="btn" style={{'background':'red'}} onClick={handleClick}>登录{props}</button></div>);
}
或者使用箭头函数
const handleClick = () => {console.log('登录了');
};
const Login = (props) => {
const {name} = props;return (<div><span>{name}</span><button className="btn" style={{'background':'red'}} onClick={handleClick}>登录{props}</button></div>)
};
export default Login;
2、类组件
import { Component } from 'react';class Settings extends Component {constructor(props) {super(props);this.state = {name: props.name,,msg:'生死看淡，不服就干'};}handleClick = () => {this.setState({ name: '你好啊, React!' });}render() {return (<div><h1 className="title" style={{color:'green'}}>{this.state.name}</h1><h6>{this.state.msg}</h6><button onClick={this.handleClick}> 点击 </button></div>);}
}export default Settings;
三、引入使用React组件
import { useState } from 'react'
import Login from './views/login/index.jsx';
import Settings from './views/settings/index.jsx';
function App() {const [count, setCount] = useState(0);return (<div><Login name="LoginPage"/><Settings name="SettingsPage"/></div>)
}export default App;
