Solid-用于构建用户界面的声明性JavaScript库

Solid是用于创建用户界面的声明性Javascript库。它不使用虚拟DOM。相反，它选择将模板编译为实际的DOM节点，并将更新包装在细粒度的反应中。这样，当您的状态仅更新依赖于它的代码时，就会运行。

快地!。性能与优化的、令人痛苦的、命令式的普通DOM代码几乎没有区别。请参阅关于JS框架基准的实体。

支持JSX、片段、上下文、门户、悬念、SSR、错误边界和异步渲染等现代功能。

从"；solid-js/dom"；；const HelloMessage=props=>；<；div>；Hello{pros.name}<；/div>；；Render(()=>；<；HelloMessage name="；Taylor"；/>；，document导入{Render}。getElementById("；hello-Example"；)；

简单的组件只是一个接受属性的函数。Solid使用呈现函数来创建应用程序的反应式挂载点。

从"；solid-js/dom"；；const_tmpl$=template(`<；div>；Hello<；/div>；`)；const HelloMessage=props=>；{const_el$=_tmpl$]导入{Render，Template，Insert，createComponent}。cloneNode(True)；插入(_el$，()=>；道具。name，null)；return_el$；}；Render(()=>；createComponent(HelloMessage，{name："；Taylor"；})，document。getElementById("；hello-Example"；)；

那个_el$是一个真正的div元素，pros.name(在本例中是Taylor)被附加到它的子节点。注意，pros.name包装在一个函数中。这是因为这是该组件中将再次执行的唯一部分。即使名称从外部更新，也只会重新计算该表达式。编译器优化初始呈现，运行时优化更新。这是两全其美的。

或者，您可以在自己的项目中安装依赖项。要将实体与JSX一起使用(推荐)，请运行以下命令：

Solid的渲染由DOM表达式库完成。这个库为像Solid这样的细粒度库提供了一个通用的优化运行时，可以使用许多不同的渲染API。最佳选择是将JSX预编译与Babel插件JSX DOM表达式结合使用，以提供最小的代码大小、最干净的语法和最高性能的代码。编译器将JSX转换为本机DOM元素指令，并在反应计算中包装动态表达式。

最简单的设置方法是将babel-preset-solid添加到您的.babelrc中，或将Babel配置添加到webpack，或ROLLUP：

请记住，即使语法几乎相同，Solid的JSX和Reaction这样的库的工作方式也有很大的不同。有关更多信息，请参阅JSX呈现。

或者，在非编译环境中，您可以使用标记模板文字、LIT DOM表达式，甚至将HyperScript与Hyper DOM表达式一起使用。

Solid的数据管理建立在一组灵活的反应性原语之上。类似于Reaction Hooks，不同的是，它们独立地负责所有的更新，而不是将拥有的组件的更改列入白名单。

固态原语可以说是它最强大和最独特的原语。通过使用代理和显式设置器，它提供了对不可变接口的控制和可变接口的性能。setter支持多种形式，但要开始使用对象设置和更新状态。

从"；Solid-js"；导入{createState，onCleanup}；const CountingComponent=()=>；{const[state，setState]=createState({count：0})；const间隔=setInterval(()=>；setState({count：stat.。计数器+1})，1000)；onCleanup(()=>；clearInterval(Interval))；return<；div>；{stat.。计数器}<；/div>；；}；

const[state，setState]=createState({user：{firstName："；jack"；，lastName："；smith"；}})createEffect(()=>；setState({displayName：`${state.。用户。FirstName}${state。用户。lastName}`})；控制台。日志(状态。displayName)；//杰克·史密斯setState('；用户'；，{FirstName："；Jacob"；})；控制台。日志(状态。DisplayName)；//雅各布·史密斯

每当任何依赖项更改时，State值都会立即更新。每个setState语句将与应用的所有更改同步通知订阅方。这意味着您可以依赖于在下一行上设置的值。

Solid State还公开了与setState一起使用的协调方法，该方法进行深度差异，以允许与Redux、Apollo(GraphQL)或RxJS等不变存储技术自动有效地交互。

并查看下面的文档、示例和文章以更熟悉Solid。

细致入微地思考：SolidJS的性能为何如此出色？从头到尾看看是什么让SolidJS如此快速。

Solid与JavaScript框架的RealWorld演示比较Solid在更大的应用程序中表现如何？

设计SolidJS：JSX为什么虚拟DOM诞生的语法也是反应式UI库的最佳语法呢？

设计SolidJS：不变性反应性状态管理是否既是不可变的，又是性能最好的？

我们如何编写最快的JavaScript UI框架，多么坚实，超过了JS框架基准。

UI组件的实际成本不同UI库中组件的成本比较。

渲染所有实体渲染器与世界上最快的库的DOM比较的最快方法。

Solid在其V1.0.0版本中功能基本齐全。下一个版本将主要是在稳定的道路上进行错误修复和API调整。