简介
generator-reason-react-class 是一个在 ReasonML 中生成 React 类组件的 Yeoman 生成器，它可以帮助我们快速地创建出规范的 React 组件并提供一些常用的特性，同时可以节省我们的开发时间。
在这篇文章中，我们将会探讨如何使用这个工具，并探究它的一些实现细节。我们将会学习到如何：
- 安装并使用
generator-reason-react-class - 生成一个 ReasonReact 类组件
- 自定义模板并生成 React 组件
- 探究生成器的实现细节
安装
在使用 generator-reason-react-class 之前，你需要先安装 Node.js 和 Yeoman。如果你还没有安装过，你可以在终端中使用以下命令来安装：
# 安装 Node.js brew install node # 安装 Yeoman npm install -g yo
安装完成之后，我们就可以安装 generator-reason-react-class 了。在终端中，运行以下命令来进行安装：
npm install -g generator-reason-react-class
# 成功安装示意图 > npm install -g generator-reason-react-class /Users/yourName/.nvm/versions/node/v15.5.1/bin/generator-reason-react-class -> /Users/yourName/.nvm/versions/node/v15.5.1/lib/node_modules/generator-reason-react-class/bin/generator-reason-react-class.js + generator-reason-react-class@1.0.0 added 109 packages from 56 contributors in 6.266s
这样我们就已经安装好了 generator-reason-react-class，现在我们可以使用它来生成我们的 ReasonReact 组件了。
生成一个 ReasonReact 类组件
在我们开始生成组件前，让我们思考一下我们需要什么样的组件。假设我们需要一个列表组件，可以实现添加、删除条目等基本功能。在生成器中，我们希望它能够生成这些常用的模板代码并生成一些常用的属性和方法。
现在，我们可以在终端中运行以下命令：
yo reason-react-class List
这样我们就可以创建出一个名为 List 的 ReasonReact 组件。运行后后终端提示可以按提示进行输入
? Enter the list name (default: List): ? Are you using typed rhetoric? (y/N) ? Do you need a reducer? (y/N) ? Do you need an initial state? (y/N) ? Enter the initial state, it needs to match the type (default: listInitialState):
一般情况，我们输入组件名字，其他都选择默认值即可。在输入完毕后，回车即可生成组件。生成的目录如下列表所述：
-- -------------------- ---- -------
-
--- ----
--- -----
--- -------
--- ------------
--- --------------
--- ----------
--- ------------
--- --------------自定义模板并生成 React 组件
我们上面提到了，可以自定义组件生成的模板，这样可以生成我们定制化的组件。
下面，我们将会自己定义一个模板并生成一个 React 组件。
首先，我们需要在本地创建一个 template 目录，用于存储我们的自定义模板，这个目录可以在任意一个目录下，只需要确保它的路径即可。
mkdir -p ~/templates/reason-react-class/src/component
然后，我们创建一个名为 component 的模板，并在其中添加一些自己的模板代码，代码如下：
-- -------------------- ---- -------
----- ----- - -----------------
----- --- ------------- -- ------- --------------- -
-------- -
------ -
----------- - -- - ----- ----------------
--
-
-
-------------- - --- ------------- ---上面的代码中，<%= componentName %> 是一个模板变量，当生成器生成组件时，它会被替换为用户输入的组件名。在这个例子中，我们只是简单地输出了一句话，但是我们可以根据实际需求自己编写更加复杂的代码。
然后，在终端中，运行以下命令来生成我们的 React 组件：
yo reason-react-class --template=src/component MyComponent
这个时候，我们的 React 组件已经生成成功了。生成的目录如下所示：
-- -------------------- ---- -------
-
--- -------------
--- ----------
- --- -------------------
- --- ----
- --- ------------
--- ------------
--- --------------
--- --------
--- ------------我们可以在 MyComponent.js 文件中查看生成的代码，查看生成的代码是否符合我们的预期。
-- -------------------- ---- -------
----- ----- - -----------------
----- ----------- ------- --------------- -
-------- -
------ -
----------- - -- - ----- ----------------
--
-
-
-------------- - ------------探究生成器的实现细节
在上面的例子中，我们介绍了如何使用 generator-reason-react-class 来生成 React 组件。现在，我们将会探究一下它是如何实现的。
Yeoman 基础
首先，我们需要理解一下 Yeoman 的基础知识。Yeoman 是一个自动化代码生成工具，它可以帮助我们快速地生成出一些常用的代码文件，节省我们的开发时间。
在 Yeoman 中，我们通过编写 generator 来实现自定义代码生成。一个 generator 是一个 Node.js 模块，它通常会包含以下内容：
index.js：包含了 generator 的主要逻辑templates/：包含了一些模板文件package.json：包含了 generator 的元数据信息
当我们运行 yo <generator-name> 命令时，Yeoman 将会执行我们编写的 generator，并在执行过程中根据用户的输入和我们定义的模板文件来生成出相应的代码。
generator-reason-react-class 实现
在 generator-reason-react-class 中，我们通过继承 yeoman-generator 类来编写我们的 generator 代码。我们通过定义一些 Yeoman 的 generator 选项 来接受用户输入，例如组件名、是否使用 typed rhetoric、是否需要 reducer 等等；然后通过 EJS 模板引擎将我们定义好的代码与用户输入一起呈现在终端中。
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ----------------------------
----- --- - ---------------
----- ------ - ------------------
-------------- - ----- ------- --------- -
----------------- ----- -
----------- ------
------------------------------ -
----- ---- --------- -------
----- -------
--------- -----
---
---------------------- -
----- -------- --- ----- ----------
----- -------
-------- ----
---
-------------------------- -
----- -------- ---- -- -------- ---------
----- -------
-------- ----
---
------------------------------- -
----- -------- ---- -- -------- ------- -------
----- -------
-------- ----
---
--------------------------- -
----- ---- ------- -------
----- -------
-------- -------------------
---
-------------------
-
--------- -
----- - -------------- -------- ------------ ----------------- ------------ - - -------------
-------------------------------------------------
----------------
--------------------------------------
-------------------------------------------------------------------
- -------------- -------- ------------ ----------------- ------------ --
--
----------------
----------------------------------
------------------------------------------------------------------------
- -------------- -------- ----------------- ------------ --
--
----------------
-------------------------------------------
----------------------------------------------------------------------------------
- ------------- --
--
----------------
----------------------------------------
------------------------------------------------------------------------
- ------------- --
--
-
--其中，./src/${componentName}/__tests__/ 是生成器预设生成的目录路径，你可以按需修改。
结束语
通过本篇文章的学习，我们掌握了如何使用 generator-reason-react-class 这个工具来生成我们的 ReasonReact 组件，并且了解了一些它的实现细节。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590681e8991b448d65e8