React 中类组件 和 函数组件

在 React 中，类组件 和 函数组件 是两种构建组件的方式。随着 React 的发展，函数组件逐渐成为主流，因为它们更简洁、更易用，同时拥有 React Hooks 提供的强大功能。

1. 类组件

1.1 定义

类组件是基于 ES6 类的组件，继承自 React.Component。它们使用 render 方法返回要渲染的 JSX。

1.2 特点

• 有自己的生命周期方法（如 componentDidMount、componentDidUpdate 等）。
• 有状态管理（state）。
• 需要通过 this 关键字访问状态和属性。

1.3 示例

import React, { Component } from 'react';

class Counter extends 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}>增加</button>
      </div>
    );
  }
}

export default Counter;

2. 函数组件

2.1 定义

函数组件是 JavaScript 的普通函数，接收 props 作为参数并返回 JSX。

2.2 特点

• 无需 this 关键字，直接访问 props。
• 通过 React Hooks（如 useState 和 useEffect）实现状态和生命周期的功能。
• 更简洁，代码量更少。

2.3 示例

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始化状态

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

export default Counter;

3. 类组件和函数组件的对比

4. 生命周期对比

4.1 类组件的生命周期

类组件有三个主要阶段：

1. 挂载阶段：
   • constructor：初始化状态。
   • componentDidMount：组件挂载后执行（如 API 请求）。
2. 更新阶段：
   • componentDidUpdate：组件更新后执行（如依赖状态变化的逻辑）。
3. 卸载阶段：
   • componentWillUnmount：组件卸载时执行（如清理订阅或定时器）。

4.2 函数组件的替代方案

函数组件中使用 useEffect 替代类组件的生命周期方法：

• componentDidMount 和 componentDidUpdate：

  useEffect(() => {
    console.log('组件挂载或更新');
  }, [dependency]); // 依赖变化时重新执行
  

• componentWillUnmount：

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器运行');
    }, 1000);
  
    return () => clearInterval(timer); // 清理逻辑
  }, []); // 空依赖数组，表示只在组件卸载时清理
  

5. 为什么函数组件更受欢迎？

5.1 React Hooks

函数组件因支持 Hooks 而具有更强的灵活性和简洁性：

• 可以在同一组件中处理状态和副作用。
• 代码更模块化，避免了类组件中复杂的逻辑嵌套。

5.2 代码简洁

函数组件更加直观，无需处理 this 的绑定问题。

5.3 性能优势

函数组件无需实例化类，性能更优（特别是在大型应用中）。

5.4 社区趋势

React 团队已明确建议使用函数组件，且新特性（如 Concurrent Mode）更偏向函数组件。

6. 类组件和函数组件的选择

1. 推荐使用函数组件：
   • 新项目中，函数组件是默认选择。
   • 借助 Hooks，可以完成几乎所有类组件能做的事情。
2. 保留类组件的场景：
   • 在老项目中，若已有大量类组件，不需要强制迁移。
   • 某些特定场景下可能还使用 HOC（高阶组件），类组件更常见。

总结

• 类组件是 React 的早期设计，提供状态和生命周期管理。
• 函数组件因支持 Hooks 和代码简洁性逐渐取代类组件，成为主流。
• 如果是新手，建议从函数组件开始学习；如果维护老项目，需要理解类组件的基本用法。