前言

在 Day03 了解怎麼建立自己的最簡單的 component 後，我們開始深入了解如何使用 solidjs 這框架帶給我們的基礎方法，

createSignal

在了解 createSignal的概念前，我們先了解的是如何把我們的文字渲染到畫面上，並且顯示

• 我們在新專案的 App.tsx 建立一個 const name = 'hello world'，並且把 name 渲染到我們的 html元件上 (以下範例)

import type { Component } from 'solid-js';

const App: Component = () => {
  const name = 'hello world';
  return (
    <div>
      {name}
    </div>
  );
};

export default App;

這時候我門執行 pnpm dev 會在瀏覽器看到我們想要的結果

• 那問題來了，我們要做一個按鈕，並且點擊後增加該數字，並且每次增加可以立即渲染到畫面上我們該怎做呢？
  如果我們不用 純 typescript 操作 document 的方法，那我們可以用 createSignal 去實現。

  • 首先我們要引入 createSignal

import { createSignal } from 'solid-js';

- 再來我們要使用它，使用方法如下

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

解釋: 這裡我們定義一個參數為 count 且預設為 0 ，其中 count 是用來 取得(get)的方法
setCount 是用來指派(set)的方法，這個方法類似於 react 的 useState
但這裡有個地方不太一樣的就是 count 在 solidjs 是一個 方法，而在 react 的 useState 是個參數，

所以完整的程式碼會長這樣

import type { Component } from 'solid-js';
import { createSignal } from 'solid-js';

const App: Component = () => {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count() + 1);
        }}
        class="px-3 py-2 rounded-xl bg-blue-300"
      >
        click To add 1
      </button>
      {count}
    </div>
  );
};

export default App;