Solidjs 官网链接

什么是 Solidjs

Solid 是一个用于制作交互式 Web 应用程序的 JavaScript 框架

import { render } from 'solid-js/web';

function HelloWorld() {
  return <div>Hello World!</div>;
}

render(() => <HelloWorld />, document.getElementById('app'))

在线预览

HTML 放在 JS 中融合的写法，称为 JSX 一种类 HTML 语法，文件后缀名 .tsx 感觉到处都是方法

注意事项

1. JSX 没有 void 元素，即要有闭合标签如 < br />
2. JSX 必须返回单个 Element，例如

   <>
   <h1>Title</h1>
   <p>Some Text</p>
   </>
   

3. JSX 不支持 HTML 注释或特殊标签

Signal 响应式对象

createSignal 方法用来声明一个响应式对象，它返回一个数组，一个是 getter，一个是 setter ，可自己命名

{ } 用来获取响应式数据，以下实例表示每秒加一

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter() {
    // 声明一个 count 的响应式对象，初值为 0
  const [count, setCount] = createSignal(0);

    // count() 获取当前 count 的值
    // setCount() 方法修改 count 的值
  setInterval(() => setCount(count() + 1), 1000);

  return <div>Count: {count()}</div>;
}

render(() => <Counter />, document.getElementById('app'));

在线预览

Effect 监听对象

当监听的响应式对象发生改变就会触发方法

import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);

  // 监听 count 对象，变化就输出
  createEffect(() => {
    console.log("The count is now", count());
  });

    // button 按钮每点击 count 值加一
  return <button onClick={() => setCount(count() + 1)}>Click Me</button>;
}

render(() => <Counter />, document.getElementById('app'));

在线预览

Memo 计算属性

使用 Memo 方法可以存储和访问最后一个缓存的值，而无需重新进行求值，直到它们的依赖关系发生变化才重新求值

这是没有使用 Memo 的例子，每获取 doubleCount 的值都会执行一次

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

    // 返回 count * 2 的值
  const doubleCount = () => {
    console.log("doubleCount");
    return count() * 2;
  };

  // button 按钮每点击 count 值加一
  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Click Me {doubleCount()}</button>
      <p>{doubleCount()}</p>
    </>
  );
}

render(() => <Counter />, document.getElementById("app"));

在线预览

使用 Memo 时，只要 count 不变，doubleCount 只执行一次，即保存了最后一个 doubleCount 的值

import { render } from "solid-js/web";
import { createSignal, createMemo } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  const doubleCount = createMemo(() => {
    console.log("doubleCount");
    return count() * 2;
  });

  // button 按钮每点击 count 值加一
  return (
    <>
      <button onClick={() => setCount(count() + 1)}>Click Me {doubleCount()}</button>
      <p>{doubleCount()}</p>
    </>
  );
}

render(() => <Counter />, document.getElementById("app"));

在线预览

Show 控制显示元素

根据条件来控制显示的元素

<Show
    // 相当于 when(条件语句)
      when={loggedIn()} 

      // fallback 相当于 else，即 loggedIn() 为 false 显示
      fallback={<button onClick={toggle}>Log in</button>}
>
        // 当loggedIn() 为 true 则显示
      <button onClick={toggle}>Log out</button> 
</Show>

完整实例

import { render } from 'solid-js/web';
import { createSignal, Show } from 'solid-js';

function App() {
  const [loggedIn, setLoggedIn] = createSignal(false);
  const toggle = () => setLoggedIn(!loggedIn())

  return (
    <Show
      when={loggedIn()}
      fallback={<button onClick={toggle}>Log in</button>}
    >
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}

render(() => <App />, document.getElementById('app'))

在线预览