React 组件是 React 应用程序的构建块。每个 React 组件都是一个可重用的、独立的代码片段，它负责渲染特定的 UI 部分，并可能包含自己的状态和行为。

本文目录导读：

1. 类组件
2. 函数组件
3. 组件的属性（Props）
4. 组件的组合和复用

React 组件可以是类组件或函数组件，近年来，随着 React Hooks 的引入，函数组件变得越来越流行，因为它们更简洁、更易于理解和测试。

类组件

类组件是通过继承React.Component 类来定义的，它们通常具有状态（state）和生命周期方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

函数组件

函数组件是更简单的组件形式，它们只是返回 JSX 的函数，使用 React Hooks，函数组件也可以拥有状态和生命周期效果。

import React, { useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

组件的属性（Props）

无论是类组件还是函数组件，都可以通过属性（props）来接收外部数据，属性是从父组件传递到子组件的数据。

// 函数组件示例
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
// 使用 Greeting 组件，并传递 name 属性
<Greeting name="World" />

组件的组合和复用

React 组件可以很容易地组合和复用，这使得构建复杂的 UI 变得简单和高效，你可以在一个组件内部使用其他组件，从而构建出复杂的 UI 结构。

React 组件是构建 React 应用程序的基础，它们允许你以模块化和可重用的方式构建用户界面。