React Hooks 与 Class 组件相比有何优势

news2025/2/10 9:24:28

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

React Hooks 是 React 16.8 引入的新特性，它允许我们在不编写类组件的情况下使用 state 以及其他的 React 特性。与传统的 Class 组件相比，Hooks 提供了许多优势，使得代码更加简洁、易读和易维护。

1. 更简洁的代码

Class 组件

在 Class 组件中，我们需要定义类，并在类中定义 state 和方法。这种方式可能会导致代码的冗余和分散。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Function 组件 + Hooks

使用 Hooks，我们可以在 Function 组件中使用 state 和其他 React 特性。这使得代码更加简洁和集中。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

2. 更易于状态逻辑复用

Class 组件

在 Class 组件中，我们通常通过高阶组件（HOC）或 render props 来复用状态逻辑。这些方式可能会导致代码的冗余和分散。

Function 组件 + Hooks

Hooks 允许我们将状态逻辑抽象为自定义 Hooks，然后在多个组件中重用这些逻辑。这使得代码更加模块化和易于维护。

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

function useCustomHook() {
  const [state, setState] = useState(initialState);

  useEffect(() => {
    // 自定义逻辑
  }, []);

  return [state, setState];
}

function Component() {
  const [state, setState] = useCustomHook();

  return (
    // 组件 JSX
  );
}

3. 更好的类型支持

Class 组件

在 Class 组件中，我们需要使用类属性和静态方法来定义类型和接口。这种方式可能会导致代码的冗余和分散。

Function 组件 + Hooks

在 Function 组件中，我们可以直接在函数参数和返回值上定义类型和接口。这使得代码更加简洁和集中。

import React, { useState } from 'react';

interface Props {
  initialCount: number;
}

function Counter({ initialCount }: Props) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}