昨日 [Day 60] [React] State - Hooks - useState & destructuring assignment 解構賦值 是說明 useState Hook，今天是 Hook 的練習～

練習題目：

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

//Challenge:
//1. Given that you can get the current time using:
let time = new Date().toLocaleTimeString();
console.log(time);
//Show the latest time in the <h1> when the Get Time button
//is pressed.

//2. Given that you can get code to be called every second
//using the setInterval method.
//Can you get the time in your <h1> to update every second?

//e.g. uncomment the code below to see Hey printed every second.
// function sayHi() {
//   console.log("Hey");
// }
// setInterval(sayHi, 1000);

1. Show the latest time in the <h1> when the Get Time button is pressed

這題算滿簡單的，把昨天的課程上說明的例子拿出來看一下就可以。

為了更瞭解 Hook 的陣列，有 google 到這篇：React Hooks 不是黑魔法，只是陣列

function RenderFunctionComponent() {
const [firstName, setFirstName] = useState('Rudi');
const [lastName, setLastName] = useState('Yardley');

return (
<Button onClick={() => setFirstName('Fred')}>Fred
);
}
Hooks API 背後的概念是您可以使用 setter，這個 setter 是 useState 執行之後回傳陣列的第二個值。 setter 可以控制 Hook 管理的 state 。
React 是如何完成上述概念？
接著讓我們來說明 React 內部大概的運作機制。下面說明的概念也可以運用在特定執行環境下渲染元件。意思是儲存的資料是位於被渲染的元件外層。該 state 不會和其他元件共用，並且存在渲染該元件之後可以被存取的範圍。

import React, { useState } from "react";

function App() {
  const [originalTime, setNewTime] = useState("TIME?");

  let time = new Date().toLocaleTimeString([], { hour: '2-digit',hour12: false, minute: '2-digit' });

  function whatTimeIsit() {
    setNewTime(time);
  }

  return (
    <div className="container">
      <h1>{originalTime}</h1>
      <button onClick={whatTimeIsit}>Get Time</button>
    </div>
  );
}

export default App;

2. Given that you can get code to be called every second using the setInterval method. Can you get the time in your <h1> to update every second?

用 setInterval 去 google 找到這篇 Day28 JS 定時器使用方式及運作機制：

var clock = setInterval(printword , 200);
function printword(){
  console.log("hello");
}

這題算簡單，加入 setInterval(updateTime, 1000); 後，在 updateTime() 裡面 setTime(newTime) 就可以了。

function App() {
  setInterval(updateTime, 1000);

  const now = new Date().toLocaleTimeString();

  const [time, setTime] = useState(now);

  function updateTime() {
    const newTime = new Date().toLocaleTimeString();
    setTime(newTime);
  }

  return (
    <div className="container">
      <h1>{time}</h1>
      <button onClick={updateTime}>Get Time</button>
    </div>
  );
}

export default App;

除了上線上課，還有更新了這篇：[Day 59] [插播] 今天完成了一個計算機～ - JavaScript & React（11/11更新） ，改用 React 來寫了一樣的計算機。