iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Software Development

2022年 JavaScript 相關應用及學習之繁體中文選系列 第 5

[2022年 JavaScript 相關應用及學習之繁體中文選] 在React生態圈打滾的一年feat.TypeScript | 心得導讀

  • 分享至 

  • xImage
  •  

導言

前端開放三本柱: React, Vue, Angular 各有利弊好壞。
對於已經有 React 開發經驗的開發者來說,本書作者已自身之經驗闡述在 React 生態圈中,所需要注意的各種媒角,是相當有價值的。
對於沒有 React 開發經驗的開發者來說,那更是一本好書,本書從頭開始教學實作 React 專案,而因為 React 目前早就改版,改用 hook 為主要的開發進入點,以前那些舊觀念可以放掉了。
架構
本書從零開始教授建立 React 專案,並參雜作者本身之開發經驗,內容可謂相豐富。
react 相關
hooks
redux

除了 react 之外,還有許多必備的知識點,都會在本書學習到應用的方式
npm
webpack
jsx
router
 SPA: Single Page Application
單元測試
github

摘要

前言
Lifecycle 被稱為生命週期,在 Component 中,我們可以大致把生命週期分成三個:
Component Render 完畢。
Component 內的 State 改變。
Component 被移除時。

所以 Lifecycle 可以是一個 Component 的生老病死,文中會來學習如何控制每個階段應該要發生的事情。
使用方法
useEffect
useEffect 是掌管 Function Component 生命週期的 Hooks,此 Hooks 會接收一個 function,在特定情況的時候執行它
Component Render 完時
當 Component Render 後,我們期望能夠從 API 中獲取資料,但只需在開始時執行一次,今後不論是 State 改變或是 Component 被移除時,都不再調用,那就得在使用 useEffect 時,將空陣列 [] 送入第二個參數:
Component 內的 State 更新時
State 更新的生命週期得用到 useEffect 的第二個參數,就是上方傳入空陣列的那個位置,我們可以藉由指定 State 名稱,使它作為該 State 改變時會調用的 function:
Component 被移除時
最後一個生命週期就像 State 改變前的操作,只是不需要在 useEffect 第二個參數陣列中指定 State ,如同 Component Render 後,直接給一個空陣列就可以了。

總結

難易度

⭐⭐⭐

自備技能

1.JS 程式撰寫能力
2.HTML 基本知識

適合對象

中階

心得

雖然說是從0開始教,但因為作者本身的知識太豐富,書籍提及的知識點可能對於知學者太說,一開始太過豐富。
所以個人是覺得有一定基礎,再看本書,才有辦法去理解作者所講述的內容。
所以如果看的有點吃力,可以參考另一本 從 hooks 開始 讓你的網頁 react 起來 會較容易入門 react。


上一篇
[2022年 JavaScript 相關應用及學習之繁體中文選] JavaScript概念三明治:基礎觀念、語法原理一次帶走! | 心得導讀
下一篇
[2022年 JavaScript 相關應用及學習之繁體中文選] web設計職人必修 ux design初學者學習手冊 | 心得導讀
系列文
2022年 JavaScript 相關應用及學習之繁體中文選31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言