「React」函数组件香在哪儿？与 Class 组件的对比分析

2023-09-09 13:37:20

函数组件与 Class 组件的区别

创建方式

函数组件的创建方式更加简洁，只需要使用一个函数即可。而 Class 组件的创建方式则相对复杂，需要使用 class 和 extends 关键字，同时还要定义 constructor 函数、render 函数等方法。

// 函数组件
const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

// Class 组件
class MyComponent extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

实现 +1 功能

在函数组件中，实现 +1 功能只需要使用 useState 钩子即可。而在 Class 组件中，实现 +1 功能则需要使用 state 和 setState 方法。

// 函数组件
import { useState } from "react";

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

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};

// Class 组件
class MyComponent extends React.Component {
  state = {
    count: 0,
  };

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

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

模拟 componentDidMount 和 componentDidUpdate

在函数组件中，可以使用 useEffect 钩子来模拟 componentDidMount 和 componentDidUpdate。而在 Class 组件中，可以使用 componentDidMount 和 componentDidUpdate 生命周期钩子。

// 函数组件
import { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    // componentDidMount
  }, []);

  useEffect(() => {
    // componentDidUpdate
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};

// Class 组件
class MyComponent extends React.Component {
  componentDidMount() {
    // componentDidMount
  }

  componentDidUpdate(prevProps, prevState) {
    // componentDidUpdate
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}