面试官：react 类组件和函数组件的区别是什么

语法：

• 类组件使用 ES6 的类语法来定义组件，继承自 React.Component 或 React.PureComponent。
• 函数组件是一个简单的 JavaScript 函数，接收 props 作为参数，并返回 React 元素作为输出。

状态管理：

• 类组件可以包含内部状态（通过 this.state 定义）和生命周期方法（例如 componentDidMount、render 等）。
• 函数组件是无状态的，不包含内部状态或生命周期方法，只负责根据输入的 props 渲染 UI。

性能：

• 函数组件通常比类组件执行效率更高，因为函数组件没有实例化过程和额外的生命周期方法，只是执行简单的函数调用。
• 类组件可能会因为实例化和生命周期方法的存在而导致一些性能开销。

代码复用：

• 函数组件通常更容易复用和组合，因为它们只是简单的函数，可以像普通函数一样进行调用和组合。
• 类组件在复用和组合方面相对复杂一些，需要通过继承或者高阶组件等方式来实现。

上下文（Context）：

• 在 React 16.8 之前，函数组件不能直接访问上下文（Context），而类组件可以通过 this.context 来访问上下文。
• 从 React 16.8 开始，使用 useContext 钩子函数可以在函数组件中访问上下文。

this 上下文：

• 在类组件中，可以使用 this 关键字来访问组件实例，以及组件的状态和属性。
• 在函数组件中，没有 this 上下文，因为函数组件本质上只是一个普通函数，没有组件实例的概念。但是可以使用 React Hooks 来获取组件的状态和其他 React 功能。

React 版本要求：

• 如果你的项目使用的 React 版本较旧，可能无法使用函数组件和 Hooks，这时只能使用类组件来定义组件。
• 函数组件和 Hooks 是在 React 16.8 版本引入的，因此如果你的项目需要支持更早的 React 版本，就必须使用类组件。

状态管理：

• 类组件通过 this.state 来管理组件的状态，并且可以通过 this.setState() 方法来更新状态。
• 函数组件可以通过 React Hooks 中的 useState 来管理组件的状态，每次更新状态时，会重新渲染组件。