React 是一个非常流行的前端框架，它的组件化开发方式使得开发者可以轻松地创建复杂的用户界面。然而，在实际开发中，我们会发现很多组件都有共性，它们可能只是在一些细节上有所不同。这时候，我们就需要复用组件，以避免重复工作。ES7 中的装饰器语法为我们提供了一种优雅的解决方案。
装饰器语法
装饰器是一种特殊的语法，它可以在不修改原来代码的情况下，动态地扩展类或对象的功能。在 ES7 中，装饰器语法已经被正式加入到了 ECMAScript 规范中，并且得到了各种 JavaScript 引擎的支持。
装饰器语法的基本形式如下：
@decorator
class MyClass {}其中，decorator 是一个函数，它接收一个类作为参数，并返回一个新的类。通过 @decorator 的方式，我们可以把 decorator 函数应用到 MyClass 类上，实现对 MyClass 类的扩展。
React 组件复用问题
在 React 中，组件是一个相对独立的单元，它可以接收一些 props 参数，并返回一个虚拟 DOM，用于渲染页面。组件之间的复用是非常常见的需求，例如我们可能需要创建一个表格组件，用于展示各种数据。假设我们已经有了一个基础的表格组件，那么如何在不修改原来代码的情况下，对它进行扩展呢？
一种常见的做法是通过继承的方式，创建一个新的组件，然后在新的组件中对基础组件进行修改。例如：
-- -------------------- ---- -------
----- ----- ------- --------------- -
-------- -
-- ----
-
-
----- ------- ------- ----- -
-------- -
-- --------------
------ -
-----
----------------
-- ----
------
--
-
-这种方法看起来简单，但是它存在一些问题。首先，继承是一种强耦合的方式，它会使得子类和父类之间的关系变得更加复杂。其次，继承是一种静态的方式，它无法动态地扩展类的功能。如果我们需要在多个组件之间共享一些功能，那么继承就显得非常麻烦。
使用装饰器进行组件扩展
ES7 的装饰器语法为我们提供了一种优雅的解决方案，它可以在不修改原来代码的情况下，动态地扩展组件的功能。例如，我们可以定义一个名为 withTable 的装饰器，用于给组件添加表格功能：
-- -------------------- ---- -------
-------- --------------------------- -
------ ----- ------- --------------- -
-------- -
------ -
-----
------ --
----------------- --------------- --
------
--
-
--
-这个装饰器接收一个组件作为参数，并返回一个新的组件，它在原有组件的基础上添加了一个 Table 组件。使用这个装饰器，我们可以轻松地扩展任意一个组件，例如：
@withTable
class MyComponent extends React.Component {
render() {
// 渲染组件
}
}这个装饰器会把 MyComponent 组件传入 withTable 函数中，并返回一个新的组件，这个新组件会在原有组件的基础上添加一个 Table 组件，实现对 MyComponent 组件的扩展。
示例代码
下面是一个完整的示例代码，用于演示如何使用装饰器对组件进行扩展：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------------------------- -
------ ----- ------- --------------- -
-------- -
------ -
-----
------ --
----------------- --------------- --
------
--
-
--
-
----- ----- ------- --------------- -
-------- -
------ -
-------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
----
-----------
-----------
-----
--------
--------
--
-
-
----------
----- ----------- ------- --------------- -
-------- -
------ -
-----
-------------
---------------------
------
--
-
-
------ ------- ------------在这个示例中，我们定义了一个 withTable 装饰器，用于给组件添加表格功能。然后我们定义了一个 Table 组件，用于展示数据。最后，我们使用 @withTable 装饰器来扩展 MyComponent 组件，并在其中添加一个 Table 组件。最终，我们将 MyComponent 导出，以便其他模块可以使用它。
总结
ES7 的装饰器语法为我们提供了一种优雅的解决方案，它可以在不修改原来代码的情况下，动态地扩展组件的功能。使用装饰器，我们可以轻松地实现组件复用，避免重复工作。如果你还没有使用装饰器，那么现在就是时候开始学习了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc48971886fbafa49b3019