React 又肥又慢,為什麼我還要用它?


Posted by Jas on 2021-05-23

寫一下我對 React 的感想

React 的缺點

React + react-dom 約 40kB,相較 Preact 只要 4kB,是一個硬傷。
許多文章都提出了用 Preact 取代 React 來達到效能優化的目的,例如 Gatsby 的官方文件

我在工作上也有嘗試過這樣的方式做優化效能,但一陣子之後還是換回去 React 了。

Dan Abramov 在 JSConf Iceland 展示了一個很卡頓的 app,在影片中他提到以現在的 React 架構無解,要靠之後的 Concurrent Mode 跟 Suspense 才能解。他當下打開這些功能之後這個 app 就變得很順,台下一片掌聲加歡呼。

同樣一個 app 用 Svelte 來做,沒有任何優化就非常的順暢 😂。

但為什麼我們都不覺得 React 很慢?一個原因是他在大部分的使用場景「夠快了」,不是每個 app 都像上面那個那樣複雜。

另一個原因是在開發時我們都有默默的在做優化,像是使用 React.memo, useMemo, useCallback 等。如果 React 真的很快,我想他不用提供這麼多優化的方法給開發者。

React 的優點

開發體驗

Declarative 是一個很大的優點,讓開發者不用自己去做中間的 DOM 操作,寫起來很快又不會有人為的錯誤。不過這個現在大家都有就是了。

再來就是寫 React 就是寫 JavaScript,不用花時間學 template 語法,還可以自由地用 JS 的各種寫法來開發。

工具上,有 React Developer Tools 跟 React Fast Refresh 可以幫助開發者 debug 以及加快開發速度,真的很貼心。

生態系大

由於 React 的開發者很多,幾乎想得到的元件都可以在 npm 上面直接找到來使用,各式各樣的工具也都會優先支援 React;開發上遇到問題也很容易找到相關的討論以及解答。

穩定

React 出來很久,加上開發者很多,該被抓到的 bug 都被抓到了,也支援各種瀏覽器,穩定度自然不在話下,給人一種安心的感覺。

持續進化,而且好 migrate

React 雖然有點年紀,但一推出新功能還是讓人眼睛一亮,像是前陣子的 React hooks,以及上面提到的 Concurrent Mode 跟 Suspense,還有正在研發的 React Server Components,都很令人期待。而且這些新功能往往可以漸進式的引入既有的程式當中,過往的經驗升版不會遇到太重大的問題或是需要進行大量的改動。

React 的雙面刃

他是一個 library

相較於 Angular 等 framework 很多地方開發者要自己來(或是自己 survey),這點考驗了開發者的架構能力以及技術選型能力;好處是很彈性,各種搭配可以有很多玩法。

沒有 magic

手動的部分很多,例如要自己 setState(做 form 的時候就會覺得 Vue 比較好用 😩)、hooks 要自己維護 dependencies 等等,但也相對的好理解運作的流程

總結

對我而言,React 的優點大部分時間大於缺點,穩定成熟生態系大,要什麼東西去 npm 隨便撈都有好幾種可以選,遇到問題也很容易找到解答。只是寫起來有時會覺得很麻煩,肥的問題無解,只能轉彎,之後有時間再寫這個主題。


#Web #React #javascript







Related Posts

Day 64 - Top 10 Movie List

Day 64 - Top 10 Movie List

Flattening multidimensional arrays in JavaScript

Flattening multidimensional arrays in JavaScript

Browser Rendering Optimization

Browser Rendering Optimization


Comments