昨天文章有提到在 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}
就可以去做到這樣的變化。
很好玩吧!
最後再為大家整理一下今天這個範例的幾個重點:
<Tooltip>
的文字內容改為 {text}
<Button>
新增 onClick
事件,去改變 isExpanded 的值useEffect
去偵測 isExpanded 的變化,這樣就可以做到點擊後改變 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 出我的學習過程,
那我們明天見啦!