一文读懂 React 组件构建：多种方式及区别详细讲解，更快上手

在 React 中，构建组件的方式主要有两种：函数组件（Function Components）和 类组件（Class Components）。这两种组件在语法、功能以及性能等方面有一些区别。随着 React 16.8 引入了 Hooks，函数组件得到了极大的增强，几乎可以与类组件一样强大。本文将详细讲解这两种构建方式的区别、如何绑定事件以及如何在实际项目中应用。

1. React 构建组件的方式

1.1 函数组件 (Function Components)

函数组件是最常见且推荐的组件构建方式，尤其是在使用 React Hooks 后，函数组件几乎可以做到类组件能够做的所有事情。

基本语法：

function MyComponent() {
  return <div>Hello, World!</div>;
}

或者使用箭头函数：

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

函数组件可以接受 props