今天一口氣練習 Hooks 跟第二種計數器寫法。

先來用我的破英文翻譯一下，現在的 React 允許在 functional components 當中使用 Hooks （根據官方文件表示：Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。）。

首先把 index.js 第一行註解改換成 { useState }，這麼做的原因是因為react不能被宣告兩次唷。

//import React from 'react';
import React, { useState } from "react";

接著，撰寫下列語法（ 別忘了新增我們親愛的div#root11 ）

function Hello6() {
  const [q, setName] = useState("Who are you");

  return <h1>Hello, {q}?</h1>;
}

const el9 = <Hello6 />
ReactDOM.render(
  el9,
  document.getElementById('root11')
)

上面我用了 q 代表 question，如果句子要用別的就用別的，完全沒問題喔！只是後面呼叫時別忘記就好；然後就可以出現這個畫面了：

接著用這次的 hooks語法撰寫新的計數器，為了跟昨天有點不同，我用減去的方式製作

function Counter3 () {
  const [counter3, setCounter3] = useState(0);
  function minus () {
    setCounter3(counter3 -1);
  }
  return <p>{counter3}<br /><button onClick={minus}>Minus</button></p>
}
const el10 = <Counter3 />
ReactDOM.render(
  el10,
  document.getElementById('root12')
)

跟昨天比起來有沒有比較好寫，說實在，我還在學習階段，還沒有太大的感覺，可能要多寫看看：

相關文章

介紹 Hook

其實我有想把這些練習分門別類地整理一下，不過我嘗試做卻一直不成功，等我成功再來分享唷。