备忘单

Hello world 组件

⚡️ Qwik

export const HelloWorld = component$(() => {
  return <div>Hello world</div>;
});

⚛️ React

export function HelloWorld() {
  return <div>Hello world</div>;
};

带点击事件的按钮

⚡️ Qwik

export const Button = component$(() => {
  return <button onClick$={() => console.log('click')}>Click me</button>;
});

⚛️ React

export function Button() {
  return <button onClick={() => console.log('click')}>Click me</button>;
};

声明局部变量

⚡️ Qwik

export const LocalStateExample = component$(() => {
  const state = useStore({
    value: 0,
  });
  return <div>Value is: {state.value}</div>;
});

⚛️ React

export function UseStateExample() {
  const [value, setValue] = useState(0);
  return <div>Value is: {value}</div>;
};

累加器组件

⚡️ Qwik

export const Counter = component$(() => {
  const state = useStore({
    count: 0,
  });
  return (
    <>
      <div>Value is: {state.count}</div>
      <button onClick$={() => state.count++}>Increment</button>
    </>
  );
});

⚛️ React

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div>Value is: {count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
};

创建一个每秒递增的时钟

⚡️ Qwik

export const Clock = component$(() => {
  const state = useStore({
    seconds: 0,
  });
  useClientEffect$(() => {
    const interval = setInterval(() => {
      state.seconds++;
    }, 1000);
    return () => clearInterval(interval);
  });

  return <div>Seconds: {state.seconds}</div>;
});

⚛️ React

export function Clock() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  });
  return <div>Seconds: {seconds}</div>;
};

每次状态改变时执行一个 fetch 请求

⚡️ Qwik

export const Fetch = component$(() => {
  const state = useStore({
    url: 'https://api.github.com/repos/qwikstart/qwikstart-docs',
    responseJson: undefined,
  });

  useWatch$(async ({ track }) => {
    track(() => state.url);
    const res = await fetch(state.url);
    const json = await res.json();
    state.responseJson = json;
  });

  return (
    <>
      <div>{state.responseJson?.name}</div>
      <input name="url" onInput$={(ev) => (state.url = ev.target.value)} />
    </>
  );
});

⚛️ React

export function Fetch() {
  const [url, setUrl] = useState('https://api.github.com/repos/qwikstart/qwikstart-docs');
  const [responseJson, setResponseJson] = useState(undefined);
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((json) => setResponseJson(json));
  }, [url]);
  return (
    <>
      <div>{responseJson?.name}</div>
      <input name="url" onInput={(ev) => setUrl(ev.target.value)} />
    </>
  );
};

声明context 并消费它

⚡️ Qwik

export const MyContext = createContext('my-context');

export const Parent = component$(() => {
  const state = useStore({
    message: 'some example value',
  });
  useContextProvider(MyContext, state);
  return (
    <>
      <Child />
    </>
  );
});

export const Child = component$(() => {
  const state = useContext(MyContext);
  return <span>{state.message}</span>;
});

⚛️ React

export const MyContext = createContext({ message: "some example value" });

export default function Parent() {
  return (
    <MyContext.Provider value={{ message: "updated example value" }}>
      <Child />
    </MyContext.Provider>
  );
}

export const Child = () => {
  const value = useContext(MyContext);
  return <span>{value.message}</span>;
};

防抖的input

⚡️ Qwik

export const DebouncedInput = component$(() => {

  const state = useStore({
    value: '',
    debouncedValue: '',
  });

  useWatch$(({ track }) => {
    track(() => state.value);
    const debounced = setTimeout(() => {
      state.debouncedValue = state.value;
    }, 1000);
    return () => clearTimeout(debounced);
  });

  return (
    <>
      <input value={state.value} onInput$={(e) => (state.value = e.target.value)} />
      <span>{state.debouncedValue}</span>
    </>
  );
});

⚛️ React

export const DebouncedInput = () => {
  const [value, setValue] = useState("");
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const debounced = setTimeout(() => setDebouncedValue(value), 1000);

    return () => {
      clearTimeout(debounced);
    };
  }, [value]);

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <span>{debouncedValue}</span>
    </>
  );
};

每次单击按钮时随机更改背景颜色

⚡️ Qwik

export const DynamicBackground = component$(() => {

  const state = useStore({
    red: 0,
    green: 0,
    blue: 0,
  });

  return (
    <div style={{
      background: `rgb(${state.red}, ${state.green}, ${state.blue})`
    }}>
      <button onClick$={() => {
        state.red = Math.random() * 256;
        state.green = Math.random() * 256;
        state.blue = Math.random() * 256;
      }}>
        Change background
      </button>
    </div>
  );
});

⚛️ React

export function DynamicBackground() {
  const [red, setRed] = useState(0);
  const [green, setGreen] = useState(0);
  const [blue, setBlue] = useState(0);
  return (
    <div style={{
      background: `rgb(${red}, ${green}, ${blue})`
    }}>
      <button onClick={() => {
        setRed(Math.random() * 256);
        setGreen(Math.random() * 256);
        setBlue(Math.random() * 256);
      }}>
        Change background
      </button>
    </div>
  );
};

创建一个渲染总统列表的组件

⚡️ Qwik

export const Presidents = component$(() => {
  const presidents = [
    { name: 'George Washington', years: '1789-1797' },
    { name: 'John Adams', years: '1797-1801' },
    { name: 'Thomas Jefferson', years: '1801-1809' },
    { name: 'James Madison', years: '1809-1817' },
    { name: 'James Monroe', years: '1817-1825' },
    { name: 'John Quincy Adams', years: '1825-1829' },
    { name: 'Andrew Jackson', years: '1829-1837' },
    { name: 'Martin Van Buren', years: '1837-1841' },
    { name: 'William Henry Harrison', years: '1841-1841' },
    { name: 'John Tyler', years: '1841-1845' },
    { name: 'James K. Polk', years: '1845-1849' },
    { name: 'Zachary Taylor', years: '1849-1850' },
    { name: 'Millard Fillmore', years: '1850-1853' },
    { name: 'Franklin Pierce', years: '1853-1857' },
    { name: 'James Buchanan', years: '1857-1861' },
    { name: 'Abraham Lincoln', years: '1861-1865' },
    { name: 'Andrew Johnson', years: '1865-1869' },
    { name: 'Ulysses S. Grant', years: '1869-1877' },
    { name: 'Rutherford B. Hayes', years: '1877-1881' },
    { name: 'James A. Garfield', years: '1881-1881' },
    { name: 'Chester A. Arthur', years: '1881-1885' },
    { name: 'Grover Cleveland', years: '1885-1889' },
  ];
  return (
    <ul>
      {presidents.map((president) => (
        <li>
          {president.name} ({president.years})
        </li>
      ))}
    </ul>
  );
});

⚛️ React

export function Presidents() {
  const presidents = [
    { name: 'George Washington', years: '1789-1797' },
    { name: 'John Adams', years: '1797-1801' },
    { name: 'Thomas Jefferson', years: '1801-1809' },
    { name: 'James Madison', years: '1809-1817' },
    { name: 'James Monroe', years: '1817-1825' },
    { name: 'John Quincy Adams', years: '1825-1829' },
    { name: 'Andrew Jackson', years: '1829-1837' },
    { name: 'Martin Van Buren', years: '1837-1841' },
    { name: 'William Henry Harrison', years: '1841-1841' },
    { name: 'John Tyler', years: '1841-1845' },
    { name: 'James K. Polk', years: '1845-1849' },
    { name: 'Zachary Taylor', years: '1849-1850' },
    { name: 'Millard Fillmore', years: '1850-1853' },
    { name: 'Franklin Pierce', years: '1853-1857' },
    { name: 'James Buchanan', years: '1857-1861' },
    { name: 'Abraham Lincoln', years: '1861-1865' },
    { name: 'Andrew Johnson', years: '1865-1869' },
    { name: 'Ulysses S. Grant', years: '1869-1877' },
    { name: 'Rutherford B. Hayes', years: '1877-1881' },
    { name: 'James A. Garfield', years: '1881-1881' },
    { name: 'Chester A. Arthur', years: '1881-1885' },
    { name: 'Grover Cleveland', years: '1885-1889' },
  ];
  return (
    <ul>
      {presidents.map((president) => (
        <li key={president.name + president.years}>
          {president.name} ({president.years})
        </li>
      ))}
    </ul>
  );
};