Ember Octane vs Solid.js - JavaScript 框架语法对比

响应式

声明状态

Ember Octane

<h1>你好 {{this.name}}</h1>

Solid.js

import { createSignal } from "solid-js";

export default function Name() {
  const [name] = createSignal("张三");

  return <h1>你好 {name()}</h1>;
}

更新状态

Ember Octane

<h1>你好 {{this.name}}</h1>

Solid.js

import { createSignal } from "solid-js";

export default function Name() {
  const [name, setName] = createSignal("张三");
  setName("李四");

  return <h1>你好 {name()}</h1>;
}

计算属性

Ember Octane

<div>{{this.doubleCount}}</div>

Solid.js

import { createSignal } from "solid-js";

export default function DoubleCount() {
  const [count] = createSignal(10);
  const doubleCount = () => count() * 2;

  return <div>{doubleCount()}</div>;
}

模板语法

最简模板

Ember Octane

<h1>你好，世界</h1>

Solid.js

export default function HelloWorld() {
  return <h1>你好，世界</h1>;
}

样式

Ember Octane

/* using: https://github.com/salsify/ember-css-modules */
.title {
  color: red;
}

Solid.js

import "./style.css";

export default function CssStyle() {
  return (
    <>
      <h1 class="title">我是红色的</h1>
      <button style={{ "font-size": "10rem" }}>我是一个按钮</button>
    </>
  );
}

DOM循环

Ember Octane

<ul>
  {{#each (array "红" "绿" "蓝") as |color|}}
    <li>{{color}}</li>
  {{/each}}
</ul>

Solid.js

import { For } from "solid-js";

export default function Colors() {
  const colors = ["红", "绿", "蓝"];

  return (
    <ul>
      <For each={colors}>{(color) => <li>{color}</li>}</For>
    </ul>
  );
}

点击事件

Ember Octane

<p>计数器: {{this.count}}</p>
<button {{on "click" this.incrementCount}}>+1</button>

Solid.js

import { createSignal } from "solid-js";

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

  function incrementCount() {
    setCount(count() + 1);
  }

  return (
    <>
      <p>计数器: {count()}</p>
      <button onClick={incrementCount}>+1</button>
    </>
  );
}

DOM引用

Ember Octane

<input {{this.autofocus}} />

Solid.js

import { onMount } from "solid-js";

export default function InputFocused() {
  let inputElement;

  onMount(() => inputElement.focus());

  return <input ref={inputElement} type="text" />;
}

条件渲染

Ember Octane

<button {{on "click" this.nextLight}}>下一个灯</button>
<p>现在亮着的是: {{this.light}}</p>
<p>
  你应该
  {{#if (eq this.light "红灯")}}
    停下
  {{else if (eq this.light "黄灯")}}
    慢行
  {{else if (eq this.light "绿灯")}}
    赶紧走
  {{/if}}
</p>

Solid.js

import { createSignal, Switch, Match } from "solid-js";

const TRAFFIC_LIGHTS = ["红灯", "黄灯", "绿灯"];

export default function TrafficLight() {
  const [lightIndex, setLightIndex] = createSignal(0);

  const light = () => TRAFFIC_LIGHTS[lightIndex()];

  function nextLight() {
    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
  }

  return (
    <>
      <button onClick={nextLight}>下一个灯</button>
      <p>现在亮着的是: {light()}</p>
      <p>
        你应该
        <Switch>
          <Match when={light() === "红灯"}>
            <span>停下</span>
          </Match>
          <Match when={light() === "黄灯"}>
            <span>慢行</span>
          </Match>
          <Match when={light() === "绿灯"}>
            <span>赶紧走</span>
          </Match>
        </Switch>
      </p>
    </>
  );
}

生命周期

组件加载时

Ember Octane

<p>页面标题: {{(this.pageTitle)}}</p>

Solid.js

import { createSignal, onMount } from "solid-js";

export default function PageTitle() {
  const [pageTitle, setPageTitle] = createSignal("");

  onMount(() => {
    setPageTitle(document.title);
  });

  return <p>页面标题: {pageTitle()}</p>;
}

组件卸载时

Ember Octane

<p>当前时间: {{this.time}}</p>

Solid.js

import { createSignal, onCleanup } from "solid-js";

export default function Time() {
  const [time, setTime] = createSignal(new Date().toLocaleTimeString());

  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString());
  }, 1000);

  onCleanup(() => clearInterval(timer));

  return <p>当前时间: {time()}</p>;
}

组件组合

组件Props传参

Ember Octane

<UserProfile
  @name="张三"
  @age={{20}}
  @favouriteColors={{array "green" "blue" "red"}}
  @isAvailable={{true}}
/>

Solid.js

import UserProfile from "./UserProfile.jsx";

export default function App() {
  return (
    <UserProfile
      name="张三"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
}

向父组件emit事件

Ember Octane

<p>你快乐吗?</p>
<AnswerButton @onYes={{this.handleYes}} @onNo={{this.handleNo}} />
<p style="font-size: 50px;">{{if this.isHappy "😀" "😥"}}</p>

Solid.js

import { createSignal } from "solid-js";
import AnswerButton from "./AnswerButton.jsx";

export default function App() {
  const [isHappy, setIsHappy] = createSignal(true);

  function onAnswerNo() {
    setIsHappy(false);
  }

  function onAnswerYes() {
    setIsHappy(true);
  }

  return (
    <>
      <p>你快乐吗?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ "font-size": "50px" }}>{isHappy() ? "😀" : "😥"}</p>
    </>
  );
}

slot插槽

Ember Octane

<FunnyButton> 点我! </FunnyButton>

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return <FunnyButton>点我!</FunnyButton>;
}

slot插槽内容

Ember Octane

<FunnyButton />
<FunnyButton>这是传到slot的内容!</FunnyButton>

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return (
    <>
      <FunnyButton />
      <FunnyButton>这是传到slot的内容!</FunnyButton>
    </>
  );
}

上下文

Ember Octane

<UserProfile />

Solid.js

import { createSignal } from "solid-js";

import { UserContext } from "./UserContext";
import UserProfile from "./UserProfile";

export default function App() {
  const [user, setUser] = createSignal({
    id: 1,
    username: "abcdefg",
    email: "[email protected]",
  });

  function updateUsername(newUsername) {
    setUser({ ...user(), username: newUsername });
  }

  return (
    <>
      <h1>欢迎回来, {user().username}</h1>
      <UserContext.Provider value={[user, updateUsername]}>
        <UserProfile />
      </UserContext.Provider>
    </>
  );
}

表单输入

输入框

Ember Octane

<p>{{this.text}}</p>
<input value={{this.text}} {{on "input" this.handleInput}} />

Solid.js

import { createSignal } from "solid-js";

export default function InputHello() {
  const [text, setText] = createSignal("你好世界");

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <>
      <p>{text()}</p>
      <input value={text()} onInput={handleChange} />
    </>
  );
}

复选框

Ember Octane

<input
  id="is-available"
  type="checkbox"
  checked={{this.isAvailable}}
  {{on "change" this.handleChange}}
/>
<label for="is-available">这是一个checkbox</label>

Solid.js

import { createSignal } from "solid-js";

export default function IsAvailable() {
  const [isAvailable, setIsAvailable] = createSignal(false);

  function handleChange() {
    setIsAvailable((previousValue) => !previousValue);
  }

  return (
    <>
      <input
        id="is-available"
        type="checkbox"
        checked={isAvailable()}
        onChange={handleChange}
      />
      <label for="is-available">这是一个checkbox</label>
    </>
  );
}

单选框

Ember Octane

<div>你选择了: {{this.picked}}</div>

<input
  id="blue-pill"
  type="radio"
  value="blue"
  checked={{eq this.picked "blue"}}
  {{on "change" this.handleChange}}
/>
<label htmlFor="blue-pill">蓝色</label>

<input
  id="red-pill"
  type="radio"
  value="red"
  checked={{eq this.picked "red"}}
  {{on "change" this.handleChange}}
/>
<label htmlFor="red-pill">红色</label>

Solid.js

import { createSignal } from "solid-js";

export default function PickPill() {
  const [picked, setPicked] = createSignal("red");

  function handleChange(event) {
    setPicked(event.target.value);
  }

  return (
    <>
      <div>你选择了: {picked()}</div>
      <input
        id="blue-pill"
        checked={picked() === "blue"}
        type="radio"
        value="blue"
        onChange={handleChange}
      />
      <label for="blue-pill">蓝色</label>

      <input
        id="red-pill"
        checked={picked() === "red"}
        type="radio"
        value="red"
        onChange={handleChange}
      />
      <label for="red-pill">红色</label>
    </>
  );
}

选择器

Ember Octane

<select {{on "change" this.select}}>
  {{#each this.colors as |color|}}
    <option
      value={{color.id}}
      disabled={{color.isDisabled}}
      selected={{eq color.id this.selectedColorId}}
    >
      {{color.text}}
    </option>
  {{/each}}
</select>

Solid.js

import { createSignal, For } from "solid-js";

const colors = [
  { id: 1, text: "红" },
  { id: 2, text: "蓝" },
  { id: 3, text: "绿" },
  { id: 4, text: "灰", isDisabled: true },
];

export default function ColorSelect() {
  const [selectedColorId, setSelectedColorId] = createSignal(2);

  function handleChange(event) {
    setSelectedColorId(event.target.value);
  }

  return (
    <select value={selectedColorId()} onChange={handleChange}>
      <For each={colors}>
        {(color) => (
          <option value={color.id} disabled={color.isDisabled}>
            {color.text}
          </option>
        )}
      </For>
    </select>
  );
}

Web应用特性

渲染应用

Ember Octane

缺少代码片段帮助我们改进 Component Party Component Party 标志

在 Github 上贡献

Solid.js

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.jsx"></script>
  </body>
</html>

fetch获取数据

Ember Octane

{{#let (this.fetchUsers) as |request|}}
  {{#if request.isLoading}}

    <p>正在获取用户信息……</p>

  {{else if request.error}}

    <p>获取用户信息出错</p>

  {{else}}

    <ul>
      {{#each request.users as |user|}}
        <li>
          <img src={{user.picture.thumbnail}} alt="user" />
          <p>{{user.name.first}} {{user.name.last}}</p>
        </li>
      {{/each}}
    </ul>

  {{/if}}
{{/let}}

Solid.js

import { createResource, For, Switch, Match } from "solid-js";

async function fetchUsers() {
  return (await fetch("https://randomuser.me/api/?results=3")).json();
}

export default function App() {
  const [data] = createResource(fetchUsers);
  const users = () => data()?.results;

  return (
    <Switch>
      <Match when={data.loading}>
        <p>正在获取用户信息……</p>
      </Match>
      <Match when={data.error}>
        <p>获取用户信息出错</p>
      </Match>
      <Match when={users()}>
        <ul>
          <For each={users()}>
            {(user) => (
              <li>
                <img src={user.picture.thumbnail} alt="user" />
                <p>
                  {user.name.first} {user.name.last}
                </p>
              </li>
            )}
          </For>
        </ul>
      </Match>
    </Switch>
  );
}

响应式 #

声明状态 #

Ember Octane

Solid.js

更新状态 #

Ember Octane

Solid.js

计算属性 #

Ember Octane

Solid.js

模板语法 #

最简模板 #

Ember Octane

Solid.js

样式 #

Ember Octane

Solid.js

DOM循环 #

Ember Octane

Solid.js

点击事件 #

Ember Octane

Solid.js

DOM引用 #

Ember Octane

Solid.js

条件渲染 #

Ember Octane

Solid.js

生命周期 #

组件加载时 #

Ember Octane

Solid.js

组件卸载时 #

Ember Octane

Solid.js

组件组合 #

组件Props传参 #

Ember Octane

Solid.js

向父组件emit事件 #

Ember Octane

Solid.js

slot插槽 #

Ember Octane

Solid.js

slot插槽内容 #

Ember Octane

Solid.js

上下文 #

Ember Octane

Solid.js

表单输入 #

输入框 #

Ember Octane

Solid.js

复选框 #

Ember Octane

Solid.js

单选框 #

Ember Octane

Solid.js

选择器 #

Ember Octane

Solid.js

Web应用特性 #

渲染应用 #

Ember Octane

Solid.js

fetch获取数据 #

Ember Octane

Solid.js

响应式

声明状态

更新状态

计算属性

模板语法

最简模板

样式

DOM循环

点击事件

DOM引用

条件渲染

生命周期

组件加载时

组件卸载时

组件组合

组件Props传参

向父组件emit事件

slot插槽

slot插槽内容

上下文

表单输入

输入框

复选框

单选框

选择器

Web应用特性

渲染应用

fetch获取数据