剖析 React 中函数组件与类组件的异同

2024-02-20 01:41:29

简介
在 React 生态系统中，函数组件和类组件是两种不同的组件类型，它们在定义、生命周期和状态管理方面存在一些差异。函数组件本质上是 JavaScript 函数，而类组件则是基于 ES6 类定义的组件。

组件定义

函数组件的定义非常简单，只需使用一个带有 props 参数的 JavaScript 函数即可。函数组件不需要扩展任何类，也没有状态或生命周期方法。

const MyFunctionComponent = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

类组件的定义则更为复杂。类组件需要扩展 React.Component 类，并定义一个 render() 方法。render() 方法返回组件的 JSX 代码。类组件还具有生命周期方法，这些方法在组件的不同生命周期阶段被调用。

class MyClassComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

生命周期

函数组件没有生命周期方法，而类组件具有生命周期方法。生命周期方法允许类组件在组件的不同阶段执行特定的操作，例如在组件挂载时或卸载时执行某些操作。

以下是一些常见的生命周期方法：

componentDidMount()：在组件首次挂载后调用。
componentDidUpdate()：在组件更新后调用。
componentWillUnmount()：在组件卸载前调用。

状态管理

函数组件没有状态，而类组件具有状态。类组件可以使用 this.state 对象来存储组件的状态，并使用 setState() 方法来更新状态。

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <h1>The count is: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment count
        </button>
      </div>
    );
  }
}