React 是一款流行的前端框架，它提供了良好的组件化开发体验。然而，在大型项目中，组件的管理和维护变得越来越困难。此时，ES7 提供的装饰器就可以帮助我们解决这个问题。
在本文中，我们将介绍如何使用 ES7 修饰器改造 React 组件，并通过示例代码演示如何使用。本文内容会比较详细，不会涉及到过多的底层原理，只会把重点放在如何实际运用上。
为什么要用 ES7 修饰器
在使用 React 进行组件化开发时，我们通常会使用类声明的方式定义一个组件。这虽然提供了一种清晰的组件化编码方式，但是当组件数量越来越多的时候，组件的定义会变得越来越冗长，代码复用性也会大大降低。
在 ES6 中提供了一种可复用性更强的模式，使用高阶组件将多个组件中共用的逻辑提取出来，然后再把这些逻辑作为高阶组件的参数传入进去。但是这种方式需要大量的代码去实现，代码可读性也会变得很差，难以维护。
ES7 提供了装饰器，这种新的语法结构可以为组件添加一些新的属性、方法或修改其他属性。使用装饰器，我们可以将多个组件中共用的逻辑更好地抽象出来，大大提升了组件的代码复用性，同时也更加易于理解和维护。
如何使用 ES7 修饰器
使用 ES7 修饰器需要指定一个 babel 插件，这个插件会将装饰器编译成 ES5 代码。我们可以在项目的根目录下的 .babelrc 文件中添加 babel 插件：
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties"
]
}其中，@babel/plugin-proposal-decorators 是 ES7 的修饰器插件，@babel/plugin-proposal-class-properties 是为了支持类属性。
然后，在组件类的声明前加上 @decoratorName 就可以使用装饰器了。
示例代码
下面我们以一个示例来演示如何使用 ES7 修饰器改造组件。我们定义了一个简单的展示不同数据的列表组件：
-- -------------------- ---- -------
----- ---- ------- --------------- -
------------- -
--------
---------- - - ------ -- --
-
------------------- -
---------------------
-------------- -- ----------------
---------- -- -
--------------- ------ ---- ---
---
-
-------- -
------ -
-----
----
---------------------------- ------ -- -
--- -----------------------
---
-----
------
--
-
-这个组件向指定的 URL 发起请求，然后渲染出数据的列表。如果有多个组件需要向不同的 URL 发送请求并渲染数据，我们就需要重复定义每个组件的 componentDidMount 方法和 constructor 方法。这时候，我们可以使用 ES7 的装饰器来重构这个组件。
我们定义一个名为 withFetch 的高阶组件，它接收一个 URL 作为参数，然后返回一个新的组件。这个新的组件会调用 componentDidMount 方法，向指定 URL 发起请求，并渲染出数据的列表。这里我们使用了 ES7 的修饰器 @withFetch 来修饰 List 组件。
-- -------------------- ---- -------
-------- -------------- -
------ --------------------------- -
----- -------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ -- --
-
------------------- -
----------
-------------- -- ----------------
---------- -- -
--------------- ------ ---- ---
---
-
-------- -
------ ------------------ ------------------------ ---
-
-
------ ---------------
--
-
--------------------------------------------------------
----- ---- ------- --------------- -
-------- -
------ -
-----
----
---------------------------- ------ -- -
--- ----------------------------
---
-----
------
--
-
-这个示例中，我们定义了一个名为 withFetch 的高阶组件，它会返回一个新的组件 FetchComponent。FetchComponent 会在 componentDidMount 方法调用时向指定的 URL 发起请求，并将数据放入组件的 state 中。然后，在渲染时使用 props 传递数据到 List 组件。
最后，我们使用修饰器将 List 组件传入 withFetch 函数中进行装饰。这样，我们就可以使用修饰器来提取组件共用的逻辑，达到更好的代码复用性和更清晰的代码结构。
总结
ES7 的修饰器为我们提供了一种更好的复用组件逻辑的方式。在 React 项目中，通过使用高阶组件和修饰器，我们可以提高代码的可读性和可维护性，大大减少重复代码的出现。
此外，我们还可以在修饰器中添加其他的功能，比如性能优化、数据管理等等。在实际项目中，我们需要根据具体的需求来决定是否要使用修饰器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6480848841e98942e2c91