简介
在 React 开发中，通常需要定义许多组件类。相信大家在书写组件类时肯定不止一次复制 paste 类似如下的代码:
-- -------------------- ---- -------
----- ----- ------- --------------- -
-------- -
------ -
-----
---------- ----------------------
-------------------------------
------
--
-
-
--------------- - -
----- ----------------------------
------------ ----------------
--
------------------ - -
------------ -------- -- --- ---------------
--这份代码可谓是一个标准的 React 类组件模板，但是这样的代码需要手打，每次都要手动控制格式，需要较高的学习成本。而且如果有多个类似的组件，多次复制粘贴会使代码重复率变高，增加维护的难度。
为了解决这些问题，一位 React 开发者创建了一款利用 ES6 的 decorator 特性，旨在简化 React 开发的 npm 包——react-classer。本文将对 react-classer 进行详细介绍。
安装
在开始使用 react-classer 之前，需要先安装：
npm install react-classer
示例
来看一个具体的使用例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ------- ---- ----------------
----------
---------- -
----- ----------------------------
------------ ----------------
--
------------- -
------------ -------- -- --- ---------------
-
--
----- ----- ------- --------------- -
-------- -
----- - ----- ----------- - - -----------
------ -
-----
---------- -----------
--------------------
------
--
-
-通过使用 classer 装饰器，我们可以轻松地将 propTypes 和 defaultProps 属性放在组件类上。这样，我们就可以避免大量重复的代码编写，并简化我们的 React 组件类。
参数
react-classer 提供 1 个参数。
参数一：config
config 是一个对象，里面包含 propTypes 和 defaultProps。
{
propTypes: PropTypes,
defaultProps: defaultValues
}- propTypes: 类型检查对象。可以引入 PropTypes，使用该对象配置组件 props 的类型检查；
- defaultProps: 默认值对象。组件 props 的默认值。
注意事项
如果使用 Create React App 等脚手架创建的项目，需要先安装和配置 babel-plugin-transform-decorators-legacy 才能使用装饰器。
总结
使用 react-classer 可以帮助我们消除大量冗余代码，减少错误率，提高开发效率，也允许新手快速上手 React 组件类开发。作为一个 React 开发者，建议掌握装饰器的使用，开发更高效的 React 组件。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5b51ab1864dac66ffa