React之类组件与函数组件的区别

       类组件和函数组件在React中是两种定义UI组件的方式，它们在语法、生命周期方法、状态管理等方面存在一些差异

函数组件

定义：函数组件是通过一个普通的 JavaScript 函数定义的，接受 props 作为参数，并返回一个 React 元素。

特点：

• 简洁、易于阅读和测试。
• 无法使用生命周期方法（在使用 hooks 之前）。
• 自 React 16.8 版本引入 hooks 之后，可以通过 useState、useEffect 等 hook 实现状态和生命周期管理。

示例：

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

const FunctionComponent = ({ name }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 依赖数组，只有 count 改变时才重新运行

  return (
    <div>
      <p>Hello, {name}!</p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default FunctionComponent;

类组件

定义：类组件是通过 ES6 类定义的，必须继承 React.Component 或 React.PureComponent，并实现一个 render 方法。

特点：

• 可以使用生命周期方法（如 componentDidMount、componentDidUpdate、componentWillUnmount 等）。
• 通过 this.state 和 this.setState 管理组件状态。
• 较函数组件而言，代码可能更冗长，尤其是需要状态和生命周期管理时。

示例：

import React, { Component } from 'react';

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>Hello, {this.props.name}!</p>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default ClassComponent;

主要区别

1. 定义方式：

   • 函数组件：通过函数定义，直接接收props作为参数并返回组件的UI，没有自己的状态。
   • 类组件：通过继承 React.Component 类定义，拥有自己的状态（state）和生命周期方法。

2. 状态管理：

   • 函数组件：使用 useState hook 管理状态。
   • 类组件：使用 this.state 和 this.setState 管理状态，是组件内的局部状态管理，它只在单个组件内部存在和使用。每个类组件可以有自己的状态，这些状态不会与组件树中的其他组件共享（除非通过props显式传递）

3. 生命周期方法：

   • 函数组件：使用 useEffect 等 hook 模拟生命周期方法。
   • 类组件：直接使用 componentDidMount、componentDidUpdate、componentWillUnmount 等生命周期方法。

4. 代码简洁度：

   • 函数组件：代码通常更简洁、易读。
   • 类组件：代码可能更冗长，尤其是涉及状态和生命周期管理时。

什么时候使用哪种组件？

• 函数组件：

  • 组件逻辑简单，无需复杂的生命周期管理。
  • 适用于大多数场景，特别是自 React 16.8 引入 hooks 之后，函数组件可以处理大多数以前只能在类组件中处理的情况。

• 类组件：

  • 需要使用生命周期方法，且项目中尚未完全迁移到 hooks。
  • 维护旧项目或与旧项目中的类组件兼容。

        我更推荐使用函数组件开发，函数组件遵循函数式编程思想，而类组件则遵循面向对象编程思想。函数式编程强调不可变性和无副作用，使得函数组件更易于预测和测试。而面向对象编程则通过封装属性和方法来简化代码组织，但在某些情况下可能增加测试的复杂性，而且函数组件相对于类组件来说更轻量级，执行效率更高。