CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：mail

🔍 搜尋結果：mail

Github Desktop 新手入門教學：第1課 ── 學會專案初始化

## 課程目標 - 學會專案初始化 ## 課程內容 在開始之前，我先再次說明一下 Git 與 Github Desktop 的不同 Git 是軟體工程師每天都會用到的，強大的專案版本管理工具，本身是命令列工具，要一直在終端機打指令 Github Desktop 是 Github 公司，為了方便入門者，所開發的 GUI（圖形化介面）工具，用起來簡單很多 本課程會交替使用這兩個名詞，前者代表 Git 正在發揮作用，後者代表正在操作 Github Desktop 功能 有點分不清楚沒關係，反正就知道有這差別即可，日後經驗更多，會越來越清楚 --- 讓我們開始玩玩看 Github Desktop 吧！ 請先前往官網下載並安裝 https://desktop.github.com/ 在登入 Github 帳號的步驟，先選 `Skip this step` 跳過就好，我們後面課程再登入就好 --- 進入到 Github Desktop 主畫面之後，首先我們要設定一下 git 基本資訊 也就是在用 git 管理專案紀錄時，每次提交變化時，當筆提交的「作者資訊」 請在 Github Desktop 上方的導覽列，選擇 `Preferences` 然後選擇 `Git` 把 `Name` 跟 `Email` 欄位填寫一下，然後點擊 `Save` 按鈕，就可以囉！ --- 來建立第一個用 git 管理的專案吧！ 在主畫面，點選 `Create a New Repository on your Hard Drive` `Name` 就輸入 `my-first-repo` `Description` 可以省略不填 `Local Path` 隨便選一個方便的路徑 其餘的選項都保持預設就好，不用勾選 `Create Repository` 點下去，就建立第一個專案資料夾囉！ --- 請在電腦上，直接打開那個資料夾，然後在資料夾裡面新增一個檔案 `my-document-1.txt`，裡面放入以下內容 ``` 我的第一個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面，有出現 `my-document-1.txt` 這個檔案 然後右側的主視窗，有顯示出檔案內容 這代表 git 已經發現它的存在了 我們成功使用 git 開始追蹤專案的歷史變化了！ 這是一個很好的開始，本課先做到這樣就好！ ## 課後作業 假設你正在準備履歷表，整理一些自我介紹、經營個人品牌的檔案 請建立一個名為 `my-resume` 的資料夾，並使用 git 開始追蹤這個資料夾 請在其中建立一個 `me.txt` 的文字檔案，裡面放入以下內容 ``` # 我是誰 - 我是XXX，目前在自學程式設計 # 我的學歷 - 高中：積極高中 - 大學：品質大學 ``` 你應該會在 `Changes` 分頁看到檔案出現 然後在右側主視窗，看到文字檔案的內容 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區

0個讚   2留言 1,393瀏覽

7 個進階、好用的 TypeScript 技巧用法分享

**TypeScript** 是一種出色的工具，可以讓我們的生活更輕鬆並避免 **bug**，但有時使用起來感覺不知所措。 本文概述了專業人士使用的 7 個 **TypeScript** 技巧，它們將使您的生活更輕鬆。 原文出處：https://dev.to/ruppysuppy/7-secret-typescript-tricks-pros-use-3ckg ## 1. 型別推理 **Typescript** 足夠聰明，可以在您幫助縮小資料類型時**推斷資料類型**。 ``` enum CounterActionType { Increment = "INCREMENT", IncrementBy = "INCREMENT_BY", } interface IncrementAction { type: CounterActionType.Increment; } interface IncrementByAction { type: CounterActionType.IncrementBy; payload: number; } type CounterAction = | IncrementAction | IncrementByAction; function reducer(state: number, action: CounterAction) { switch (action.type) { case CounterActionType.Increment: // TS infers that the action is IncrementAction // & has no payload return state + 1; case CounterActionType.IncrementBy: // TS infers that the action is IncrementByAction // & has a number as a payload return state + action.payload; default: return state; } } ``` 如上所示，**TypeScript** 根據 `type` 屬性推斷操作的類型，因此您無需檢查 `payload` 是否存在。 ## 2. 字串類型 通常你需要一個變數的特定值，這就是**文字類型**派上用場的地方。 ``` type Status = "idle" | "loading" | "success" | "error"; ``` 它也適用於數字： ``` type Review = 1 | 2 | 3 | 4 | 5; // or better yet: const reviewMap = { terrible: 1, average: 2, good: 3, great: 4, incredible: 5, } as const; // This will generate the same type as above, // but it's much more maintainable type Review = typeof reviewMap[keyof typeof reviewMap]; ``` ## 3.類型守衛 **類型保護** 是另一種縮小變數類型的方法： ``` function isNumber(value: any): value is number { return typeof value === "number"; } const validateAge = (age: any) => { if (isNumber(age)) { // validation logic // ... } else { console.error("The age must be a number"); } }; ``` 注意：在上面的示例中，最好使用： ``` const validateAge = (age: number) => { // ... }; ``` 這個例子是為了展示 **type guards** 是如何工作的一個簡化。 ## 4.索引簽名 當對像中有**動態鍵**時，可以使用**索引簽名**來定義其類型： ``` enum PaticipationStatus { Joined = "JOINED", Left = "LEFT", Pending = "PENDING", } interface ParticipantData { [id: string]: PaticipationStatus; } const participants: ParticipantData = { id1: PaticipationStatus.Joined, id2: PaticipationStatus.Left, id3: PaticipationStatus.Pending, // ... }; ``` ## 5.泛型 **泛型** 是一個強大的工具，可以讓您的程式碼更易於重用。它允許您**定義一個類型，該類型將由您的函數的使用決定**。 在以下示例中，`T` 是通用類型： ``` const clone = <T>(object: T) => { const clonedObject: T = JSON.parse(JSON.stringify(object)); return clonedObject; }; const obj = { a: 1, b: { c: 3, }, }; const obj2 = clone(obj); ``` ## 6. 不可變類型 您可以通過加入 `as const` 使您的類型**不可變**。這確保您不會意外更改值。 ``` const ErrorMessages = { InvalidEmail: "Invalid email", InvalidPassword: "Invalid password", // ... } as const; // This will throw an error ErrorMessages.InvalidEmail = "New error message"; ``` ## 7. 部分、選擇、省略和必需類型 通常在使用 **server** 和 **local data** 時，您需要將一些屬性設置為 **optional** 或 **required**。 而不是使用相同資料的略微更改版本定義數百個接口。您可以使用 `Partial`、`Pick`、`Omit` 和 `Required` 類型來做到這一點。 ``` interface User { name: string; age?: number; email: string; } type PartialUser = Partial<User>; type PickUser = Pick<User, "name" | "age">; type OmitUser = Omit<User, "age">; type RequiredUser = Required<User>; // PartialUser is equivalent to: // interface PartialUser { // name?: string; // age?: number; // email?: string; // } // PickUser is equivalent to: // interface PickUser { // name: string; // age?: number; // } // OmitUser is equivalent to: // interface OmitUser { // name: string; // email: string; // } // RequiredUser is equivalent to: // interface RequiredUser { // name: string; // age: number; // email: string; // } ``` 當然，你可以使用 **intersection** 來組合它們： ``` type A = B & C; ``` 其中 `B` 和 `C` 是任何類型。 --- 謝謝閱讀，希望對您有幫助！

0個讚   0留言 680瀏覽

Git 入門上手教材：第1課 ── 學會 git 初始化

## 課程目標 - 學會 git 初始化 ## 課程內容 這次的課程，主要是透過每課作業練習實務情境 關於 git 的基本安裝，網路上有非常多教學，請根據你的作業系統，自己找一套安裝方法 不論是使用「終端機」讓你輸入指令，或者是有 GUI（圖形化介面）讓你點擊 UI 執行指令，都可以 關於 git 的基本觀念，學起來可深可淺，我只會簡單說明工作上需要的觀念 覺得黑箱或者想深入研究的話，可以上網搜尋相關關鍵字，深入理解 git 底層機制 --- 在要使用 git 追蹤的資料夾內，首先要使用的指令是 ``` git init ``` 這會初始化資料夾環境，讓 git 開始追蹤資料夾內所有檔案變化的一舉一動 其實不用想得太神奇，這指令只是在資料夾內建立一個隱藏的資料夾 `.git/` 而已（你可以根據你的作業系統，想辦法找到這個隱藏的資料夾） 後續的 git 指令，背後都是去查看 `.git/` 的內容而已 --- 初次使用 git，打指令可能會被要求設定名稱信箱，這些要用來記錄在 git 歷史訊息內，辨識操作者 ``` git config --global user.name "您的名稱" git config --global user.email "您的信箱" ``` --- 接著來試用兩個指令 首先是查看目前的工作狀態 ``` git status ``` 因為還沒有任何程式碼，所以應該會顯示「沒東西」的中文或英文訊息 接著來查看歷史編輯紀錄 ``` git log ``` 一樣會顯示「沒紀錄」的中文或英文訊息 這兩個基本指令，對於學習非常有幫助 在每次打任何 git 指令之前與之後，都打打看這兩個指令，可以幫助認識當前追蹤狀況 ## 課後作業 請開一個新資料夾，用 git 初始化這個資料夾 接著分別輸入 `git status` 與 `git log` 應該會看到 git 回應「沒東西」與「沒紀錄」的訊息 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把 `git status` 與 `git log` 顯示的文字內容複製，貼到留言區 也可以直接截圖視窗內 `git status` 與 `git log` 的內容，上傳到留言區

1個讚   15留言 2,363瀏覽

新手推薦：最基本的 10 個 Git 指令與原理

Git 是軟體工程師最重要的工具之一，今天來學一點 Git 吧！ 原文出處：https://dev.to/swordheath/git-the-basic-commands-every-developer-should-know-2m1e **什麼是 Git？** Git 是一個追蹤文件變更的版本控制系統。使用 Git 可以讓您保留所有更改的記錄並根據需要返回到特定版本。它使用方法簡單，佔用空間小，而且非常高效。它的分支模型使它有別於幾乎所有其他可用的 SCM。您可以使用 GitHub 或其他線上主機來儲存文件的備份及其修訂歷史。 **Git 的主要元件** 對我來說，Git 是在團隊專案中使用的絕佳工具，因為它有助於避免程式碼混淆，並帶來一個簡單而有效的工作流程。 ** Repository** Git 存儲庫（或簡稱 repo）包含所有專案文件以及整個修訂歷史記錄。您使用一個普通的資料夾（例如網站的根目錄夾）並告訴 Git 將它變成一個存儲庫。這將建立一個 .git 子文件夾，其中儲存了所有用於追蹤修改的 Git 元資料。簡而言之，存儲庫是您保存程式碼的地方。 **Commit** 要向存儲庫加入新程式碼，您需要進行提交，這是存儲庫在特定時間點的快照、將特定更改或一系列更改提交到存儲庫中的文件。 Git 的歷史紀錄由連續的提交組成。 **Branch** 分支用於儲存您的更改，直到它們準備就緒。在主分支（master）保持穩定的情況下，您可以在分支上工作。完成後，您可以將其與母版合併。最大的好處是您可以在一個存儲庫中擁有多個分支，並在需要時合併它們。 **Pull requests** 這是 Git 中用於在將更改合併到您的程式碼庫之前討論更改的技術。PR 不僅僅是一個通知；它是針對所提議功能的專門討論串。這在多人處理同一份程式碼時特別方便，允許開發人員檢查彼此的工作。 現在我們已經簡要討論了 Git 的主要元件，我想列出每個開發人員在開始使用 Git 之前必須知道的**10 個基本 Git 命令**。 **1。開始一個新的存儲庫** ``` git init ``` **2。分別設定作者姓名和電子郵件地址以用於您的提交** ``` git config - - global user.name “[name]” git config - - global user.email “[email address]” ``` **3。從遠程存儲庫下載現有程式碼** ``` git clone <https://name-of-the-repository-link> ``` **4。建立一個新分支** ``` git branch <branch-name> ``` **5。在 master 中合併分支** ``` git merge <branch-name> ``` **6。從遠程存儲庫取得更新** ``` git pull <remote> ``` **7。將文件加入到 Git 的暫存區** ``` git add <file or directory name> ``` **8。存儲庫的當前狀態** ``` git status ``` **9。將在 master 分支上所做的更改發送到您的遠程存儲庫** ``` git push [variable name] master   ``` **10。更改 head（在版本歷史記錄中加入一筆更新）** ``` git commit -m " Commit Message" ``` --- 這些是每個使用 Git 的人都必須知道的主要指令。Git 非常好用，指令數量也相當多。但是記住這些指令並不是一項艱鉅的任務——您只需要開始使用 Git，大多數指令都會憑直覺記住。

0個讚   0留言 673瀏覽

[作業問題]HTML&CSS 第6課 Loading Page

您好，請問幾個問題。 1.為什麼我使用position:relative，網頁會出現很大的空白，我該如何解決。 2.使用絕對位置，我該如何讓我的網頁隨著比例縮放。 問題1 : ![](https://i.imgur.com/wzXvqGk.jpg) 問題2: ![](https://i.imgur.com/4a7OA6u.jpg) ![](https://i.imgur.com/BzUIBdJ.jpg) 這是網頁全開的時候 ![](https://i.imgur.com/YGNQAfx.jpg) HTML: ``` <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>佳加安全帽</title> <link rel = "stylesheet" href = "style.css"> </head> <body class = "page"> <div class = "navbar"> <div class="container"> <div class = "logo"> <a href = "#"><img src = "jiajia.jpg"/></a> </div> <div class="menu"> <ul class="choose"> <li><a href = "">所有商品</a></li> <li><a href = "">特價商品</a></li> <li><a href = "">安全帽</a></li> <li><a href = "">藍芽耳機</a></li> <li><a href = "">裝備衣物</a></li> <li><a href = "">配件</a></li> <li><a href = "">包包</a></li> </ul> </div> <div class="user"> <ul> <li><a href = "">Log in 登入</a></li> <li>|</li> <li><a href = "">Sign up 註冊</a></li> </ul> </div> </div> </div> <div class="background"> <div class="content"> <h1>在危險的世界中，給你多一份安全</h1> </br> </br> <p>留下您的email，獲得新商品及最新優惠資訊</p> </br> <input type= "email" name = "email" value = "Your email"> </br> <input class="submit" type = "submit" name= "submit" value = "訂閱"> </div> </div> </body> </html> ``` CSS: ``` *{ margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } .navbar{ background-color: #272727; height: 50px; width: 100%; } .logo img{ height: 50px; } .menu{ position: relative; top: -50px; line-height: 45px; left: 500px; } .menu li{ float: left; } .menu a{ color: #D9B300; display: block; padding: 0 10px; } .menu a:hover{ background-color: #D9B300; color: #272727; } .user{ position: relative; top: -50px; left: 800px; line-height: 45px; } .user li{ float: left; color: #D9B300; } .user a{ color: #D9B300; display: block; padding: 0 10px; } .user a:hover{ background-color: #D9B300; color: #272727; } h1{ color: white; } p{ color: white; } .background{ background-image: url("motor.jpg"); background-size: cover; background-repeat: no-repeat; height: 660px; text-align: center; } .content input{ width: 400px; height: 40px; } .content h1{ font-size: 40px; } .content p{ font-size: 20px; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .submit{ font-weight: bold; font-size: 20px; background-color: #D9B300; color: #272727; border-radius: 10px; border: 0px; } .submit:hover{ background-color: #272727; color: #D9B300; }

1個讚   5留言 377瀏覽

JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

## 課程目標 學會結合 AJAX 與 data attribute 來製作應用程式 ## 課程內容 打造應用程式的時候，有些資料不會直接顯示在畫面上，但之後的其他動作會用到 這時可以把資料存在 data attribute 裡面 ``` <div data-email="don't know yet" data-phone="0987654321"> <span></span> <button onclick="showEmail()">show email</button> <button onclick="showPhone()">show phone</button> </div> <hr> <button onclick="load()">Load User</button> ``` ``` function showEmail() { alert(document.querySelector('div').dataset.email) } function showPhone() { alert(document.querySelector('div').dataset.phone) } function load() { fetch('https://fakestoreapi.com/users/1') .then(res => res.json()) .then(json => { const element = document.querySelector('div'); element.querySelector('span').textContent = json.username; element.dataset.email = json.email; element.dataset.phone = json.phone; }) } ``` 到 jsfiddle 跑跑看，按鈕到處點點看，就知道 data attribute 的用法了 非常簡單，寫 html 的時候，直接設定 `data-*` 屬性就是了 寫 js 的時候，直接存取 DOM 元素的 `dataset` 屬性就是了 如果 AJAX 撈到了大量資料，但畫面上只需先顯示一部分資料 那麼就可以用 data attribute 先把資料整理起來放著 之後要擴充這個應用程式，或者有同事接手維護，要拿資料時，就很方便，也可以避免一直重複發 AJAX 拿同樣的資料 ## 課後作業 接續上一課的作業，這次要改得更漂亮 點擊 Details 按鈕，本來是連續跳出三個 alert 實務上不可能用連續跳出 alert 來說明商品細節，太醜了 這次要拿掉 alert，改成跳出一個 modal 互動視窗元件， 你可以使用之前課程中，自己製作過的 modal 元件 也可以上網找套件，找一款現成的使用 --- 這個 modal 視窗要包含以下資訊 - 名稱 - 分類 - 描述 - 圖片 - 價格 請使用 data attribute 將資料存放在 `<li>` 元素 點擊 Details 按鈕時，再將這些資料撈出來，放進 modal 元件內 --- 做出以上功能，你就完成這次的課程目標了！

1個讚   24留言 905瀏覽

JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法

## 課程目標 認識 AJAX 與不同的 HTTP 請求方法 ## 課程內容 HTTP 協定中，HTTP Request 有多種不同的方法 前面幾課的寫法，都是 HTTP GET 類型，這一課來接著談談更多不同的請求方法 繼續使用模擬電商網站的範例 API ### 使用 HTTP POST 新增一筆用戶資料 ``` fetch('https://fakestoreapi.com/users', { method: "POST", body: JSON.stringify({ email: '[email protected]', username: 'johnd', password: 'm38rmF$', name: { firstname: 'John', lastname: 'Doe' }, address: { city: 'kilcoole', street: '7835 new road', number: 3, zipcode: '12926-3874', geolocation: { lat: '-37.3159', long: '81.1496' } }, phone: '1-570-236-7033' }) }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中，`fetch()` 函式的第二個參數是一個物件，把 method 屬性設定好，然後 body 代表 HTTP body 的內容 必須是字串，所以用 `JSON.stringify()` 把物件轉換成 JSON 字串 整段看不太懂沒關係，需要了解 HTTP 協定的細節才比較看得懂，現在就先照做即可 要注意我們是用模擬電商 API，一切都是模擬的 最後主機會回應一個新的用戶 ID，看起來是新增成功了，但實際上並沒有東西新增到資料庫喔～ ### 使用 HTTP PUT 更新一筆用戶資料 ``` fetch('https://fakestoreapi.com/users/7', { method: "PUT", body: JSON.stringify({ email: '[email protected]', username: 'johnd', password: 'm38rmF$', name: { firstname: 'John', lastname: 'Doe' }, address: { city: 'kilcoole', street: '7835 new road', number: 3, zipcode: '12926-3874', geolocation: { lat: '-37.3159', long: '81.1496' } }, phone: '1-570-236-7033' }) }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中，去更新用戶 ID 為 7 的使用者資料 方法設定為 PUT，body 一樣放整個 JSON 字串 ### 使用 HTTP DELETE 刪除一筆用戶資料 ``` fetch('https://fakestoreapi.com/users/6', { method: "DELETE" }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中，去刪除用戶 ID 為 6 的使用者資料 方法設定為 DELETE，不需要提供 body --- 實務上，API 設計時，有人偏好這種 GET POST PUT DELETE 都用到的寫法 有人則偏好只使用 GET 與 POST 撈資料一律都用 GET，除此之外，會更新到資料庫內容的動作，通通都用 POST 這屬於主觀偏好，沒有對錯問題，團隊討論後有共識即可 --- 上面的範例，用戶參數都是在網址最後加上 `/{ID}` 這種格式帶入 實務上，GET 參數也可能用 `?id={ID}` 這種格式 而在 POST 或其他類型的請求中，用戶參數也可能直接加在 `body: JSON.stringify({` 裡面的屬性之中 各種做法，都可以，一樣屬於主觀偏好，沒有對錯問題，團隊討論後有共識即可 ## 課後作業 接續上一課的作業，加上刪除按鈕 請翻閱 API 文件說明 https://fakestoreapi.com/docs 找出「刪除商品」的 API 把每個商品的 html 改成 ``` <li> <span>xxx</span> <button>Details</button> <button>Delete</button> </li> ``` 點擊 Delete 按鈕，就發送 API 出去 - 主機回應成功的話，就把整個 `<li>` 元素刪掉 - 主機回應失敗的話，就跳 alert 提醒用戶稍後再試 做出以上功能，你就完成這次的課程目標了！

0個讚   19留言 987瀏覽

練習JS路上好多挫折

我英文很OK 所以資源滿豐富的 這點我很幸運也很感激 只是我點子也比較多 常常想要實作超出我能力的東西 例如串後端 資料庫 弄出會員系統 發送email驗證 一些實作python的爬蟲 因為我也常常搜尋人家前輩的作品 心有所向 就很嚮往也做出那些東西 (例如這種論壇 就是我的目標之一 之前一直很期待有這種程式的討論社團.....版主實現我的願望 ) 可是後端我完全不懂 還不會 目前還在專注練習html+css+js的小作品 心中的焦慮感太強了...導致往往都沒法動手 畢竟我未來要搞的作品就是專案 有時候小作品太小 都沒什麼動力練 可是自己實力又還不到.... 挫折˙真的滿滿啊... 感謝版主開這個論壇 讓我抒發... 學習規劃真的不容易...

2個讚   3留言 504瀏覽

7 個好用的 React Hooks：可以在很多專案直接使用

Hooks 是 React 最強大的功能之一。 它們使我們能夠輕鬆地在應用程式的元件中重用功能。掛鉤的最大優點在於它們的可重用性——您可以跨元件和專案重用掛鉤。 以下是我在每個 React 專案中重複使用的七個最重要的鉤子。今天就試一試，看看它們在建置您自己的 React 應用程式時是否有幫助吧。 原文出處：https://dev.to/webdevhero-com/7-react-hooks-for-every-project-1jdo --- 在我們開始之前，要先澄清一下：並非每個自定義 React 鉤子都需要由您編寫。事實上，我將提到的所有鉤子都來自一個庫“@mantine/hooks”。 Mantine 是一個很棒的第三方庫，其中包含這些鉤子等等。他們將為您的 React 應用程式加入您能想到的幾乎所有重要功能。 您可以在 [mantine.dev](https://mantine.dev) 查看“@mantine/hooks”的文件。 ## `useIntersection` 鉤子 當用戶在您的應用程式中向下滾動頁面時，您可能想知道某個元素何時對他們可見。 例如，您可能希望僅在用戶看到特定元素時才啟動動畫。或者，您可能希望在他們向下滾動頁面一定程度後，顯示或隱藏元素。 ![use intersection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zilwvvdjppw9uz82iixo.gif) 要獲取有關元素是否可見的訊息，我們可以使用 **Intersection Observer API。**這是瀏覽器中內建的 JavaScript API。 我們可以使用純 JavaScript 單獨使用 API，但要知道有關特定元素是否在其滾動容器內，有個好方法是使用 useIntersection 掛鉤。 ``` import { useRef } from 'react'; import { useIntersection } from '@mantine/hooks'; function Demo() { const containerRef = useRef(); const { ref, entry } = useIntersection({ root: containerRef.current, threshold: 1, }); return ( <main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}> <div ref={ref}> <span> {entry?.isIntersecting ? 'Fully visible' : 'Obscured'} </span> </div> </main> ); } ``` 要使用它，我們需要做的就是在我們的元件中呼叫鉤子，並提供一個根元素。 Root 是滾動容器，可以使用 useRef 掛鉤將其作為 ref 提供。 `useIntersection` 回傳一個我們傳遞給目標元素的 ref，我們想要觀察其在滾動容器中的交集。 一旦我們有了對元素的引用，我們就可以追蹤元素是否相交。在上面的範例中，我們可以根據 entry.isIntersecting 的值查看元素何時被遮擋或何時完全可見。 您可以傳遞其他參數，這些參數允許您配置與目標可見百分比相關的**閾值**。 ## `useScrollLock` 鉤子 另一個與滾動相關的鉤子是 useScrollLock 鉤子。這個鉤子非常簡單：它使您能夠鎖定 body 元素上的任何滾動。 我發現當您想在當前頁面上顯示疊加層或跳出視窗，並且不想讓用戶在後台頁面上上下滾動時，它會很有幫助。這使您可以將注意力集中在視窗上，或允許在其自己的滾動容器內滾動。 ``` import { useScrollLock } from '@mantine/hooks'; import { Button, Group } from '@mantine/core'; import { IconLock, IconLockOpen } from '@tabler/icons'; function Demo() { const [scrollLocked, setScrollLocked] = useScrollLock(); return ( <Group position="center"> <Button onClick={() => setScrollLocked((c) => !c)} variant="outline" leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />} > {scrollLocked ? 'Unlock scroll' : 'Lock scroll'} </Button> </Group> ); } ``` `useScrollLock` 將用戶的滾動鎖定在頁面上的當前位置。該函數回傳一個陣列，它可以被解構，如上面的程式碼所示。 第二個值是一個允許我們鎖定滾動的函數。另一方面，第一個解構值是一個布林值，它告訴我們滾動條是否已被鎖定。 這個值很有用，例如，如果你想在滾動鎖定時顯示某些內容或告訴用戶它已被鎖定。您可以在下面的示例中看到，當滾動條被鎖定或解鎖時，我們會在我們的按鈕中進行指示。 ![use scroll lock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wywccv7uexfrhfgayqj9.gif) ## `useClipboard` 鉤子 在許多情況下，您希望提供一個按鈕，允許用戶將內容複製到他們的剪貼板，這是存儲複製文本的地方。 一個很好的例子是，如果您的網站上有一個程式碼片段，並且您希望用戶輕鬆複製它。為此，我們可以使用另一個 Web API——**剪貼板 API**。 `@mantine/hooks` 為我們提供了一個方便的 `useClipboard` 鉤子，它回傳幾個屬性：`copied`，它是一個布林值，告訴我們是否已使用鉤子將值複製到剪貼板，以及` copy` 函數，我們可以將我們喜歡的任何字串值傳遞給它以進行複制。 在我們的範例中，我們想複製一個程式碼片段，供我們的用戶粘貼到他們喜歡的地方，如下面的影片所示： ![使用剪貼板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n0xd02vdg65bbfmb2xh.gif) ## useClipboard demo 當他們點擊我們指定的複制按鈕時，我們呼叫我們的 `copy` 函數，將程式碼片段傳遞給它，然後顯示一個小複選標記或向他們表明文本已被複製的東西。 巧妙的是 `useClipboard` 掛鉤帶有 **超時值**。在給定的超時時間（以毫秒為單位）之後，複製的狀態將被重置，向用戶顯示他們可以再次復製文本。 ## `useDebouncedValue` 鉤子 如果您的應用程式中有搜尋輸入，下一個鉤子“useDebouncedValue”是必不可少的。 每當用戶使用輸入執行搜尋時，搜尋操作通常涉及對 API 的 HTTP 請求。 您將遇到的一個典型問題是每次擊鍵都會執行查詢（請求），尤其是如果您希望用戶在鍵入時接收搜尋結果。即使對於一個簡單的搜尋查詢，也不需要在用戶完成輸入他們想要的內容之前執行這麼多請求。 這是 useDebounceValue 掛鉤的一個很好的用例，它對傳遞給它的文本應用「防抖」功能。 ``` import { useState } from 'react'; import { useDebouncedValue } from '@mantine/hooks'; import { getResults } from 'api'; function Demo() { const [value, setValue] = useState(''); const [results, setResults] = useState([]) const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms useEffect(() => { if (debounced) { handleGetResults() } async function handleGetResults() { const results = await getResults(debounced) setResults(results) } }, [debounced]) return ( <> <input label="Enter search query" value={value} style={{ flex: 1 }} onChange={(event) => setValue(event.currentTarget.value)} /> <ul>{results.map(result => <li>{result}</li>}</ul> </> ); } ``` 您使用 useState 將輸入的文本儲存在一個狀態中，並將狀態變數傳遞給 useDebouncedValue 。 作為該掛鉤的第二個參數，您可以提供一個等待時間，即值被「反抖」的時間段。反抖使我們能夠執行更少的查詢。 您可以在下面的影片中看到結果，用戶在其中鍵入內容，並且僅在 200 毫秒後，我們才能看到去抖值。 ![使用去抖值](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfb5kqb6bxbkqfvog1hw.gif) ## `useMediaQuery` 鉤子 我一直使用的另一個非常有用的鉤子是 useMediaQuery 鉤子。 Media Queries 在純 CSS 中使用，`useMediaQuery` 鉤子允許我們訂閱我們傳遞給鉤子的任何媒體查詢。 例如，在我們的元件中，假設我們想要顯示一些文本或根據特定螢幕寬度（例如 900 像素）更改元件的樣式。我們像在 CSS 中一樣提供媒體查詢，並且 useMediaQuery 回傳給我們一個 true 或 false 的 matches 值。 ``` import { useMediaQuery } from '@mantine/hooks'; function Demo() { const matches = useMediaQuery('(min-width: 900px)'); return ( <div style={{ color: matches ? 'teal' : 'red' }}> {matches ? 'I am teal' : 'I am red'} </div> ); } ``` 它用 JavaScript 告訴我們媒體查詢的結果，這在我們想要使用 `style` 屬性在 JSX 中直接更改樣式時特別有用，例如。 ![使用媒體查詢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7al1apywiq08ntgs4d8l.gif) 簡而言之，對於少數無法使用 CSS 處理媒體查詢的情況，這是一個必不可少的鉤子。 ## `useClickOutside` 鉤子 下一個掛鉤 - `useClickOutside` - 可能看起來很奇怪，但當您真正需要它時，您會發現它的重要性。 當你開發一個下拉菜單，或者在頁面內容前面彈出，並且之後需要關閉的東西時，這個鉤子是必不可少的。通過單擊按鈕打開這些類型的元件之一非常容易。關閉這些元件有點困難。 為了遵循良好的 UX 實踐，我們希望任何阻礙用戶視圖的東西都可以通過單擊元素外部輕鬆關閉。這正是 useClickOutside 掛鉤讓我們做的。 當我們呼叫 useClickOutside 時，它會返回一個 ref，我們必須將其傳遞給我們想要檢測點擊的外部元素。通常該元素將由一個布林狀態片段控制，例如我們在下面的示例中的狀態（即值“opened”）。 ``` import { useState } from 'react'; import { useClickOutside } from '@mantine/hooks'; function Demo() { const [opened, setOpened] = useState(false); const ref = useClickOutside(() => setOpened(false)); return ( <> <button onClick={() => setOpened(true)}>Open dropdown</button> {opened && ( <div ref={ref} shadow="sm"> <span>Click outside to close</span> </div> )} </> ); } ``` `useClickOutside` 接受一個回調函數，該函數控制當您實際單擊該元素外部時發生的情況。 在大多數情況下，我們想做一些非常簡單的事情，就是關閉它。為此，您可能需要一個狀態設置器（如 `setOpened`）並向其傳遞一個 false 值，然後隱藏您覆蓋的內容。 ![use click outside](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jidp380brennyatol7w.gif) ## `useForm` 鉤子 在這個列表中，我最喜歡和最有用的鉤子是 `useForm` 鉤子。 這個鉤子專門來自 Mantine，涉及從庫中安裝一個特定的包：`@mantine/form`。它會為您提供在 React 中建立表單所需的一切，包括驗證輸入、顯示錯誤訊息以及在提交表單之前確保輸入值正確的能力。 `useForm` 接受一些初始值，這些初始值對應於您在表單中的任何輸入。 ``` import { TextInput, Button } from '@mantine/core'; import { useForm } from '@mantine/form'; function Demo() { const form = useForm({ initialValues: { email: '' }, validate: { email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), }, }); return ( <div> <form onSubmit={form.onSubmit((values) => console.log(values))}> <TextInput withAsterisk label="Email" placeholder="[email protected]" {...form.getInputProps('email')} /> <Button type="submit">Submit</Button> </form> </div> ); } ``` `useForm` 的最大好處是它的助手，例如 `validate` 函數，它接收輸入到每個輸入的值，然後允許您建立驗證規則。 例如，如果您有一個電子郵件輸入，您可能有一個正則表達式來確定它實際上是否是一個有效的電子郵件（如您在上面的程式碼中所見）。如果沒有，那麼您可以顯示一條錯誤訊息並阻止提交表單。 ![使用表格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n13l1gqejzx6y227p0j2.gif) 您如何獲取已輸入到表單中的值？ Mantine 提供了一個非常方便的助手，叫做“getInputProps”，你只需提供你正在使用的輸入的名稱（比如電子郵件），它就會自動設置一個 onChange 來追蹤你在表單中輸入的值. 此外，為了處理表單提交，並在其值未通過驗證規則時阻止送出，它有一個特殊的 `onSubmit` 函數，您可以將其包裹在常規的 onSubmit 函數中。除了應用驗證規則之外，它還會負責在表單事件上呼叫 `preventDefault()`，這樣您就不必手動執行此操作。 我只用了這個鉤子的基本功能，但我強烈建議您在下一個專案中使用它。傳統上，表單很難正常工作，尤其是需要驗證和可見錯誤訊息的表單。 `useForm` 讓它變得異常簡單！ --- 以上，簡單分享，希望對您有幫助。

0個讚   0留言 1,223瀏覽

JavaScript 系列三：練習4 ── 表單驗證

## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證，可以用 alert 跳訊息提醒就好 但因為 alert 視窗，普遍被認為太醜、功能太弱，設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜，可以在送出表單的時候驗證，也可以在打字輸入的時候就同時驗證 請上網搜尋 `form validation ui`，四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 實做一個「註冊帳戶」表單 欄位有 - 用戶暱稱 - Email 信箱 - 密碼 接著有一個「註冊」按鈕 按下按鈕的時候，如果有欄位空白，就在欄位的下方或者旁邊，顯示紅字提示 各個欄位的驗證檢查條件如下： - 用戶暱稱 -> 不能為空白、必須在40字以內 - Email 信箱 -> 不能為空白、必須包含 `@` 符號 - 密碼 -> 不能為空白、必須在8字以上、必須在100字以內 請稍微加一些 css 屬性，弄得漂亮一點 --- 請搜尋 `javascript 包含字串` `javascript 字串長度`，了解相關用法，才有辦法完成本課作業 --- 做出以上功能，你就完成這次的課程目標了！

0個讚   30留言 1,314瀏覽

JavaScript 系列三：練習2 ── toast 吐司元件

## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好 很多網站因為沒有做好適當的 toast 元件，使用者在操作時常常覺得「表單到底有沒有送出？」「網站當機了是不是？」 通常要將 toast 做成幾種不同樣式，根據不同使用情境來使用 由於 toast 通常會直接蓋在網站的上方正中央（或者右上角、左下角，不一定） 會蓋到網頁畫面，所以通常會做成「顯示幾秒之後自動關閉」 請上網搜尋 `toast ui` `toast component`，四處觀摩一下業界常見的設計 --- 要在倒數幾秒之後執行任務，你需要 `setTimeout` 這個函式。請自行上網搜尋一下，了解這個函式的用法 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <button onclick="toastSuccess()">成功訂購商品</button> <hr> <button onclick="toastError()">訂購商品失敗</button> <div class="toast toast-success"> 訂購成功！可以查看 Email 確認訂單細節！ </div> <div class="toast toast-error"> 抱歉，訂購失敗！請稍後重新嘗試 </div> ``` --- 這邊共有兩個按鈕，模擬兩種使用情境 兩個吐司元件，一開始預設是隱藏的，不會在畫面上看到 請寫出 `toastSuccess` 函式的內容，在點擊按鈕後，將「成功吐司」顯示在畫面上 5 秒鐘，之後自動消失 請寫出 `toastError` 函式的內容，在點擊按鈕後，將「錯誤吐司」顯示在畫面上 5 秒鐘，之後自動消失 成功吐司請做成綠色 錯誤吐司請做成紅色 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！

0個讚   33留言 1,504瀏覽

快速複習 React 基本觀念＆實務範例：推薦新手參考

React 作為一個強大的前端工具，有很多需要熟悉的基本觀念＆語法。 這篇文章做一個快速的全面整理，方便工作時，可以隨時翻閱，希望您喜歡。 - 原文出處：https://dev.to/reedbarger/the-react-cheatsheet-for-2020-real-world-examples-4hgg ## 核心概念 ### 元素和 JSX - React 元素的基本語法 ``` // In a nutshell, JSX allows us to write HTML in our JS // JSX can use any valid html tags (i.e. div/span, h1-h6, form/input, etc) <div>Hello React</div> ``` - JSX 元素就是一段表達式 ``` // as an expression, JSX can be assigned to variables... const greeting = <div>Hello React</div>; const isNewToReact = true; // ... or can be displayed conditionally function sayGreeting() { if (isNewToReact) { // ... or returned from functions, etc. return greeting; // displays: Hello React } else { return <div>Hi again, React</div>; } } ``` - JSX 允許我們嵌套表達式 ``` const year = 2020; // we can insert primitive JS values in curly braces: {} const greeting = <div>Hello React in {year}</div>; // trying to insert objects will result in an error ``` - JSX 允許我們嵌套元素 ``` // to write JSX on multiple lines, wrap in parentheses: () const greeting = ( // div is the parent element <div> {/* h1 and p are child elements */} <h1>Hello!</h1> <p>Welcome to React</p> </div> ); // 'parents' and 'children' are how we describe JSX elements in relation // to one another, like we would talk about HTML elements ``` - HTML 和 JSX 的語法略有不同 ``` // Empty div is not <div></div> (HTML), but <div/> (JSX) <div/> // A single tag element like input is not <input> (HTML), but <input/> (JSX) <input name="email" /> // Attributes are written in camelcase for JSX (like JS variables <button className="submit-button">Submit</button> // not 'class' (HTML) ``` - 最基本的 React 應用程式需要三樣東西： - 1. ReactDOM.render() 渲染我們的應用程序 - 2. 一個 JSX 元素（在此情況下，稱為根節點） - 3. 一個用於掛載應用程式的 DOM 元素（通常是 index.html 文件中 id 為 root 的 div） ``` // imports needed if using NPM package; not if from CDN links import React from "react"; import ReactDOM from "react-dom"; const greeting = <h1>Hello React</h1>; // ReactDOM.render(root node, mounting point) ReactDOM.render(greeting, document.getElementById("root")); ``` ### 元件和 Props - 基本 React 元件的語法 ``` import React from "react"; // 1st component type: function component function Header() { // function components must be capitalized unlike normal JS functions // note the capitalized name here: 'Header' return <h1>Hello React</h1>; } // function components with arrow functions are also valid const Header = () => <h1>Hello React</h1>; // 2nd component type: class component // (classes are another type of function) class Header extends React.Component { // class components have more boilerplate (with extends and render method) render() { return <h1>Hello React</h1>; } } ``` - 如何使用元件 ``` // do we call these function components like normal functions? // No, to execute them and display the JSX they return... const Header = () => <h1>Hello React</h1>; // ...we use them as 'custom' JSX elements ReactDOM.render(<Header />, document.getElementById("root")); // renders: <h1>Hello React</h1> ``` - 元件可以在我們的應用程式中重複使用 ``` // for example, this Header component can be reused in any app page // this component shown for the '/' route function IndexPage() { return ( <div> <Header /> <Hero /> <Footer /> </div> ); } // shown for the '/about' route function AboutPage() { return ( <div> <Header /> <About /> <Testimonials /> <Footer /> </div> ); } ``` - 資料可以通過 props 動態傳遞給元件 ``` // What if we want to pass data to our component from a parent? // I.e. to pass a user's name to display in our Header? const username = "John"; // we add custom 'attributes' called props ReactDOM.render( <Header username={username} />, document.getElementById("root") ); // we called this prop 'username', but can use any valid JS identifier // props is the object that every component receives as an argument function Header(props) { // the props we make on the component (i.e. username) // become properties on the props object return <h1>Hello {props.username}</h1>; } ``` - Props 不可直接改變（mutate） ``` // Components must ideally be 'pure' functions. // That is, for every input, we be able to expect the same output // we cannot do the following with props: function Header(props) { // we cannot mutate the props object, we can only read from it props.username = "Doug"; return <h1>Hello {props.username}</h1>; } // But what if we want to modify a prop value that comes in? // That's where we would use state (see the useState section) ``` - 如果我們想將元素/元件作為 props 傳遞給其它元件，可以用 children props ``` // Can we accept React elements (or components) as props? // Yes, through a special property on the props object called 'children' function Layout(props) { return <div className="container">{props.children}</div>; } // The children prop is very useful for when you want the same // component (such as a Layout component) to wrap all other components: function IndexPage() { return ( <Layout> <Header /> <Hero /> <Footer /> </Layout> ); } // different page, but uses same Layout component (thanks to children prop) function AboutPage() { return ( <Layout> <About /> <Footer /> </Layout> ); } ``` - 可以用三元運算子來條件顯示元件 ``` // if-statements are fine to conditionally show , however... // ...only ternaries (seen below) allow us to insert these conditionals // in JSX, however function Header() { const isAuthenticated = checkAuth(); return ( <nav> <Logo /> {/* if isAuth is true, show AuthLinks. If false, Login */} {isAuthenticated ? <AuthLinks /> : <Login />} {/* if isAuth is true, show Greeting. If false, nothing. */} {isAuthenticated && <Greeting />} </nav> ); } ``` - Fragments 是用來顯示多個元件的特殊元件，無需向 DOM 添加額外的元素 - Fragments 適合用在條件邏輯 ``` // we can improve the logic in the previous example // if isAuthenticated is true, how do we display both AuthLinks and Greeting? function Header() { const isAuthenticated = checkAuth(); return ( <nav> <Logo /> {/* we can render both components with a fragment */} {/* fragments are very concise: <> </> */} {isAuthenticated ? ( <> <AuthLinks /> <Greeting /> </> ) : ( <Login /> )} </nav> ); } ``` ### 列表和 keys - 使用 .map() 將資料列表（陣列）轉換為元素列表 ``` const people = ["John", "Bob", "Fred"]; const peopleList = people.map(person => <p>{person}</p>); ``` - .map() 也可用來轉換為元件列表 ``` function App() { const people = ['John', 'Bob', 'Fred']; // can interpolate returned list of elements in {} return ( <ul> {/* we're passing each array element as props */} {people.map(person => <Person name={person} />} </ul> ); } function Person({ name }) { // gets 'name' prop using object destructuring return <p>this person's name is: {name}</p>; } ``` - 迭代的每個 React 元素都需要一個特殊的 `key` prop - key 對於 React 來說是必須的，以便能夠追蹤每個正在用 map 迭代的元素 - 沒有 key，當資料改變時，React 較難弄清楚元素應該如何更新 - key 應該是唯一值，才能讓 React 知道如何分辨 ``` function App() { const people = ['John', 'Bob', 'Fred']; return ( <ul> {/* keys need to be primitive values, ideally a generated id */} {people.map(person => <Person key={person} name={person} />)} </ul> ); } // If you don't have ids with your set of data or unique primitive values, // you can use the second parameter of .map() to get each elements index function App() { const people = ['John', 'Bob', 'Fred']; return ( <ul> {/* use array element index for key */} {people.map((person, i) => <Person key={i} name={person} />)} </ul> ); } ``` ### 事件和事件處理器 - React 和 HTML 中的事件略有不同 ``` // Note: most event handler functions start with 'handle' function handleToggleTheme() { // code to toggle app theme } // in html, onclick is all lowercase <button onclick="handleToggleTheme()"> Submit </button> // in JSX, onClick is camelcase, like attributes / props // we also pass a reference to the function with curly braces <button onClick={handleToggleTheme}> Submit </button> ``` - 最該先學的 React 事件是 onClick 和 onChange - onClick 處理 JSX 元素上的點擊事件（也就是按鈕動作） - onChange 處理鍵盤事件（也就是打字動作） ``` function App() { function handleChange(event) { // when passing the function to an event handler, like onChange // we get access to data about the event (an object) const inputText = event.target.value; const inputName = event.target.name; // myInput // we get the text typed in and other data from event.target } function handleSubmit() { // on click doesn't usually need event data } return ( <div> <input type="text" name="myInput" onChange={handleChange} /> <button onClick={handleSubmit}>Submit</button> </div> ); } ``` ## React Hooks ### State and useState - useState 為我們提供 function component 中的本地狀態 ``` import React from 'react'; // create state variable // syntax: const [stateVariable] = React.useState(defaultValue); function App() { const [language] = React.useState('javascript'); // we use array destructuring to declare state variable return <div>I am learning {language}</div>; } ``` - 注意：此段文章中的任何 hook 都來自 React 套件，且可以單獨導入 ``` import React, { useState } from "react"; function App() { const [language] = useState("javascript"); return <div>I am learning {language}</div>; } ``` - useState 還為我們提供了一個 `setter` 函數來更新它的狀態 ``` function App() { // the setter function is always the second destructured value const [language, setLanguage] = React.useState("python"); // the convention for the setter name is 'setStateVariable' return ( <div> {/* why use an arrow function here instead onClick={setterFn()} ? */} <button onClick={() => setLanguage("javascript")}> Change language to JS </button> {/* if not, setLanguage would be called immediately and not on click */} <p>I am now learning {language}</p> </div> ); } // note that whenever the setter function is called, the state updates, // and the App component re-renders to display the new state ``` - useState 可以在單個元件中使用一次或多次 ``` function App() { const [language, setLanguage] = React.useState("python"); const [yearsExperience, setYearsExperience] = React.useState(0); return ( <div> <button onClick={() => setLanguage("javascript")}> Change language to JS </button> <input type="number" value={yearsExperience} onChange={event => setYearsExperience(event.target.value)} /> <p>I am now learning {language}</p> <p>I have {yearsExperience} years of experience</p> </div> ); } ``` - useState 可以接受 primitive value 或物件 ``` // we have the option to organize state using whatever is the // most appropriate data type, according to the data we're tracking function App() { const [developer, setDeveloper] = React.useState({ language: "", yearsExperience: 0 }); function handleChangeYearsExperience(event) { const years = event.target.value; // we must pass in the previous state object we had with the spread operator setDeveloper({ ...developer, yearsExperience: years }); } return ( <div> {/* no need to get prev state here; we are replacing the entire object */} <button onClick={() => setDeveloper({ language: "javascript", yearsExperience: 0 }) } > Change language to JS </button> {/* we can also pass a reference to the function */} <input type="number" value={developer.yearsExperience} onChange={handleChangeYearsExperience} /> <p>I am now learning {developer.language}</p> <p>I have {developer.yearsExperience} years of experience</p> </div> ); } ``` - 如果新狀態依賴於之前的狀態，我們可以在 setter 函數中使用一個函數來為我們提供之前狀態的值 ``` function App() { const [developer, setDeveloper] = React.useState({ language: "", yearsExperience: 0, isEmployed: false }); function handleToggleEmployment(event) { // we get the previous state variable's value in the parameters // we can name 'prevState' however we like setDeveloper(prevState => { return { ...prevState, isEmployed: !prevState.isEmployed }; // it is essential to return the new state from this function }); } return ( <button onClick={handleToggleEmployment}>Toggle Employment Status</button> ); } ``` ### side effects 和 useEffect - useEffect 讓我們在 function component 中執行副作用。什麼是副作用？ - 副作用是我們需要接觸外部世界的地方。例如，從 API 獲取資料或操作 DOM。 - 副作用是可能以不可預測的方式，改變我們元件狀態的操作（導致「副作用」）。 - useEffect 接受 callback function（稱為 effect 函數），預設情況下，每次重新渲染時都會運行 - useEffect 在我們的元件載入後運行，可以準確在元件的各個生命週期觸發 ``` // what does our code do? Picks a color from the colors array // and makes it the background color function App() { const [colorIndex, setColorIndex] = React.useState(0); const colors = ["blue", "green", "red", "orange"]; // we are performing a 'side effect' since we are working with an API // we are working with the DOM, a browser API outside of React useEffect(() => { document.body.style.backgroundColor = colors[colorIndex]; }); // whenever state is updated, App re-renders and useEffect runs function handleChangeIndex() { const next = colorIndex + 1 === colors.length ? 0 : colorIndex + 1; setColorIndex(next); } return <button onClick={handleChangeIndex}>Change background color</button>; } ``` - 如果不想在每次渲染後都執行 callback function，可以在第二個參數傳一個空陣列 ``` function App() { ... // now our button doesn't work no matter how many times we click it... useEffect(() => { document.body.style.backgroundColor = colors[colorIndex]; }, []); // the background color is only set once, upon mount // how do we not have the effect function run for every state update... // but still have it work whenever the button is clicked? return ( <button onClick={handleChangeIndex}> Change background color </button> ); } ``` - useEffect 讓我們能夠在 dependencies 陣列的內容改變時，才執行 - dependencies 陣列是第二個參數，如果陣列中的任何一個值發生變化，effect function 將再次運行 ``` function App() { const [colorIndex, setColorIndex] = React.useState(0); const colors = ["blue", "green", "red", "orange"]; // we add colorIndex to our dependencies array // when colorIndex changes, useEffect will execute the effect fn again useEffect(() => { document.body.style.backgroundColor = colors[colorIndex]; // when we use useEffect, we must think about what state values // we want our side effect to sync with }, [colorIndex]); function handleChangeIndex() { const next = colorIndex + 1 === colors.length ? 0 : colorIndex + 1; setColorIndex(next); } return <button onClick={handleChangeIndex}>Change background color</button>; } ``` - 可以在 useEffect 最後回傳一個函數，來取消訂閱某些效果 ``` function MouseTracker() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); React.useEffect(() => { // .addEventListener() sets up an active listener... window.addEventListener("mousemove", handleMouseMove); // ...so when we navigate away from this page, it needs to be // removed to stop listening. Otherwise, it will try to set // state in a component that doesn't exist (causing an error) // We unsubscribe any subscriptions / listeners w/ this 'cleanup function' return () => { window.removeEventListener("mousemove", handleMouseMove); }; }, []); function handleMouseMove(event) { setMousePosition({ x: event.pageX, y: event.pageY }); } return ( <div> <h1>The current mouse position is:</h1> <p> X: {mousePosition.x}, Y: {mousePosition.y} </p> </div> ); } // Note: we could extract the reused logic in the callbacks to // their own function, but I believe this is more readable ``` - 使用 useEffect 撈取資料 - 請注意，如果要使用更簡潔的 async/awit 語法處理 promise，則需要建立一個單獨的函數（因為 effect callback function 不能是 async） ``` const endpoint = "https://api.github.com/users/codeartistryio"; // with promises: function App() { const [user, setUser] = React.useState(null); React.useEffect(() => { // promises work in callback fetch(endpoint) .then(response => response.json()) .then(data => setUser(data)); }, []); } // with async / await syntax for promise: function App() { const [user, setUser] = React.useState(null); // cannot make useEffect callback function async React.useEffect(() => { getUser(); }, []); // instead, use async / await in separate function, then call // function back in useEffect async function getUser() { const response = await fetch("https://api.github.com/codeartistryio"); const data = await response.json(); setUser(data); } } ``` ### 效能和 useCallback - useCallback 是一個用來提高元件性能的 hook - 如果你有一個經常重新渲染的元件，useCallback 可以防止元件內的 callback function 在每次元件重新渲染時都重新創建（導致元件重新運行） - useCallback 僅在其依賴項之一改變時重新運行 ``` // in Timer, we are calculating the date and putting it in state a lot // this results in a re-render for every state update // we had a function handleIncrementCount to increment the state 'count'... function Timer() { const [time, setTime] = React.useState(); const [count, setCount] = React.useState(0); // ... but unless we wrap it in useCallback, the function is // recreated for every single re-render (bad performance hit) // useCallback hook returns a callback that isn't recreated every time const inc = React.useCallback( function handleIncrementCount() { setCount(prevCount => prevCount + 1); }, // useCallback accepts a second arg of a dependencies array like useEffect // useCallback will only run if any dependency changes (here it's 'setCount') [setCount] ); React.useEffect(() => { const timeout = setTimeout(() => { const currentTime = JSON.stringify(new Date(Date.now())); setTime(currentTime); }, 300); return () => { clearTimeout(timeout); }; }, [time]); return ( <div> <p>The current time is: {time}</p> <p>Count: {count}</p> <button onClick={inc}>+</button> </div> ); } ``` ### Memoization 和 useMemo - useMemo 和 useCallback 非常相似，都是為了提高效能。但就不是為了暫存 callback function，而是為了暫存耗費效能的運算結果 - useMemo 允許我們「記憶」已經為某些輸入進行了昂貴計算的結果（之後就不用重新計算了） - useMemo 從計算中回傳一個值，而不是 callback 函數（但可以是一個函數） ``` // useMemo is useful when we need a lot of computing resources // to perform an operation, but don't want to repeat it on each re-render function App() { // state to select a word in 'words' array below const [wordIndex, setWordIndex] = useState(0); // state for counter const [count, setCount] = useState(0); // words we'll use to calculate letter count const words = ["i", "am", "learning", "react"]; const word = words[wordIndex]; function getLetterCount(word) { // we mimic expensive calculation with a very long (unnecessary) loop let i = 0; while (i < 1000000) i++; return word.length; } // Memoize expensive function to return previous value if input was the same // only perform calculation if new word without a cached value const letterCount = React.useMemo(() => getLetterCount(word), [word]); // if calculation was done without useMemo, like so: // const letterCount = getLetterCount(word); // there would be a delay in updating the counter // we would have to wait for the expensive function to finish function handleChangeIndex() { // flip from one word in the array to the next const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1; setWordIndex(next); } return ( <div> <p> {word} has {letterCount} letters </p> <button onClick={handleChangeIndex}>Next word</button> <p>Counter: {count}</p> <button onClick={() => setCount(count + 1)}>+</button> </div> ); } ``` ### Refs 和 useRef - Refs 是所有 React 組件都可用的特殊屬性。允許我們在元件安裝時，創建針對特定元素/元件的引用 - useRef 允許我們輕鬆使用 React refs - 我們在元件開頭呼叫 useRef，並將回傳值附加到元素的 ref 屬性來引用它 - 一旦我們創建了一個引用，就可以用它來改變元素的屬性，或者可以呼叫該元素上的任何可用方法（比如用 .focus() 來聚焦） ``` function App() { const [query, setQuery] = React.useState("react hooks"); // we can pass useRef a default value // we don't need it here, so we pass in null to ref an empty object const searchInput = useRef(null); function handleClearSearch() { // current references the text input once App mounts searchInput.current.value = ""; // useRef can store basically any value in its .current property searchInput.current.focus(); } return ( <form> <input type="text" onChange={event => setQuery(event.target.value)} ref={searchInput} /> <button type="submit">Search</button> <button type="button" onClick={handleClearSearch}> Clear </button> </form> ); } ``` ## 進階 Hook ### Context 和 useContext - 在 React 中，盡量避免創建多個 props 來將資料從父元件向下傳遞兩個或多個層級 ``` // Context helps us avoid creating multiple duplicate props // This pattern is also called props drilling: function App() { // we want to pass user data down to Header const [user] = React.useState({ name: "Fred" }); return ( // first 'user' prop <Main user={user} /> ); } const Main = ({ user }) => ( <> {/* second 'user' prop */} <Header user={user} /> <div>Main app content...</div> </> ); const Header = ({ user }) => <header>Welcome, {user.name}!</header>; ``` - Context 有助於將 props 從父組件向下傳遞到多個層級的子元件 ``` // Here is the previous example rewritten with Context // First we create context, where we can pass in default values const UserContext = React.createContext(); // we call this 'UserContext' because that's what data we're passing down function App() { // we want to pass user data down to Header const [user] = React.useState({ name: "Fred" }); return ( {/* we wrap the parent component with the provider property */} {/* we pass data down the computer tree w/ value prop */} <UserContext.Provider value={user}> <Main /> </UserContext.Provider> ); } const Main = () => ( <> <Header /> <div>Main app content...</div> </> ); // we can remove the two 'user' props, we can just use consumer // to consume the data where we need it const Header = () => ( {/* we use this pattern called render props to get access to the data*/} <UserContext.Consumer> {user => <header>Welcome, {user.name}!</header>} </UserContext.Consumer> ); ``` - useContext hook 可以移除這種看起來很怪的 props 渲染模式，同時又能在各種 function component 中隨意使用 ``` const Header = () => { // we pass in the entire context object to consume it const user = React.useContext(UserContext); // and we can remove the Consumer tags return <header>Welcome, {user.name}!</header>; }; ``` ### Reducers 和 useReducer - Reducers 是簡單、可預測的（純）函數，它接受一個先前的狀態物件和一個動作物件，並回傳一個新的狀態物件。例如： ``` // let's say this reducer manages user state in our app: function reducer(state, action) { // reducers often use a switch statement to update state // in one way or another based on the action's type property switch (action.type) { // if action.type has the string 'LOGIN' on it case "LOGIN": // we get data from the payload object on action return { username: action.payload.username, isAuth: true }; case "SIGNOUT": return { username: "", isAuth: false }; default: // if no case matches, return previous state return state; } } ``` - Reducers 是一種強大的狀態管理模式，用於流行的 Redux 狀態管理套件（這套很常與 React 一起使用） - 與 useState（用於本地元件狀態）相比，Reducers 可以通過 useReducer hook 在 React 中使用，以便管理我們應用程序的狀態 - useReducer 可以與 useContext 配對來管理資料並輕鬆地將資料傳遞給元件 - useReducer + useContext 可以當成應用程式的整套狀態管理系統 ``` const initialState = { username: "", isAuth: false }; function reducer(state, action) { switch (action.type) { case "LOGIN": return { username: action.payload.username, isAuth: true }; case "SIGNOUT": // could also spread in initialState here return { username: "", isAuth: false }; default: return state; } } function App() { // useReducer requires a reducer function to use and an initialState const [state, dispatch] = useReducer(reducer, initialState); // we get the current result of the reducer on 'state' // we use dispatch to 'dispatch' actions, to run our reducer // with the data it needs (the action object) function handleLogin() { dispatch({ type: "LOGIN", payload: { username: "Ted" } }); } function handleSignout() { dispatch({ type: "SIGNOUT" }); } return ( <> Current user: {state.username}, isAuthenticated: {state.isAuth} <button onClick={handleLogin}>Login</button> <button onClick={handleSignout}>Signout</button> </> ); } ``` ### 編寫 custom hooks - 創建 hook 就能輕鬆在元件之間重用某些行為 - hook 是一種比以前的 class component 更容易理解的模式，例如 higher-order components 或者 render props - 根據需要，隨時可以自創一些 hook ``` // here's a custom hook that is used to fetch data from an API function useAPI(endpoint) { const [value, setValue] = React.useState([]); React.useEffect(() => { getData(); }, []); async function getData() { const response = await fetch(endpoint); const data = await response.json(); setValue(data); }; return value; }; // this is a working example! try it yourself (i.e. in codesandbox.io) function App() { const todos = useAPI("https://todos-dsequjaojf.now.sh/todos"); return ( <ul> {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} </ul> ); } ``` ### Hooks 規則 - 使用 React hooks 有兩個核心規則，要遵守才能正常運作： - 1. Hooks 只能在元件開頭呼叫 - Hooks 不能放在條件、迴圈或嵌套函數中 - 2. Hooks只能在 function component 內部使用 - Hooks 不能放在普通的 JavaScript 函數或 class component 中 ``` function checkAuth() { // Rule 2 Violated! Hooks cannot be used in normal functions, only components React.useEffect(() => { getUser(); }, []); } function App() { // this is the only validly executed hook in this component const [user, setUser] = React.useState(null); // Rule 1 violated! Hooks cannot be used within conditionals (or loops) if (!user) { React.useEffect(() => { setUser({ isAuth: false }); // if you want to conditionally execute an effect, use the // dependencies array for useEffect }, []); } checkAuth(); // Rule 1 violated! Hooks cannot be used in nested functions return <div onClick={() => React.useMemo(() => doStuff(), [])}>Our app</div>; } ``` --- 以上是快速整理，希望對您有幫助！

0個讚   0留言 1,463瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 「自學網頁の嬰兒教材：JavaScript（一）作業分享」
🔥 為什麼站長的教材，看起來是教 Vue 2，不是教 Vue 3？
🔥 package-lock.json 到底是什麼？
🔥 鑽研系統設計學問的 5 個 Github Repo
🔥 簡單介紹一下 NextJS 框架
  近期留言
熱門搜尋： email COM 學習 工作 1 使用 c C 研 node.js with 房 2 . 題 前 開發 ＣＳＳ 4 作為 第一 vs ci 專案 20 10 go JS github id Ai % 網站 50 作業 git 前端 ui 技術 分享 AI 語言 api html java 測試 研究 結構 資料庫 COMPO vue 系列 ` jav 工程師 app 搜尋 javascript 後端 HTML Java react user React 架構 cn 非同步 練習 遊戲 CSS CD 謝謝 Line Can 作業分享 rest this 新創 聊天 prisma PHP .NET create for 分離 js Github 資料結構 promise GIT 主題 Node 網頁 part ") ruby PYTHON console JAVA 機器人
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。