React 函数组件和 class 组件之间的区别

React 函数组件和类组件是 React 中创建组件的两种不同方式。它们有几个主要区别：

1. 语法：

   • 函数组件：使用 JavaScript 函数（或箭头函数）定义，它接收一个 props 参数并返回 JSX。函数组件通常更简洁。

     jsx
     function Welcome(props) {
       return <h1>Hello, {props.name}</h1>;
     }

   • 类组件：使用 ES6 类来定义，它扩展自 React.Component，必须包含一个 render() 方法，该方法返回 JSX。

     jsx
     class Welcome extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }

2. 状态管理：

   • 函数组件：在 React 16.8 之前，函数组件不具备状态（state）和生命周期方法。但随着 React Hooks 的引入，函数组件可以使用 useState 和其他 Hooks 来管理状态和生命周期。
   • 类组件：具有内置的状态和生命周期方法。它们使用 this.state 和 this.setState 来管理组件的状态，以及一系列的生命周期函数（如 componentDidMount，componentShouldUpdate 等）来执行副作用操作。

3. 生命周期方法：

   • 函数组件：通过使用 React Hooks（如 useEffect），函数组件可以执行与类组件生命周期方法相似的操作，但它们不直接拥有生命周期方法。
   • 类组件：具有完整的生命周期方法，可以在组件的不同阶段执行代码。

4. this 关键字：

   • 函数组件：不使用 this 关键字。所有的数据（包括 props 和 state）都通过函数参数或 Hooks 访问。
   • 类组件：需要使用 this 关键字来访问 props、state 和类方法。

5. 优化性能：

   • 函数组件：因为它们没有类实例，理论上可以更轻量。并且可以通过使用 React.memo 进行性能优化。
   • 类组件：可以使用 shouldComponentUpdate 或 PureComponent 来优化性能，但这些通常比函数组件中的优化方法更复杂。

6. 钩子(Hooks)：

   • 函数组件：可以使用 Hooks，如 useState、useEffect 等，使得在不使用类的情况下也能拥有类似的功能。
   • 类组件：无法使用 Hooks，必须依靠类本身的特性和生命周期。

7. 部署和维护：

   • 函数组件：通常来说，由于它们更加简洁，函数组件更容易编写和维护。它们也更容易分割成更小的函数。
   • 类组件：可能会更加冗长，特别是当涉及到多个生命周期方法和状态管理时，这可能使得维护和重构变得更加困难。

8. 代码复用：

   • 函数组件：可以通过自定义 Hooks 实现逻辑的复用。
   • 类组件：通常通过高阶组件（HOCs）或渲染道具（Render Props）来实现逻辑的复用。