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

在React中，我们可以使用函数型组件和类组件来创建组件。在本文中，我们将讨论这两种组件的区别。

使用方式

函数型组件使用一个函数来定义组件，如下所示：

function FunctionalComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

类组件则是使用类来定义组件，如下所示：

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

state 和生命周期

类组件可以拥有状态 (state) 和生命周期 (lifecycle) 方法，而函数型组件不行。

在类组件中，可以定义 state ，并在 render 方法中使用它。当 state 发生变化时，组件将自动重新渲染。

类组件也可以使用生命周期方法，例如 componentDidMount 和 componentWillUnmount。这允许开发人员在组件挂载和卸载时执行特定的操作，例如获取数据或清除定时器。

class ClassComponent extends React.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`;
  }

  componentWillUnmount() {
    document.title = "React App";
  }

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

函数型组件没有 state 和生命周期方法，所以我们无法在组件中存储或更新状态，或在组件挂载或卸载时执行操作。

性能

函数型组件比类组件更轻量级，因为它们不需要 this 关键字和额外的类声明代码。因此，在某些情况下，函数型组件可能比类组件更快。

总结

• 函数型组件是通过函数定义的组件。
• 类组件是使用类来定义的组件。
• 类组件可以拥有状态和生命周期方法，而函数型组件不行。
• 函数型组件比类组件更轻量级，但在某些情况下可能会更慢。