iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

Angular 工程師的 React 陣痛期:30 天心智模型重建 系列

以 Angular + Spring Boot 為主力的全端工程師,因公司專案需要開始轉換到 React。這個系列不是 React 教學,而是一份陣痛筆記——記錄一個有框架包袱的開發者,在換軌過程中每一次都要問自己「本來框架會幫我做,現在為何得自己來」的落差。

參賽天數 8 天 | 共 8 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1|寫了三年多 Angular,然後被告知下個專案用 React...

陣痛期開始 會議上,PM 把新專案的技術規格攤開來。前端那一欄選型寫著 React 。 我沒說話。我只是在心裡默默地把過去三年累積的肌肉記憶——ng指令、@In...

2026-09-15 ‧ 由 Shawn 分享
DAY 2

Day 2|我的 Service 呢?沒有 DI 的第一週

本系列討論基準Angular 以 v20 為主(standalone components、Signals、inject() 為預設寫法)。React 這邊指...

2026-09-16 ‧ 由 Shawn 分享
DAY 3

Day 3|從 @if/@for 到 JSX:畫面交還給 JavaScript

畫面多了一個 0 那天在做一個檔案上傳列表頁。空清單的時候不該顯示表格,很簡單的需求: {files.length && <FileTab...

2026-09-17 ‧ 由 Shawn 分享
DAY 4

Day 4 | 口袋少了生命週期鉤子,換成 useEffect 的陷阱

觸發停不下來 寫了一個檔案列表,call api後需要重新渲染。看起來很無害: function FileList({ page }: { page: numb...

2026-09-18 ‧ 由 Shawn 分享
DAY 5

Day 5:沒有 Zone.js,也沒有 Signals:React 怎麼知道要重畫

我改了資料,畫面沒反應 需求很小:按一個按鈕,把使用者年齡加一。 function Profile() { const [user, setUser] =...

2026-09-19 ‧ 由 Shawn 分享
DAY 6

Day 6|@Input/@Output → props 與 callback:歡迎來到單向資料流

元件裡改了資料,然後什麼都沒發生 檔案列表要支援重新命名。我在 FileRow 裡寫了這段: interface FileRowProps { file:...

2026-09-20 ‧ 由 Shawn 分享
DAY 7

Day 7|沒有 @angular/cli之後:結構要自己立規矩

框架給了骨架,然後就沒了 npx create-react-router@latest file-manager 跑完打開資料夾,大致上會有: app/...

2026-09-21 ‧ 由 Shawn 分享
DAY 8

Day 8|Observable 與 Promise 的世界觀差異

這週又是新大陸 上週是震驚期:DI 沒了、生命週期沒了、雙向綁定沒了,我一路在找對應方法,然後一路就是沒有。 這週換了個態度。找不到對應方法,那我就自己試著模擬...

2026-09-22 ‧ 由 Shawn 分享