实践SolidJS
获得第一手资料，了解简单而强大的反应式前端 JavaScript 方法，该方法正迅速使 Solid 成为人们的最爱。
SolidJS是一种独特的反应式前端 JavaScript 方法。它提供了一套紧凑的反应式 "基元"，并利用这些基元来支持高阶功能。这听起来有点像AngularJS和它对ReactiveX的使用，但这是相当不同的体验。SolidJS给人的感觉更像是AlpineJS的简单性，但却提供了一套更为雄心勃勃的功能。
设置SolidJS
首先，设置一个简单的启动项目。在您的本地机器上，使用清单 1 中的命令来启动新的东西（这遵循 SolidJS 的文档）。
清单 1.创建一个新的 SolidJS 项目
> npx degit solidjs/templates/js my-app
现在您有一个简单的 SolidJS 应用程序正在运行。如果您进入 http://localhost:3000，您将看到登陆页面。
请注意，该开发服务器支持即时更新（包括热模块替换，HMR）。所以当你对文件进行修改时，它们会自动更新浏览器中显示的内容。
用createResource获取远程API
让我们从 Solid 的createResource 开始。这是在createSignal 上的一个简单层，它是 Solid 的反应式基元，处理与远程 API 的异步通信。我们将从这里开始，因为这个功能是Solid支持暂停/当前渲染的一个关键铰链，而且一开始它可能看起来有点晦涩难懂。
在某种程度上，createResource 是Solid架构的中间层。
在你的IDE中打开新创建的文件夹，并打开App.jsx文件。该文件通过调用 index.jsx 中 Solid 的render() 方法作为根节点加载。
进行我在清单2中注释的修改。
清单 2.修改 App.jsx
import logo from "./logo.svg";
清单 2 中的注释应该能让您了解这里发生了什么。这段代码的结果是输出一个JSON数组，其中包含一组随机的10个编程笑话。
用>For<进行迭代
现在，让我们拿着这个JSON，对它进行迭代，创造出更多有用的输出。
首先，将For 组件加入到导入文件中。
import { createResource, For } from "solid-js";
接下来，用清单3替换对JSON.stringify的调用。
清单3.遍历数组
<ul>
清单3让你看到了For 组件的运行情况。它与其他反应式框架相似。你告诉它要迭代什么集合（即jokes() ，记住这是一个方法调用，而不是一个引用），然后定义一个匿名函数，其参数是迭代变量joke 。
我们在这里用它来输出一个无序的列表，显示每个笑话的ID和设置。
在 SolidJS 中处理事件
接下来是查看每个笑话的提示语。为此，您将需要一个onClick 事件处理程序，它将显示一个包含笑料的警报。
清单 4 显示了如何添加该处理程序。
清单4：onClick处理程序
<li onClick={()=>{alert(joke.punchline)}}>
足够简单。清单4是非常典型的反应式框架。现在，当我点击 "程序员喜欢去哪里玩？我得到的答案是："Foo Bar"。这实在是太糟糕了，太好笑了。
用createSignal制作反应式变量
现在想象一下，你想增加在显示编程笑话和所有笑话之间进行切换的能力。远程API通过URL路径的倒数第二部分是否有 "编程 "来处理这个问题（.../jokes/programming/ten与.../jokes/ten）。
因此，让我们在页面的顶部添加一个复选框，让用户改变这一点。我们要做的第一件事是创建一个 "信号"。这是在SolidJS中最基本的反应式原素。它允许您指定一个变量、一个设置器和一个可选的默认值。该语法受到 React 中useState 语法的启发。
在createResource 调用的上方，添加这一行。
const [jokeType, setJokeType] = createSignal("");
这将创建一个名为jokeType 的新信号，初始值为空字符串。信号值被作为一个函数访问：jokeType() 。
现在，在main div的头部插入清单5中所示的复选框元素。
清单5.一个反应式复选框
Programming Only: <input type="checkbox" checked={jokeType()=="programming/"}
清单5大部分是正常的HTML。checked 和onInput 属性有Solid特定的内容。checked 使用一个标记来检查jokeType() 信号的值与"programming/" 。也就是说，如果jokeType 的值是"programming/" ，则该复选框被选中。
onInput 处理复选框上的输入事件。当它发生时，我们改变 的值，使它在空字符串和 之间交换。我们将在笑话提取器的URL中使用这个变化的值。jokeType "programming/"
在资源中使用信号
首先，您必须将信号作为一个参数传入对createResource 的调用。Solid很聪明地检测到这一点，并将反应性地将资源连接起来。对createResource 的新调用看起来像这样。
const [jokes] = createResource(jokeType, fetchJokes);
(感谢 Ryan Carniato 澄清了这一点）。
请注意，jokeType 是直接传递的（不是一个函数调用，而是函数本身）。这是因为实际的信号被传递给了createResource ，允许它是反应式的。
在清单6中可以看到新的笑话提取器函数。
清单6.带有信号参数的反应性资源
const fetchJokes = async (jokeType) => {
请注意，jokeType 信号在清单6的参数中是一个直接的变量。获取的URL利用了jokeType 的值。当信号通过复选框被改变时，Solid会注意到并自动重新获取笑话列表。
用createEffect计算的效果
反应式库包括将简单的反应式变量（如 SolidJS 中的createSignal ，或 React 中的useState ）包装成所谓的效果（如 React 中的useEffect ）的能力。Solid 为这一目的提供了createEffect 。中心思想是，您使用一个效果来处理非纯粹的行动（又称，副作用）。这样的动作通常意味着直接修改UI的某些部分，作为它们所依赖的变量变化的结果。
效果一开始是有点难理解的。一个好的思考方式是，一个效果将做一些事情，而不是仅仅响应一个值的变化。
比方说，你想在用户改变笑话类型时进行记录。这是一个为了传达本质而设计的例子。清单7显示了你将如何完成它。
清单7. createEffect例子
createEffect(() => {
现在控制台将随着信号的变化而输出。请注意，当isgnal被设置时，效果就开始执行了。
要预测 JavaScript 世界的发展方向是很困难的，但很明显，SolidJS 正在推动其发展，追求有前途的线索并探索新的领域。如果对SolidJS的兴趣继续以目前的速度增长，它将在短期内成为该领域的主要参与者。
