用Hooks实现React Class Component写法，经典案例详细拆解

前端

2024-02-14 04:48:42

React Hooks：用函数组件实现类组件的强大功能

在 React 开发中，Hooks 作为一种全新的 API，彻底改变了组件的编写方式。它赋予函数组件类似类组件的特性，让开发者能够编写更简洁、更灵活的代码。

比较 Class Component 与 Function Component

过去，React 组件主要分为两类：Class Component 和 Function Component 。

Class Component 使用 class 创建，拥有状态（state）和生命周期（lifecycle）方法。
Function Component 使用函数创建，没有内置的状态和生命周期方法，只能通过 props 接收数据。

用 Hooks 实现 Class Component

Hooks 的出现打破了这一界限，让函数组件也可以拥有类组件的功能。以下是如何使用 Hooks 实现 Class Component 中常见的特性：

状态管理：useState() Hook

useState() Hook 负责管理组件的状态。它接受一个初始值，返回一个数组。数组的第一个元素是当前状态值，第二个元素是更新状态的函数。

const [count, setCount] = useState(0);

生命周期：useEffect() Hook

useEffect() Hook 在组件挂载、更新和卸载时执行。它接受一个函数，在指定的生命周期阶段执行。

useEffect(() => {
  // 组件挂载时执行的操作
});

完整示例

以下示例展示了如何用 Hooks 编写一个类似于 Class Component 的计数器组件：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('组件挂载了');
  }, []);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
};

export default MyComponent;