竟然就這樣過去兩周了，我也堅持了兩周，真令人高興。
本來覺得今天可以寫To-do-List，但臨時起意還是先進入Hook好了。

什麼是Hook？

如果要用一句話來解釋Hook，我會引用官網的這句：

Hook 讓你不需要 class 就能使用更多 React 的功能。

可喜可賀，react相當理解大家(我)對於js的基礎之薄弱，薄弱到我的世界因為this而迷航，於是大非慈悲的說：

我們發現 class 可能是學習 React 的一大障礙。你必須了解 this 在 JavaScript 中如何運作，你必須記得 bind 那些 event handler。

那麼，就直接進入到底Hook是甚麼？拿來做甚麼的階段吧！

State Hook

一樣，我們取一下官網的範例，然後一眼掠過他！
但在掠過之前停留在第一行三秒鐘，就是因為我們現在要用Hook了，所以要記得引用。
import React, { useState } from 'react';

import React, { useState } from 'react';

function Example(){
  const[count, setCount] = useState(0)
  
  return(
    <div>
      <p>點了{count}次</p>
      <button onClick={() => setCount(count + 1)}>點我</button>
     </div>
  )
}

ReactDOM.render(<Example/>, document.getElementById('app'))

接下來，我們來看一下我們渲染了什麼。
第一行我們在{}裡面放了一個count的變數，這沒有甚麼問題。
第二行我們幫button綁了一個事件，是否發現是有蹊蹺？沒錯！！
this不見了！
天地良心，那個我永遠不知道他到底指去哪裡的this終於不見了！！

  return(
    <div>
      <p>點了{count}次</p>
      <button onClick={() => setCount(count + 1)}>點我</button>
     </div>
  )

那就來看看沒有this的事件是怎麼綁定的吧！
好像有點短，但沒錯，就是這麼一行。
重點就是這個叫做useState的hook要怎麼用。

const[count, setCount] = useState(0)

文件是這麼說的

當我們使用 useState 宣告 state 變數，他會回傳一對在 array 裡的值。第一個值是目前 state 的值，第二個是一個可以更新 state 的 function。

也就是說第一個值是變數，第二個值是一個function，可以拿來更新第一個變數的值。並且()裡面的數值就是初始值。

所以我們可以綁定setCount事件，來改變count的值。

疑！就這樣嗎？
對，就這樣。

不過，在這裡不免俗地又要說一下了，這個const[a,b]=c的寫法，不是react創造的，
是js本來就有的方法(哈哈哈我也是現在才知道)，叫做陣列解構賦值，有興趣的朋朋可以去了解一下顆顆。

那麼，明天見！