在上一篇新認識了 Class 物件裡面會寫一個 local (元件內)的 state 去管理儲存元件的值，但這筆資料是存在記憶體裡的，並隨著元件的產生會進行初始化，消失時已經更新的資料也消失。另外文件也有提到幾項要注意的

1. 請不要直接修改 State
2. State 的更新可能是非同步的
3. State 的更新將會被 Merge
4. 向下資料流

注意事項說明

1. 請不要直接修改 State
   在規格裡必須在 constructor 裡宣告 this.state 開始使用 local state，但切勿直接存取如下

//錯誤示範
this.state = {
  stuff: "what I want"
}

但因為 state 為框架特定物件格式用來存取 React 元件資料，二來資料要進行更新追蹤，進而判斷重新 render
的部分，所以需要使用 this.setState 方法進行資料的修改

2. this.setState 是非同步的
   設想元件內部需要去直接修改某資料，並與父層更新值的 props 資料一起更新的情境發生，資料的更新便需要優先次序，而非即時同步的。

3. 在上一篇有提到，setState 裡面的更新值不全等於初始設定的所有項目，只會更新有變動的值的部分

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

4. 元件之間的資料傳遞，遵循單向資料流的規則，如 A 元件裡面的子層 B 元件， A 、 B 便是父與子關係，資料只能由父層 Ａ 利用 props 傳遞給 B ， B 無法直接修改 A 資料。資料的「方向性」確保執行時，避免產生出無法追蹤的副作用。

使用 Hook 改寫

我們使用了 function component，就需要搭配 Hook 去進行生命週期的處理，而 Hook 是 React 16.8 中增加的新功能。在整個 React 系列後半段會有 Hook 更詳盡的學習，現在先練習參照簡單的ＡＰＩ格式進行改寫。

1. useEffect：相似於 componentDidMount 和 componentDidUpdate
2. 使用 return 一個 function 的方式作為 component unmount 的清除機制

const { useState, useEffect } = React;

function Counter() {
  let [count, setCount] = useState(`${new Date().toLocaleTimeString()}`);


  useEffect(()=>{
    setInterval(()=>{
    let timeID = setCount(`${new Date().toLocaleTimeString()}`);
    }, 1000)
    
    return ()=>clearInterval(timeID);
  }, [])


  return <h1>{count}</h1>;
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

參考資料：
https://zh-hant.reactjs.org/docs/hooks-effect.html
如何在 Hook 中使用 setInterval