React 类组件和函数组件的区别

1. 定义方式

类组件

• 使用 JavaScript 的 class 关键字定义。
• 必须继承 React.Component 或 React.PureComponent。
• 需要定义一个 render 方法来返回 JSX。

import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    return <div>Hello from Class Component!</div>;
  }
}

export default ClassComponent;

函数组件

• 使用 JavaScript 的函数定义。
• 在 React 16.8 之前，函数组件是无状态的，只能接收 props 并渲染 UI。
• React 16.8 引入了 Hooks 后，函数组件可以管理状态和生命周期，功能上等同于类组件。

import React from "react";

const FunctionComponent = () => {
  return <div>Hello from Function Component!</div>;
};

export default FunctionComponent;

2. 状态管理

类组件

• 状态（state）是通过 this.state 管理的。
• 状态更新需要使用 this.setState 方法。

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

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

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

函数组件

• 状态是通过 useState Hook 管理的。
• 不需要 this，直接调用 setState 方法更新状态。

import React, { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

3. 生命周期

类组件

• 类组件提供了明确的生命周期方法，如：
  componentDidMount：组件挂载完成。
  componentDidUpdate：组件更新完成。
  componentWillUnmount：组件卸载前。

函数组件

• 函数组件没有显式的生命周期方法。使用 useEffect Hook 模拟生命周期方法，useEffect 的行为由依赖数组控制。

import React, { useEffect } from "react";

const FunctionComponent = () => {
  useEffect(() => {
    console.log("Mounted or Updated");

    return () => {
      console.log("Unmounted");
    };
  }, []); // 空数组表示仅在挂载和卸载时运行

  return <div>Hello, Function Component!</div>;
};

4. 代码简洁性

类组件

类组件代码通常较冗长，尤其是在管理状态和绑定事件时需要显式使用 this。

函数组件

函数组件更加简洁直观，尤其是有了 Hooks 之后，减少了很多样板代码。

总结

特性	类组件	函数组件
定义方式	使用 class 定义	使用函数定义
状态管理	使用 this.state 和 this.setState	使用 useState Hook
生命周期	使用显式的生命周期方法	使用 useEffect Hook
代码简洁性	相对较繁琐，需要 this	更简洁，无需 this

原文地址：https://blog.csdn.net/weixin_46361785/article/details/143883107

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！