tags: 鐵人賽 React javascript nodejs vscode

• 第七天！今天是第七天! 能夠堅持到七天，確實不簡單，今天的你，累積了一定的自信心，照鏡子都會忍不住多看一分鐘，真帥。

• 過去React提倡使用class進行component的開發，坦白說，拜物件導向深植人心這麼久，學習他也是理所當然的事。

• 不過，到了18年，React發佈了React Hook，可說是驚天動地，開始提倡functional component的設計，解決了class component代碼繁多，狀態控制複雜...等問題，讓程式更好維護。

• 沒學過class component？別擔心，functional component是你的好搭擋，就決定是你了。

• 今天我們就從React Hook的第一招useState來說起，

練習1: 先用傳統的設計方式建立基本觀念

• 我們先透過這個練習，使用目前學習的基本知識，來完成一個簡單的事件處理。
• 練習如下

** 設計一個計數器，具備兩個按鈕 **
- 宣告一個變數，並透過button onClick event來進行相對的動作
- 按鈕1: 變數加1
- 按鈕2: 變數減1

<提醒>: 這個範例我們還沒使用useState，你可以觀察看看發生什麼事!

• 編輯src/index.js

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

ReactDOM.render(
  <Counter/>,
  document.getElementById('root')
);

• 編輯src/components/Counter.js

import React from "react";

// *
// 設計一個Counter，包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  let numState = 5; //<-- 給定一個預設值5
  return (
    <>
      <h1>{numState}</h1>            
      <button
        onClick={() => {
          console.log("Counter+1");
          return numState + 1;
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return numState - 1;
        }}
      >
        減1
      </button>
    </>
  );
}

!!我的老天鵝...抹丁抹凍...

免驚! useState三步驟搞定

• 還記得React提倡的virtual DOM概念吧，要讓React發揮效能，你得依循他訂下的規矩，將你的state及setStateFunc一起提交到中央，方便管理。

• 使用方法很簡單，依循下方三步驟即可

import React, {useState} from "react";  //<--Step1


function YOUR_COMPONENT(){
  const [yourState, setYourStateFunc] = useState(初始值); //<--Step2
  
  ...
  
  return(
    ...
    <div> {setYourStateFunc(yourState+[任何運算])} </div>   //<--Ste3: 在JSX中，使用你定義好的 setYourStateFunc
    ...
  );
}

練習1-plus: 走開～讓專業的useState來

• 編輯src/components/Counter.js

import React, {useState} from "react";

// *
// 設計一個Counter，包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  const [numState, setNumState] = useState(5); //<-- 給定一個預設值5
  return (
    <>
      <h1>{numState}</h1>            
      <button
        onClick={() => {
          console.log("Counter+1");
          return setNumState(numState + 1);
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return setNumState(numState - 1);
        }}
      >
        減1
      </button>
    </>
  );
}

練習2: 來點不一樣的花招試試

• 我們新增一個button，並定義一組新的state，來控制我們文字的背景顏色

• 編輯src/components/Counter.js

import React, { useState } from "react";

// *
// 設計一個Counter，包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  const [numState, setNumState] = useState(5); //<-- 給定一個預設值5
  const [showColor, setShowColor] = useState(false); //<-- 給定預設的bgColor=white
  return (
    <>
      <h1 style={{backgroundColor:showColor?"yellow":"white"}}>{numState}</h1>
      <button
        onClick={() => {
          console.log("Counter+1");
          return setNumState(numState + 1);
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return setNumState(numState - 1);
        }}
      >
        減1
      </button>

      <button
        onClick={() => {
          console.log("showColor is:"+showColor);
          return setShowColor(!showColor);
        }}
      >
      {showColor?"關閉":"打開"}
      </button>
    </>
  );
}

除了一般的變數，state也可以是Object或Array等其他形態嗎?

• 當然可以

• 以上面的範例來說，我如果只想要用一個state控制Counter的邏輯運算及背景顏色，你可以這麼寫

• 編輯src/components/Counter.js

import React, { useState } from "react";

// *
// 設計一個Counter，包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  const [stateList, setYourState] = useState({ value: 5, showColor: false });   //<-- 改用object來做狀態的控制

  return (
    <>
      <h1 style={{ backgroundColor: stateList['showColor'] ? "yellow" : "white" }}>
        {stateList["value"]}
      </h1>
      <button
        onClick={() => {
          console.log("Counter+1");
          return setYourState({ ...stateList, value: stateList["value"] + 1 });
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return setYourState({ ...stateList, value: stateList["value"] - 1 });
        }}
      >
        減1
      </button>

      <button
        onClick={() => {
          console.log("showColor is:" + stateList['showColor']);
          return setYourState({ ...stateList, showColor: !stateList["showColor"] });
        }}
      >
        {stateList['showColor'] ? "關閉" : "打開"}
      </button>
    </>
  );
}

結論

• 鐵人賽第七天，你學會了

1. 使用React Hook的第一招 useState 來控制畫面的邏輯
2. 了解到useState也可以吃不同的格式，包含object, array...等

• 一點一滴的自信累積，讓你嘴角忍不住上揚，走路也有風，加油，我們繼續朝下一個7天邁進。
  

課後小練習

• 題目: 嘗試著用昨天教的迴圈，來產生多個Counter吧
• 將昨天學習的東西學會混搭使用，你就更能融會貫通，加油??

教學資源

• 底下兩篇資源蠻推薦各位拜讀，都是React官方的教學文件，讓自己從A->A+吧

• React Hook 介紹
• 使用State Hook