[Day16] 学 Reactstrap 就离 React 不远了 ～ 用 Tooltips 认识 useEffect

前言

昨天文章有提到在 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 出我的学习过程，
那我们明天见啦！