在 Web 前端开发中，React 和 Redux 已成为最流行的技术。它们具有强大的功能和优良的扩展性，使得开发者可以快速搭建高质量的 Web 应用程序。但是，有些情况下，我们需要更强大的能力来增强 React 和 Redux 的功能，这时就可以使用 ES7 Decorator 技术来实现。
什么是 ES7 Decorator
ES7 Decorator 是一个 JavaScript 提议，它为 JavaScript 类和对象添加了元数据和包装器。这意味着我们可以在类和方法上添加额外的注解，从而实现更强大的功能。
在 React 和 Redux 中，ES7 Decorator 可以被用来增强其功能，例如在组件或者 Redux Store 上添加监听器，或者进行网络请求的缓存等。
在 React 中使用 ES7 Decorator
在 React 中，ES7 Decorator 可以被用来增强组件的功能。我们可以使用一个 ES7 Decorator，来自动注册事件监听器和属性绑定，而不需要手动编写代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------------
---------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
---------------------------
------- -------------------------------- ------------
-------------------------
------
--
-
-
------ ------- ------------在上面的代码中，我们使用了 @autoBind Decorator 来自动绑定了 handleClick 方法。这使得我们在调用 handleClick 方法时，不再需要显式地调用 bind 方法。
<button onClick={this.handleClick}>Click me!</button>在 Redux 中使用 ES7 Decorator
在 Redux 中，ES7 Decorator 可以被用来增强 Store 的功能。例如，我们可以使用一个 ES7 Decorator，来自动缓存网络请求的数据，从而避免多次请求相同的数据。
-- -------------------- ---- -------
------ - ----- - ---- -------------------
------
----- ------- ------- ----------- -
----- ----------- -
----- -------- - ----- -------------------------
----- ---- - ----- ----------------
------ -----
-
-
----- ----- - --- ----------
------------------------------ -- ------------
------------------------------ -- ----------在上面的代码中，我们使用了 @cache Decorator 来自动为 Store 中的 getData 方法添加缓存功能。当 Store 的 getData 方法第一次被调用时，它会发送网络请求并缓存结果。当我们再次调用 getData 方法时，它会直接从缓存中获取结果，而不再发送网络请求。
总结
ES7 Decorator 技术为 React 和 Redux 开发带来了更强大的能力。我们可以使用它来增强组件和 Store 的功能，例如自动绑定事件和属性，或者自动缓存网络请求的结果。虽然目前 ES7 Decorator 还没有正式地成为 JavaScript 的一部分，但是它已经在社区中被广泛使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ca9fc968c7c53b0f17c1e