Apps Script用Sheet生成動態網頁(17): 認識React的hook

-

 延續上一篇Apps Script用Sheet生成動態網頁(16): 認識React，我們接著要來認識React的hook機制。

我們在App.jsx中會看到useState()，這個由use開頭的函數，就是我們的hook，React在16.8.0版時加入Hook的支援。是為了functional元件所添加的功能，使得funcional元件不再只是寫寫固定內容的元件或是樣板，而是已具備一個完整的互動功能。

官方有提供一系列文件說明

除了useState()外，還有useEffect(),useContext(),useReducer(),useCallback()等等，這裡我們就只專注在範本中的hook。

範本中的Hook

我們在App.jsx中看到

const [showBtn, setShowBtn] = useState(true);
const [showUrl, setShowUrl] = useState();

由useState()的引用可知這是React提供的函數

import React, { useState } from 'react';

useState是用來儲存資料的，你可以給它一個參數作為初始值，就像useState(true)表示將資料初始成true；而它會回傳一個兩個元素的陣列，第一個元素是這個變數，而第二個元素是修改變數用的函數。我們透過解構賦值可以將元素命名成想要的變數。

const [showBtn, setShowBtn] = useState(true);

像是上面這個描述的意思就是可以用showBtn來存取資料，而setShowBtn則是用來改變資料用的函數，只要呼叫這個函數就會更新數值並改變畫面。


在App.jsx中可以看到我們在CSSTransition中有使用setShowBtn來設定值為true或false。

<CSSTransition
in={showUrl}
timeout={300}
classNames="alert"
unmountOnExit
onEnter={() => setShowBtn(false)}
onExited={() => setShowBtn(true)}

範例的互動流程

接下來說明一下整個範例的流程：
  1. 初始畫面
    在一開始顯示App.jsx時，將showBtn初始化成true，表示按鈕元件會被顯示出來。
    我們使用{showBtn && .... }做條件判斷，如果是falsy的(例如：undefined, null, '', false等)，就不顯示；反之，就顯示Press Me按鈕。
  2. 當使用者按下Press Me按鈕
    觸發事件onClick={getServerUrl}所註冊的getServerUrl函數。這個函數會去跟Google Apps Script伺服器取回目前伺服器的完整URL。
  3. 當完整的URL被取回來後
    會呼叫.then(setShowUrl)所註冊的setShowUrl函數；反之，若發生任何錯誤則會呼叫.catch()所註冊的alert函數，使瀏覽器跳出預設的警示對話框。
    而伺服器的getServerUrl會回覆一個URL，所以setShowUrl就會儲存資料，並更新畫面。
  4. 顯示URL訊息框
    而CSSTransition因為有設定in={showUrl}，所以只要showUrl不是falsy的，就會顯示子元素的內容；並且因為設定了onEnter={() => setShowBtn(false)}，所以會把showBtn改成false，所以Press Me按鈕就會被隱藏了。
  5. 當使用者按下訊息框中的Close按鈕
    因為有註冊onClick={() => setShowUrl('') 所以setShowUrl就會改變showUrl內容成''，並更新畫面。
    而CSSTransition就因為showUrl為falsy而關閉顯示，這時onExited={() => setShowBtn(true)}註冊setShowBtn而將showBtn設為true，再度更新畫面。
    因為showBtn為true，所以Press Me按鈕就再度顯示了出來。



留言

張貼留言