11、React 组件类型：功能组件与类组件的全面剖析

React 组件类型：功能组件与类组件的全面剖析

1. Rest 语法与属性排序

在 React 开发中，Rest 语法是一个实用的特性。它允许我们在组件中处理额外的属性，而无需显式指定所有不关心的属性。例如，我们可以让任何组件传递它们想要的属性，同时对某些特定属性（如 label 和 href ）进行特殊处理。

需要注意的是，Rest 语法和扩展运算符虽然外观相同，都是在变量名前使用三个点（ ... ），但它们的用途截然不同。Rest 语法用于解构，而扩展运算符用于赋值。使用 rest 作为额外参数的变量名是一种常见的约定，但并非强制要求。

在对象解构中，Rest 语法必须是最后一个元素，因此要将其指定在属性列表的末尾。当与默认属性结合使用时，属性的排序如下：
1. 无默认值的属性
2. 有默认值的属性
3. Rest 属性

示例代码如下：

function MenuItem({ label, href, target="_self", ...rest }) {
  // 函数体
}

2. 功能组件与类组件的比较

在 React 开发中，功能组件和类组件是两种常见的组件类型。在开发初期，它们之间的差异可能看起来很小甚至微不足道。例如，一个简单的 Menu 组件，用类组件实现如下：