繼續昨天的 useState 練習，今天要練習的是物件資料，這樣的用法很常被用在 input 練習上，先來看個範例。 舉例來說： /* 宣告 userData 物件，並且裡頭 account & password 資料為 String， ** 使用 setUserData() 透過 useState 綁定上 userData */ const [userData, setUserData] = useState({ account: "", password: "", }); 那...
React Hook - useState 進入 React Hook，並嘗試用 useState 這個 Hook 來做出改變狀態值的練習。 React Hook Hook 其實就是 JavaScript function，但要特別注意兩個使用的規則： 只在最上層呼叫 Hook，不要在迴圈、條件式或是巢狀的 function 內呼叫 Hook（詳細解說） 只在 React Function 中呼叫 Hook，例如：在 React function component 中呼叫 Hook。 今日...
Computed 跟 Methods 的差異 computed() 會依據計算的資料進行緩存，只要你的資料沒有重新被更改，你的 computed 不會被重新計算執行。 methods() 不會進行緩存，每次都會重新執行，但是可以傳速參數進行處理。 差異比較 執行效能： computed < methods computed 在效能的負載量會小於 methods ，因為他會將資料進行緩存，也就是如果監聽的資料被改動時，則可以快速的將緩存呼叫出來，進行更動，不需要每一次都重新去執行完整的函示。 記...
readonly 為了確保 reactive or ref 所宣告的變數數值可以成功傳遞，但無法被更動時，就可以使用 readonly，readonly經常在跨組件使用共同的 Func 時，經常被使用到，因為能夠大大降低產生 bug 的機會。 當被 readonly 所包覆的數值有人想要改動時，將會在 devtool 顯示 warn 的警告。 const { reactive, readonly } = Vue; const App = { setup() { const Num ...
JSX 屬性練習 根據昨天提到的，在撰寫 React 會大量使用到 JSX 的部分，除了基本的樣板以外，今天也持續介紹常見的 JSX 使用，一起來練習看看吧！ JSX 最外層只能有一個根元件 一個元件不能返回多個元素，就像一個函數不能返回多個值一樣，有點像是 Vue template 的寫法一樣，外層必須得有個 div 或是 template 標籤來做包覆。 錯誤示範： const element = <h2> Hello！</h2><h2> 你好！</h2> 正確示範： const elem...
React 提供了稱作 JSX 的語法，作為 JavaScript extension syntax，JSX 是一種跟 HTML/XML 很相似的語法，用來寫所謂的 React elements (React 元素)。 const jsxItem = <h1>Hello, world!</h1>; 這個語法叫做 JSX，是一個 JavaScript 的語法擴充。 JSX 可能為讓你想到一些樣板語言，但不一樣的地方是 JSX 允許你使用 JavaScript 所有的功能。 <h1>Hello, ...
