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

在React中，我们可以使用两种不同的方式来创建组件：函数式组件和类组件。这两种组件的主要区别是它们的定义方式和一些特性。

函数式组件

函数式组件是使用JavaScript函数来定义的。它是一种简单的组件形式，具有以下特点：

• 定义方式简单明了，只需要定义一个函数即可。
• 没有自己的状态（state），无法使用React的生命周期方法。
• 通常用于只接收props并返回JSX元素的简单组件。
• 函数组件不需要实例化，性能上通常比类组件要好。

下面是一个简单的函数式组件的例子：

import React from 'react';

function FunctionalComponent(props) {
  return <div>{props.message}</div>;
}

类组件

类组件是采用ES6的class语法来定义的。它是React中最早的一种组件定义方式，具有以下特点：

• 可以定义自己的状态（state），并且可以通过setState方法来更新状态。
• 可以使用React的生命周期方法，例如componentDidMount和componentDidUpdate等。
• 可以定义自己的方法，并通过实例来调用。
• 类组件比函数式组件更灵活，适用于复杂的组件结构和有状态的组件。

下面是一个简单的类组件的例子：

import React from 'react';

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

  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

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

如何选择

在选择函数式组件或类组件时，可以根据组件的需求和复杂性来决定。

• 如果组件非常简单，只需要根据传入的props渲染UI，则可以选择函数式组件。
• 如果组件需要管理自己的状态，或者需要使用生命周期方法，那么选择类组件更合适。
• 在React 16.8版本之后引入了Hooks，可以在函数式组件中使用类似于类组件的特性，因此在新项目中可以优先选择函数式组件。

总结来说，函数式组件更简单、易于理解和测试，而类组件更灵活，适用于复杂的组件结构和有状态的组件。

参考资料：

• React Docs - Function Components
• React Docs - Class Components