渲染(Render)和提交(Commit)

组件展示在页面之前，须有React 渲染 (Render)。可以如此想象这个场景，组件好比是厨房里的厨师，负责把佐料做成菜品。React 好比服务员，接受客户的订单，并且把菜品端到客户。请求并服务UI的过程分为三步：

1. 触发(Triggering) 渲染(a render)，将用餐需求送给厨房。
2. 渲染(Rendering)组件，在厨房准备菜品。
3. 提交(Commit) 到 DOM，将菜品放置在用户的桌子上。

State 是快照

不同于常规的 Javascript 变量。设置 State 不会直接改变 State 的值，而是会触发重新渲染。设置 State 以后立即去读，也会得到当前值，而不是新的值。

import { useState } from "react";

export default function ValueTest() {
  const [val, setVal] = useState("");

  const handleClick = () => {
    setTimeout(() => {
      alert(val);
    }, 5000);
  };

  return (
    <>
      <input value={val} onChange={(event) => setVal(event.target.value)} />
      <button onClick={handleClick}>Alert The Value</button>
    </>
  );
}

例如上述代码，如果输入值123，点击了按钮，再改变值，弹出的还是点击时的值123。