Solid是一个高性能响应式UI构建库，它的响应机制比基于组件的库更加细化。如果说其它的框架将渲染的优化聚焦到组件上，那么Solid则是将渲染精确到了HTML元素上，其响应速度与直接使用Javascript实现的性能相差无几，据官方提供的数据显示，如果按照HTML元素渲染需要100个时间单位的话，那么Solid的渲染需要108个时间单位，Vue则需要154个时间单位，React则需要193个时间单位。Solid构建应用时与React有相似之处，但也有明显的不同之处，我们将通过本项目使用Solid从零开始构建一个Web应用。

创建开发环境

进行Solid应用开发时，你可以选择使用在线编程方式也可以选择本地开发方式，在线编程方式的优点是无需配置，打开页面既可以使用，它便于验证Solid特定的一个功能，但是，但是对于项目功能比较多的场景便不太适合。我们这个项目涉及到至少5个组件，因此，选择了在本地进行开发，Solid为我们提供了应用启动器，使用如下的命令创建一个Solid应用。

此命令运行完成之后，便会创建对应的项目，之后切换至gift目录，执行下面的两个命令

npm install将安装所有的依赖包，npm run dev用于启动创建的应用，默认情况下创建的应用采用了3000端口，使用http://localhost:3000访问刚刚创建的应用，接下来我们介绍下启动器提供的几个主要文件。

index.html文件

这个文件为应用的HTML文件，Solid在这个文件中选择一个HTML元素作为它的挂载元素，之后所有的渲染全部在这个挂载元素内进行。

图3中第12行代码定义了一个ID值为root的div元素，这个元素就是Solid所使用的挂载元素，它是如何进行挂载的呢？第14行代码定义了一个script元素，它的源指向了index.jsx文件，index.jsx文件中实现了将Solid组件挂载至root元素上。

index.jsx文件

index.jsx文件实现了Solid组件和HTML元素之间的“连接”功能。在这个文件中，它一方面引入了Solid的组件App，图4中第5行代码表示从当前目录下引入App组件；另一方面，它又从HTML文件中查询到ID为root的元素，之后，通过调用render方法将Solid的组件App在root元素内进行渲染操作。所有App组件使用的其它组件都可以通过Solid提供的响应机制进行页面渲染。需要特别注意的是：render函数的第一个参数为一个方法，而不是一个组件。如果提供的是一个组件App，那么Solid的响应机制是无法正常工作的，Solid使用函数作为参数的情况还很多，后续会陆续进行介绍。

图4中第4行代码引入了一个CSS样式文件index.css，这个文件是整个页面的全局样式，我们可以将一些公用的样式写在这个文件中，组件特有的样式则写在对应的组件内。

Index.css文件

这个文件定义了HTML文件的全局CSS，本项目中，页面的样式不是重点内容，我们不对其做过多介绍，提供的样式见表1：

App.jsx文件

此文件为这个应用的根组件，我们将自动生成的不相干代码内容删除掉，修改后的内容如下图5所示：

Solid的组件是一个函数，如图5中的App函数，这个函数返回了一个类似HTML的东西，它看上去很像HTML，但它并不是HTML，而是一种称为JSX的语言，它是一种对Javascript进行了扩展的语言，在Solid应用中，我们使用JSX语言来构建用户界面，这种语言通过转译器处理后会生成对应的HTML元素。如图5所示，App函数返回了一个内容为空的div元素，稍后我们会使用JSX语言创建其它的组件。

功能介绍

本项目实现了一个礼品发放功能的单页面应用，应用运行后页面显示为下图6的样子。应用中含有两个列表：左侧的礼品列表和右侧的人员列表。在左侧的礼品列表中还显示了当前礼品的数量，如果这个礼品的数目变为0了，那么，就将其从列表中剔除了；右侧列表显示的为未领取礼物的人员名称，当此人已经领取了礼品，那么这个人员也不显示在右侧列表中。领取礼品时需要同时选中一个礼品和一个人员，如果只选中其中一项，那么会出现提示信息，点击“领取”按钮，人员列表中就会减少一个人，同时礼品列表中也会减少礼品的数量。

组件划分

Solid也是基于组件进行开发界面的，我们将图6中的界面按照组件进行划分为以下组件，如图7所示：最外层黑色边框的表示App根组件，红色区域为礼品组件Gift，绿色区域为人员组件Person，蓝色区域为信息提示组件Info和黄色区域为领取组件Take。我们将按照这些组件逐个地进行实现，本文中我们仅仅实现静态的组件，即组件中数据全部是固定的JSX，之后通过数据来实现动态组件。

礼品列表组件

礼品列表组件名称为Gift。它包含了4项礼品内容，每一个礼品都含有名称和数量两个属性，我们创建一个名称为Gift函数，我们再次强调一下：Gift函数就是Gift组件，在Solid中组件就是一个函数。如图8所示

图8第5-18行代码表示一个列表，最外层使用div元素，这个div元素使用了style属性，它的写法与HTML中的style写法是不同的，通过使用大括号{}指定了一个Javascript对象item，也就是说，我们可以在JSX中嵌入Javascript对象，item对象的定义如下图9所示

图9中，我们通过将CSS样式的属性名作为item对象的属性名，将CSS的属性值作为对象的属性值，之后使用图8中的方法就实现了将这些样式全部作为div的内嵌样式使用了。这也是JSX强大的一个特性，它可以直接嵌入Javascript对象。

礼物列表项同样使用div元素表示，它与上一个div元素设置CSS样式的方式不同，礼物列表项div元素直接使用了index.css文件定义的gift类，代码中第6、9、12和15行代码都添加了gift类作为礼物列表项的样式。第9行代码与其它行代码相比多出一个selected类，它表示了当前选中的样式，以高亮色显示，同时添加短线边框。

人员列表组件

人员列表组件名称为Person，它与礼品列表的界面显示相差不多，最外层的列表div元素使用了item样式，内部人员列表项元素div使用.person样式，同样使用selected类表示选中状态，如下图10所示。

提示信息

提示信息组件的名称为Info，它返回一个div元素，使用了全局CSS样式info类，这个组件只有在选中礼品列表或人员列表中的一个列表项时才会出现，用于提示用户进行其它的选择，其它情况下不显示。

领取按钮

“领取”按钮组件的名称为Take，它返回一个a元素，使用了全局CSS样式button类，这个按钮只有在礼品和人员两列表项同时选中时才可以点击，其它状态下都是不可以点击的。

App组件

以上我们完成了四个组件的创建工作，JSX中组件的用法与普通的HTML元素的用法相同，但是每一个组件必须含有闭合标签，可以使用样式如</TAG>的闭合标签，如果标签没有任何内容，也可以简写为<TAG/>的闭合标签。根组件App使用了以上定义的组件，如下图13所示。

图13中，第66行代码使用了普通h1标签，第66、68行代码使用了样式对象styles中的App和container对象，在container样式中，我们将div元素的display属性设置为了flex，将Gift和Person组件设置为并排显示，在Gift和Person样式中设置各自的宽度占比为50%，第72行代码为信息显示组件，默认情况下通过样式设置样式属性visibility的值为hidden，即处于不显示状态，第73行代码为“领取”组件。完成这些组件之后，其页面的显示效果就是图1中的样子了。

本文介绍了Solid是如何使用组件的，以及组件是如何使用JSX进行创建的，在JSX中演示了两种设置样式的方法，到目前为止，Solid看上去与其它库（React）的用法很相似，它们都是用了JSX，这也是我们在上文中所说的二者的相似之处，但是，我们也强调了一点：Solid的render函数的第一个参数为函数，而不是组件。它们之间的不同之处将在后续文章中逐步展现。谢谢阅读，我们下一篇文章见。