React函数组件的现代实践-CSDN博客

本文链接：https://blog.csdn.net/weixin_42593701/article/details/148034458

React函数组件的现代实践

背景简介

随着React的演进，函数组件已经成为编写React应用的主流方式。本篇博客将探索React函数组件中的一些现代实践，包括解构赋值、默认属性、剩余参数语法，并与类组件进行比较。

解构赋值

在函数组件中，属性通常作为第一个（也是唯一的）参数传递给组件。通过解构赋值，我们可以直接在函数参数中获取这些属性，从而使代码更加简洁。

示例代码

function MenuItem({ href, label }) {
  return (
    <li className="menu-item">
      <a className="menu-link" href={href}>
        {label}
      </a>
    </li>
  );
}

在这个例子中， href 和 label 作为 MenuItem 组件的属性直接解构出来，无需通过 props 对象访问。

默认属性值

解构属性的另一个好处是可以设置默认值。这在我们希望某些属性有默认行为时非常有用。

示例代码

```javascript function MenuItem({ label, href, target = "_self