前言

昨天文章有提到在 Tooltips 看到有趣的範例，
有用到 useEffect，
不過我有將範例做些微調整，
讓剛入手的人比較好理解~

本日正文

今天要介紹的就是 useEffect，
(附一下官網文件連結，但我覺得對初學者來說滿不友善的就是了XD)
這邊直接拿昨天的例子進行修改，
先給大家看以下程式碼跟它的結果：

• 程式碼

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import { Tooltip, Button } from "reactstrap";

export default function App() {
  const [tooltipOpen, setTooltipOpen] = useState(false);
  const toggle = () => setTooltipOpen(!tooltipOpen);

  const shortText = "夠了喔！";
  const longText = "今晚我想來點...";
  const [text, setText] = useState(shortText);
  const [isExpanded, setIsExpanded] = useState(false);

  useEffect(() => {
    if (isExpanded === true) {
      setText(longText);
    } else {
      setText(shortText);
    }
  }, [isExpanded]);

  return (
    <div>
      <p className="p-2">
        戴資穎～戴資穎～第一名！
        <br />
        戴資穎～戴資穎～我愛妳！
        <br />
        <Button
          color="link"
          id="ilovetty"
          href="#"
          className="p-0"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          資穎～資穎～資穎
        </Button>
      </p>
      <Tooltip
        isOpen={tooltipOpen}
        target="ilovetty"
        toggle={toggle}
        placement="bottom"
      >
        {text}
      </Tooltip>
    </div>
  );
}

• 結果
  

大家可以看到，
只要點擊「資穎～資穎～資穎」的按鈕，
Tooltip 的文字就會有所變動，
這是怎麼辦到的呢？

大家可以先看到我在按鈕的部份增加了 onClick 事件：

<Button
    ... (略)
	onClick={() => setIsExpanded(!isExpanded)}
>
  資穎～資穎～資穎
</Button>

經過兩天的洗禮，大家現在看到這個 setIsExpanded 應該不陌生了，
往上看可以看到這行的宣告：

const [isExpanded, setIsExpanded] = useState(false);

也就是說有個變數 isExpanded，初始值為 false，
setIsExpanded 是改變 isExpanded 值的方法。

所以

onClick={() => setIsExpanded(!isExpanded)}

意思是當我點擊這個按鈕，我要執行 setIsExpanded，
將 isExpanded 的值改為 isExpanded 的相反值。

再來進入本日重頭戲，
也就是我在今天範例新增的這部份：

const shortText = "夠了喔！";
const longText = "今晚我想來點...";
const [text, setText] = useState(shortText);
const [isExpanded, setIsExpanded] = useState(false);

useEffect(() => {
    if (isExpanded === true) {
      setText(longText);
    } else {
      setText(shortText);
    }
}, [isExpanded]);

useEffect 是說當組件(頁面)渲染完後，針對指定的部份偵測更新並執行。
(但我這句話可能講得不好，推薦大家可以看之前大大寫的文章 → [Day 17 - 即時天氣] 頁面載入時就去請求資料 - useEffect 的基本使用 )

先想一個情況，有時候當頁面上內容有小變動(例如數字的變化)，
是不是不會馬上看到更新後的內容，
還需要按重新整理讓畫面重新渲染後才會看到更新呢？

useEffect 我覺得就像是去偵測頁面的更新，
有更新的地方就去執行並渲染在頁面上。
(並不是整個頁面的重新渲染哦，是只去偵測改變的地方並執行動作)

useEffect(() => {
    if (isExpanded === true) {
      setText(longText);
    } else {
      setText(shortText);
    }
}, [isExpanded]);

所以 , [isExpanded]); 這邊的意思是 useEffect 會去偵測 isExpanded 有沒有改變，
有改變的話我就去執行裡面的程式，
裡面這段大家應該看得懂，
就是判斷 isExpanded，true 的話就執行 setText，將 text 的值改成 longText；
反之，false 的話就執行 setText，將 text 的值改成 shortText；

可是這樣你可能會問說那 Tooltip 的文字內容為什麼會跟著改呢？
因為這邊我有做一個小變動：

<Tooltip ... (略)>
    {text}
</Tooltip>

注意到了嗎，原本在昨天的範例是「夠了喔！」的文字，
我改成了 {text}。

這也是 React 方便的地方之一，
我可以用 {變數名稱} 去取得變數的值。
前面根據 isExpanded 的不同，text 就會被設定成不一樣的值，
因此這邊用 {text} 就可以去做到這樣的變化。
很好玩吧！

最後再為大家整理一下今天這個範例的幾個重點：

1. <Tooltip> 的文字內容改為 {text}
2. <Button> 新增 onClick 事件，去改變 isExpanded 的值
3. 新增 useEffect 去偵測 isExpanded 的變化，
   根據 isExpanded 的不同，text 就會被設定成不一樣的值

這樣就可以做到點擊後改變 Tooltip 的文字內容了。

是不是感受到 useEffect 的有趣之處了？
附上本日範例：Day16 - Reactstrap (Tooltips)
大家也可以自己試著玩玩看哦！

後記

我突然翻到在 Codecademy 上面有 React 的教學！
https://www.codecademy.com/learn/react-101

Codecademy 裡面有各種程式的教學，
如 HTML & CSS, Python, JavaScript..... 等，
過程是把學習步驟拆成一步一步，
每一步都有附上說明，還有小練習，
所以你可以自己慢慢學習~

我之前在 Codecademy 學過 HTML, jQuery，
沒想到 Codecademy 連學習證書都有，跟 Udemy 好像XD
這邊附一下我當初的學習證書XD

沒想到現在連 React 教學都有了！
決定接下來要在 Codecademy 加(ㄜˋ)強(ㄅㄨˇ)我的 React 基礎，
也會同步在文章 po 出我的學習過程，
那我們明天見啦！