Day 15 - React: setState 计数器之二

今天一口气练习 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

其实我有想把这些练习分门别类地整理一下，不过我尝试做却一直不成功，等我成功再来分享唷。