react

必備 React 套件 - useHooks

開發 React 專案一定多多少少要用到 hooks, 除了有些能改善效能之外，很大一部分也可以讓 React 專案的程式碼更加簡潔、更好維護😎 useHooks 是由 ui.dev 團隊開源的 React hooks 大補帖，裡面

Last updated on  Aug 17, 2023  by  Amo Chen  ‐ 1 min read

免費課程 - React with TypeScript Tutorial

React with TypeScript Tutorial 是一個教你怎麼用 TypeScript 寫 React 的免費課程，這個課程比較適合 React 以及 TypeScript 已經有些程度的人， 課程分為 3 個大章節，每個小節都很簡短，都是先揭示一個問題

Posted on  May 11, 2023  by  Amo Chen  ‐ 1 min read

SWR - 輕鬆完成資料載入(Data fetching)的 React 套件

SWR 是我跟 ChatGPT 商討一些功能實作時，發現由 Vercel 團隊（知名的 Next.js 開發團隊）所開源的 React 套件，可以幫我們輕鬆完成 React 頁面載入之前需要呼叫 API 拿資料的任務。 以往這

Posted on  May 7, 2023  by  Amo Chen  ‐ 1 min read

如何逃離 React useState 地獄

嚴格說起來，我應該不算前端工程師，只是會寫一點點 React 而已。 不過，我遇到的問題卻也很實際，就是隨著 state 越來越多，你的 code 裡面會有一堆 useState(...) ，這叫 useState hell ，看

Posted on  Apr 21, 2023  by  Amo Chen  ‐ 1 min read

Airbnb 的視覺化圖表元件庫 - visx

每次看到別人做出很棒的視覺化圖表時，不僅覺得好美好有意境，還會充滿敬佩！心想哪天我要是也能如此有創意就好了！ 想不到 Airbnb 超級佛心把各種視覺畫圖表

Posted on  Apr 7, 2023  by  Amo Chen  ‐ 1 min read

從零開始的 React 教學 Part 6 - React.memo

從零開始的 React 教學 Part 5 - PureComponent 中提到 PureComponent 透過 shallow comparison 加速比較 props / state 的速度，為 React 應用(application)帶來更好的效能。

p.s. 雖然 PureComponent 提升比較速度，但也犧牲比較時的精準度，使用時一定要理解何謂 shallow comparison, 才不會帶來預期外的 bug

不過 PureComponent 需要以繼承 PureComponent 類別(class) 的方式實作 Class Component ，對於某些 Functional Components 來說，沒辦法這樣進行。

所幸， React 也有提供 React.memo API ，讓開發者能夠將 Functional Component 用 React.memo 包裝起來，達到類似 PureComponent 的作用。

本文將介紹 React.memo API 如何使用，以及使用上應注意的點。

Posted on  Oct 13, 2022  in  ReactJS 前端框架  by  Amo Chen  ‐ 3 min read

從零開始的 React 教學 Part 5 - PureComponent

從零開始的 React 教學 Part 3 - Class Components 一文介紹 Class Components, React 讓開發者們透過繼承 React.Component 類別並且實作少數方法就能夠實作 React 元件(component)。

但除了 React.Component , React 還提供另外 1 個 React.PureComponent 類別，開發者們也可以選擇繼承該類別實作 React 元件。

React components can be defined by subclassing React.Component or React.PureComponent.

不過這 2 個類別行為存在若干差異，如果沒有透徹了解就很容易造成 bug 或者效能上的問題。

Posted on  Oct 5, 2022  in  ReactJS 前端框架  by  Amo Chen  ‐ 4 min read