State 和生命周期(下) 正确的使用 State （Day6）

在上一篇新认识了 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