以 MiniReact 构建高性能 React 应用程序：渲染函数组件与类组件的对比

2023-09-12 09:46:02

前言

在 MiniReact 系列的前两篇文章中，我们探讨了如何实现 createElement 和 render 方法，为构建基于虚拟 DOM 的组件奠定了基础。在这一部分，我们将深入研究两种在 MiniReact 中创建组件的方法：渲染函数组件和类组件。通过比较这两种方法的优缺点，我们可以更好地理解如何在不同的场景中选择它们。

渲染函数组件

渲染函数组件是一种声明式的组件定义方式，它将组件的状态和属性作为输入，并返回一个 React 元素。其语法如下：

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
};

优点：

简单且易于理解： 渲染函数组件的语法非常简单，易于理解和编写。
高性能： 渲染函数组件是纯函数，这意味着它们没有副作用并且易于优化。
无状态： 渲染函数组件本质上是无状态的，这意味着它们不会维护自己的状态。这使得它们非常适合表示只依赖于其属性的简单组件。

缺点：

缺乏生命周期钩子： 渲染函数组件不提供生命周期钩子，这使得管理组件的生命周期变得困难。
**无法使用 this ** 渲染函数组件中不能使用 this ，这可能会影响某些需要访问组件实例的方法。

类组件

类组件是另一种定义组件的方法，它扩展了 React.Component 类。类组件具有状态和生命周期钩子，这提供了更多的灵活性。其语法如下：

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

    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
        <button onClick={this.incrementCount}>+</button>
        <span>{this.state.count}</span>
      </div>
    );
  }

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