react 类组件和函数组件

React 中有两种主要的组件类型：类组件和函数组件。这两者之间的主要区别在于定义组件的方式和它们的功能。在 React 16.8 版本之后，引入了 Hooks，使得函数组件可以具有类组件类似的功能。

类组件：

1. 使用 class 关键字定义： 类组件是使用 ES6 中的 class 语法来定义的。它们通常包含一个 render 方法，该方法返回 React 元素。

2. 有状态（Stateful）： 类组件可以拥有内部状态（state），通过 this.state 来访问和更新组件的状态。状态的变化通常触发组件的重新渲染。

3. 生命周期方法： 类组件具有生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount，允许开发者在组件不同的生命周期阶段执行操作。

函数组件：

1. 使用函数定义： 函数组件是使用简单的 JavaScript 函数来定义的。在 React 16.8 之前，函数组件通常只能负责渲染 UI，没有状态或生命周期方法。

2. 无状态（Stateless）： 在 React 16.8 之前，函数组件没有内部状态。它们只是根据输入（props）生成 UI，不保存或修改状态。这就是为什么它们被称为无状态组件。

Hooks 改变了函数组件的规则：

随着 React 16.8 版本的引入，Hooks 允许函数组件具有类似于类组件的状态和生命周期方法。现在，函数组件可以使用 useState 来定义内部状态，并使用 useEffect 等 Hooks 来执行副作用操作，使得函数组件变得更加强大和灵活。

选择使用哪种组件：

1. 简洁性： 函数组件通常比类组件更简洁。Hooks 进一步提高了函数组件的功能，使其能够处理更复杂的逻辑。

2. 类组件仍然有用： 在某些情况下，特别是对于较复杂的组件，使用类组件可能更合适，因为它们提供了更多的功能，如生命周期方法和实例方法。

3. 迁移成本： 如果项目已经使用了类组件，迁移到函数组件可能需要更多的工作。在新项目中，可以更灵活地选择使用哪种组件。

总体而言，React 现在更加支持函数组件，特别是在使用了 Hooks 之后。你可以根据项目的需要和个人喜好来选择使用类组件还是函数组件。在新的 React 项目中，很多人更倾向于使用函数组件和 Hooks。