今日文章目录

• 前言
• 需求说明
• 过程纪录
• 参考文章

名词解释真的好难，会写教学文还让大家看得懂的前辈真的好厉害～

前言

延伸 昨天提到的 Brower DOM ≠ React DOM，那麽两者之间的差异性？

• Brower DOM:
  浏览器将HTML档解析成DOM tree，加入CSS样式与JS，渲染成我们看到的网页。每当DOM节点有任何更新，都要重新渲然整个新的DOM，这样会影响效能，造成使用者体验不佳。

  想想看，如果我们打开Facebook，随时都会收到即时贴文与讯息，如果每一个更新都要re-render DOM，那还得了？

• React DOM:
  Facebook 建立的React DOM，当React DOM节点有任何更新，一样会重新绘制React DOM，但不一样的是：
  React DOM会比较前後是哪个节点有更新，针对有更新的部分作 re-render，并使用ReactDOM.render()确保 Brower DOM 与 React DOM资料一致。解决重复渲染导致的效能问题。

图片来源 与 参考文章: React Virtual DOM Explained in Simple English

刚刚提到 React DOM 节点更新，其实就是 state 的变化。(但为了维护更好的效能，并不是一有state更新，就马上跑去告诉Brower DOM。而是累积一部分新的state，再一次去统一更新Brower DOM的资料。所以你之後可能会发现，有些时候更新 state，画面并没有同步更新。)

React 提供 useState方法，让我们可以轻易操控资料变化。我们可以呼叫useState，并透过阵列解构方式自订state名称：

    const [ 自订state名称, 自订更新state方法的名称] = useState(state初始值);
    const [ state, setState ] = useState("");

• state初始值: 画面第一次 render的state预设值。
• 自订更新state方法的名称: 一律以setXXX开头。

还有，React 用 function component 回传 React element，而我们也得以在element操作一些变数。
记得，component命名开头都是大写，用来与 HTML标签 做区别。

天哪，终於要来实作了

需求说明

• 输入代办项目，点击送出，显示清单。
• 一个输入框、一个提交按钮、ul清单。

过程纪录

• 建立一个 component:

export default function ToDoList() {
    // do something
    
    return(        // element
         <>
          <Space>
            <Input
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
            />
            <Button type="primary" onClick={handleSubmit}>+</Button>
          </Space>
          <ul>
            {toDoData.map((item) => (
              <li id={item.id}>{item.value}</li>
            ))}
          </ul>
        </>
    )
}

• 绑定 input value 与 清单资料：

    const [ inputValue, setInputValue ] = useState("");
    const [toDoData, setToDoData] = useState([]);

• 我使用 Antd 的 UI 与方法，点击送出按钮，执行 setInputValue 与 setToDoData 更新值。

  const handleSubmit = () => {
    if (inputValue) {
      const newValue = {
        id: Date.now(),
        value: inputValue,
        status: UNFINISHED,
        spendTime: 0,
      };
      setToDoData([...toDoData, newValue]);
      setInputValue('');
    } else {
      AlertNotification({
        type: 'warning',
        message: '请先输入代办事项！',
      });
    }
  };

• 显示效果：
  

参考文章

• Reconciliation