Frontend

前言 這篇是 useEffect，在這個 Hook 寫完之後就會直接進入實戰了，話不多說，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 這個 Hook 的用途是當你需要與 React 外部的東西互動時，將這些外部互動包成一組 “Effect”，用來將切開元件與外部系統的互動，並且避免不穩定的多次渲染。 useEffect(setup, dependencies?) 我們可以看到他的初始化分成兩個部分: 傳入 setup: 傳入一個 function，與外部系統互動的細節，包含當系統結束時的後處理，為一組完整的 Effect。 dependencies: 可忽略，當需要時傳入一組 Array，做為這組 Effect 的依賴，當依賴的值改變時，就會觸發後處理，並且重新初始化，互動 / 連結外部系統。 範例 以下是使用 useEffect 的範例。 import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { // Effect setup function const connection = createConnection(serverUrl, roomId); connection.connect(); // 後處理 function return () => { connection....

前言 這篇是 useRef，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 這個 Hook 的用途是避免元件中不需要重新 render 的部分被重新 render。 const ref = useRef(initialValue) 我們可以看到他的初始化分成兩個部分: 傳入 initialValue: 初始值，會傳入 useRef 的 current 給元件使用。 傳出 ref: useRef 會回傳只有一個屬性(current)的物件，current 的預設值就是我們剛剛傳入的 initialValue。 ref 就是一個單純的 javascript 的物件，這個變數並不會被 React 單向資料流所監看，所以也不會因為這個物件內中的變動而觸發 re-render。 使用：要使用 ref 就直接讀取 / 修改 ref.current 就可以了，不需要像 useState 那樣使用 get / set 的模式。 範例 以下是使用 useRef 的範例。 import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const handleStartClick = () => { const intervalId = setInterval(()=>{ // ....

前言 痾…不小心跳過了整整 4 個 Hooks…幹 這篇是 useContext，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 這個 Hook 比較特別，是用來定義全域變數用的，像是網頁的暗黑/白色主題切換需要讀取一個統一的變數，就會使用到這個 Hook，在父元件中注入後就可以在子元件中取得 Context 的值。 const SomeContext = createContext(initValue); 我們可以看到他的初始化分成兩個部分: 傳入 initValue: 傳入初始值，用來建立全域變數。 傳出 SomeContext: 用來將值注入元件的本體。 範例 以下是使用 useContext 的範例。 import { createContext, useContext, useState } from 'react'; // initialization const ThemeContext = createContext('light'); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> // inject on parent component <ThemeContext.Provider value={theme}> <Form /> </ThemeContext.Provider> <Button onClick={() => { setTheme(theme === 'dark' ?...

前言 接續前一篇，這篇是 useCallback，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 用來快取會根據輸入值有不同定義的 function，基本上可以想像成用來快取 function 的 useMemo。 const cachedFn = useCallback(fn, dependencies) 我們可以看到他分成三個部分: 傳入 fn: 傳入一個 function 架構，裡面包含會變動的元素。 dependencies: 用來比較函式是否有變動了的變數陣列。 傳出 cachedFn: 最新的計算好的 function，和其他 hook 提供的一樣都是 read only。 範例 以下是使用 useCallback 的範例。 // ProductPage.js import { useCallback } from 'react'; function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // ....

前言 接續前一篇，這篇是 useMemo，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 用來快取常常需要重新計算的狀態，如果有用過 vue.js 的 computed，應該很容易上手這個 hook。 const cachedValue = useMemo(calculateValue, dependencies) 我們可以看到他分成三個部分: 傳入 calculateValue: 傳入一個 function，用來計算出每次的結果並回傳。 dependencies: 用來關注那些變動了就應該重新計算狀態的變數。 傳出 cachedValue: 最新的計算好的 state，和其他 hook 提供的一樣都是 read only。 範例 以下是使用 useMemo 的範例。 // without useMemo // component need to recalculate todo list, // even props are the same. export default function TodoList({ todos, tab, theme }) { // ... return ( <div className={theme}> <List items={filterTodos(todos, tab)} /> </div> ); } // with useMemo // when props are the same, // component will use cached todos from latest render....

前言 接續前一篇，這篇是 useReducer，請直接開始閱讀文章！ 官網 文章架構 如上篇，我會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 當元件中具有相當複雜的邏輯，用 useState 會影響你的元件的可維護性，就可以使用 useReducer 來提升元件的可維護性。 const [state, dispatch] = useReducer(reducer, initialArg, init?) 我們可以看到他分成五個部分: 傳入 reducer: 是一個函式，用來定義如何更新 state，有兩個參數分別是 state 和 action，reducer 會透過我們傳入的 action 來更新 state。 initArg: 和 useState 中的 initState 一樣，用來設定一個或多個 state。 init?: 這是用來產生預設 state 的函式，這個函式會被傳入 initArg，用來給 init 函式使用，這個函式回傳才會是最終的 initArg。(可能有點難懂，等等用範例解釋!) 傳出 state: state 就是你儲存的值，一開始會和你的 initArg 是一樣的值，注意這裡和 useState 的 state 一樣都是唯讀的，要改變你的 state 就 dispatch 一個 action。 dispatch: 用 action 來觸發 reducer 更新 state。 範例 以下是一些使用 useReducer 的範例。...

前言 最近正在學習 React，在我學這套框架之前，早就聽過很多人被 Hooks 搞得一個頭兩個大了，於是決定一邊學習一邊把重點寫下來，避免我之後又突然忘記了 XDD 官網 文章架構 這篇會按照官方文件的架構，首先講解定義，再用一些簡單的範例講解應該怎麼使用這些 Hooks，最後再講解一些容易犯錯的用例。 定義 … 範例 … 易錯用例 … 定義 第一個是 useState，用於簡單儲存元件中的狀態使用。 const [state, setState] = useState(initialState) 我們可以看到他分成三個部分: initState: 預設狀態，就是這個 State 的預設值。 state: state 就是你儲存的值，一開始會和你的 initState 是一樣的值，注意所有 State 都是唯讀的，要改變你的 state 就使用 setState。 setState: 用來改變 state，由於 React 採用的是單向資料流，不像 vue 是雙向資料流，可以直接更改 state，所以要透過 setState，告訴 react 你改了這個 state，請幫我更新到畫面上。 範例 以下是一些使用 useState 的範例。 import { useState } from 'react'; function MyComponent() { // init const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // usage // age: 28 // handleAgeChange(30) // age: 30 const handleAgeChange = (newAge) => { setAge(newAge) } // name: 'Taylor' // handleNameChange('John') // age: 'John' const handleNameChange = (newName) => { setName(newName) } // todos: [{todo1}, {todo2}] // handleTodosChange({todo3}) // todos: [{todo1}, {todo2}, {todo3}] const handleTodosChange = (newTodo) => { setTodos([....

前言 Ionic 使用的是 Capacitor，是一套可以用來將打包好的網頁包成 App 的工具，這篇將示範在 m 晶片的 MacBook 上測試編譯 ios 版本的 App，另外這篇會提到一下我編譯過程出現的問題，如果照著這篇有問題可以參考看看。 文件參考 這篇會用到以下兩篇官方文件 環境準備 建置流程 步驟 編譯環境準備 為 Ionic 專案安裝 capacitor 在專案中加入所需系統 ios / android 打開 xcode / 使用 capacitor 指令測試 Step 1 - 編譯環境準備 由於先前就有大部分要求的編譯環境了，所以這裡我會簡單帶過。 Node.js : 官網 到官網下載 mac 版 Node.js，像一般應用程式安裝方式。 homebrew: 官網 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" CocoaPods: 官網 也可以用 gem(ruby package manager)，但這邊推薦用 homebrew 安裝，因為用 gem 安裝在apple silicon mac 上安裝會有架構問題，需要另外疑難排解。 brew install cocoapods Xcode & Xcode Command Line Tools: App store 到 App store 下載 Xcode，安裝完之後因為預設不包含 Xcode Command Line Tools，需要輸入下列指令安裝。...

前言 由於專案用途需要使用到 Ionic 這個框架，這個框架可以用前端三大框架 (Angular, React, Vue)為基底進行開發很好上手，所以想把學習的過程做個筆記，這篇會從建立到運行開發環境做個介紹，編譯部分之後再寫XD 官網供參 https://ionicframework.com/ 步驟 下載 Ionic CLI 建立新的 Ionic 專案 在本機測試預覽 Step 1 - 下載 Ionic CLI 先使用 NPM 在全域安裝 Ionic CLI，這會在後面用於建立專案與運行專案使用。 npm install -g @ionic/cli Step 2 - 建立新的 Ionic 專案 輸入下列指令，然後按照 CLI 提供的步驟 ionic start # Use app creation wizard? n # => 也可以選 Y，但就會使用網頁去建立一個新的 Repo # Framework: Vue # => 選擇要使用的前端框架 # Project name: sample-ionic # => 專案名稱，隨便輸入就好~ # Starter template: tabs # 這裡他會給你四個選項，建議第一次碰 Ionic 可以選 tabs 看看一些基本的用法 選擇完各種選項之後，安裝完各種依賴後，專案就建立完成了。...

撰文動機 因為我是忘忘人所以做個筆記😀 安裝步驟 用 Vite 建立新專案 安裝 Vue Router & Pinia 安裝 Element plus 加載套件 開始實作 用 Vite 建立新專案 npm create vite@latest 接下來按照步驟建立專案就好 專案名稱 選擇框架 是否使用 Type Script Done 安裝 Vue Router & Pinia 請自己按需要增減 npm install pinia vue-router@4 --save 安裝 Element plus npm install element-plus --save 加載套件 建立 vue router 檔案 import {createRouter, createWebHistory} from 'vue-router' import HelloWorld from '@/components/HelloWorld.vue'; export const router = createRouter({ history: createWebHistory(), routes: [ {path: '/', component: HelloWorld}, ], }); 安裝完之後進到 main....