【SolidJs】仅次于原生JS的超级性能！SolidJs框架教程【中】

import { render } from "solid-js/web";
import { createSignal, For } from "solid-js";
import ColoredList from "./colored-list";
function App() {
  const [color, setColor] = createSignal("red");
  const [persons] = createSignal(["Alice", "Bob", "Jack"])
  return <>
    <ColoredList color={color()}>
      <For each={persons()}>{item => <div style={{color: color()}}>{item}</div>}</For>
    </ColoredList>
    <button onClick={() => setColor("green")}>Set Color</button>
  </>;
}
render(() => <App />, document.getElementById('app'));
复制代码

import { createEffect, children } from 'solid-js'
export default function ColorList(props) {
    const c = children(() => props.children) // 处理children
    createEffect(() => c().forEach(item => item.style.color = props.color)) // 监听props.color并修改children的颜色
    return <>{c()}</>
}
复制代码

import { render } from "solid-js/web";
import { createStore } from "solid-js/store";
const App = () => {
  const [store, setStore] = createStore({ username: "Alice" });
  console.log("store -----> ", store); // "store -----> " {"username": "Alice"}
  const toggleUsername = (username) => {
    console.log(username);
    setStore("username", (name) => {
      console.log("store.name ----->", name); // "store.name ----->" "Alice"
      return username;
    });
  };
  return (
    <>
      <div>{store.username}</div>
      <button onClick={[toggleUsername, "bob"]}>setStore username</button>
    </>
  );
};
render(App, document.getElementById("app"));
复制代码

const toggleUsername = (username) => {
    setStore(
        'username',
        produce((name) => username)
    )
}
复制代码

import { render } from 'solid-js/web'
import Nested from './nested'
import { CounterProvider } from './counter'
function App() {
    return <>
        <h1>Welcome</h1>
        <Nested />
    </>
}
render(() => {
    <CounterProvider count={1}> <App /> </CounterProvider>,
    document.getElementById('app')
})
复制代码

import { useCounter } from './counter.tsx'
const [count, {invrement,decrement}] = useCounter()
export default function Nested() {
    return (
        <>
            <div>0</div>
            <button>+</button>
            <button>-</button>
        </>
    )
}
复制代码

import { createSignal, createContext, useContext } from 'solid-js'
const CounterContext = createContext()
export function CounterProvider(props) {
    const [count, setCount] = createSignal(props.count || 0),
          store = [
              count,
              {
                  invrement() { setCount(c => c + 1) },
                  decrement() { setCount(c => c - 1) }
              },
          ]
    return (
        <CounterContext.Provider value={store}>{props.children}</CounterContext.Provider>
    )
}
export function useCounter() { return useCountext(CounterContext)}
复制代码

import { render } from "solid-js/web";
import { lazy } from "solid-js";
const Greeting = lazy(() => import("./greeting"))
function App() {
  return (
    <>
      <h1>Welcome</h1>
      <Greeting name="Jake" />
    </>
  );
}
render(() => <App />, document.getElementById("app"));