什么是 hyperrender？
hyperrender 是一个轻量级的模版引擎，它使用类似 JSX 的语法来生成 HTML。相比于其他模版引擎，它的语言结构更加清晰简洁，并且支持插入 JavaScript 表达式。
安装 hyperrender
你可以通过 npm 安装 hyperrender：
$ npm install hyperrender
开始使用 hyperrender
简单示例
我们来看一个简单的示例，首先创建一个名为 index.js 的文件：
-- -------------------- ---- -------
------ ----------- ---- -------------
----- ---- - -
------ ------- --------
-------- ----- -- -------------
-
----- -------- - -- -- -
------ -
-----
---------------------
---------------------
------
-
-
----- ---- - ---------------------
-----------------这个示例中用到了 hyperrender 函数，它接收一个函数作为参数，这个函数返回一个类似 JSX 的对象，通过 hyperrender 函数，将对象转换为 HTML 格式字符串。运行 node index.js 命令，将会输出以下内容：
<div><h1>Hello, world!</h1><p>This is hyperrender!</p></div>
支持 JavaScript 表达式
hyperrender 也支持在模版中使用 JavaScript 表达式，示例如下：
-- -------------------- ---- -------
------ ----------- ---- -------------
----- ---- - -
----- --- -- -- -- --
-
----- -------- - -- -- -
------ -
----
------------------- -- -
--- --------------- -----------
---
-----
-
-
----- ---- - ---------------------
-----------------这个示例中, 我们使用了 JavaScript 的 map 函数遍历 data.list 数组并生成对应的 li 元素。运行 node index.js 命令，将会输出以下内容：
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
自定义组件
除了 HTML 元素，我们还可以自定义组件，以便在不同的项目中复用。示例如下：
-- -------------------- ---- ------- ------ ----------- ---- ------------- -- ---- ----- ------ - -- -------- -------- -- -- - ------- ------------------------------------- - -- ---- ----- -------- - -- -- - ------- ----------- -- ----------------------- ------------ - ----- ---- - --------------------- -----------------
这个示例中，我们定义了一个 Button 组件，它接收 onClick 和 children 两个参数作为属性，通过 props 对象进行传递。然后我们在模版中使用了这个组件，给它传递了 onClick 属性和 children 内容。运行 node index.js 命令，当我们点击按钮时，将会弹出一个警告框。
总结
本文介绍了 npm 包 hyperrender 的使用教程，其中包括了安装和使用方法、简单示例、支持 JavaScript 表达式以及自定义组件等内容。通过学习本文，你可以了解到 hyperrender 的基本使用方法，从而更快地上手开发项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055acb81e8991b448d8646