iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

給初入JS框架新手的React.js入門系列 第 30

【React.js入門 - 30】 學了React之後,然後呢?

(借一下JSDC的標題,我很喜歡XD)

太好了,我好像有辦法用一個前端框架寫專案了,那接下來我該做什麼?

從學了React,到寫了兩三個前端框架專案之後,我的感想是這樣的:

學習如何拆出好的元件架構

我覺得學習完現代框架最重要的事情是練習「把一個頁面拆成多個元件」的這個過程。
舉例來說,這是Dcard的頁面:

如果不論Layout最上面的部分的話,以前我會這樣拆(同色代表同元件):

可是我現在會這樣拆:

理由不是因為拆的元件比較多所以比較好,而是我做類似專案時,寫到後面發現拆成這樣拿到其他地方或是架構改變時比較方便。像是左邊的那個List如果拆成List+ListItem,如果我突然哪天想要做出「List中的List」就很簡單,讓List成為List的children就可以了。不過也有可能有更好的拆法~

如果能夠拆出好的元件架構,看到你code的同事,會幸福吧。

培養設計「可重複利用的元件」的思維

「想辦法減少重複寫的地方」算是軟體工程師的基礎能力吧,自己認為前端工程師在這方面又要多一點想像或是經驗,有些直覺上會覺得不一樣的UI,其實只要用幾個參數去控制它們就能包成同一個檔案。這點在前端框架的元件概念出現後又更重要了,如果剛開始寫的時候有預想這個元件出現在其他場景的處理方法,別的地方要用的話就不用整個重刻。像是在設計元件的時候,元件的大小是要用絕對還是相對單位,哪些東西要用props控制之類的。

從插件工程師,學習成為插件工程師

專案一旦大起來,每個東西都自己手刻會很麻煩,所以「使用別人的插件」是一項不可或缺的技能,要懂得看api、了解什麼地方是可以更改的、甚至是找插件的能力...

那為什麼說從插件工程師學習成為插件工程師呢?

以前忘記在哪看過一篇文章,說有的人只會用別人寫的插件,導致這些人的實力就永遠停留在那了。而我自己是覺得,新手不知道怎麼實現功能是很正常的,用插件也有助於維持專案的穩定性。但是在使用插件的同時,應該觀察別人寫的方法,像是多認識幾個DOM api、學別人分割架構的邏輯、分析作者提供給別人的介面優缺點... 久了就會發現慢慢有能力可以靠自己實現想要的元件,甚至寫出別人會想用的東西,成為有能力寫完整插件的工程師。

順便分享一個很好用的資源: brillout/awesome-react-components
這裡面收集了超多專門給React的插件,想的到基本元件的幾乎都有。

更深的React - 那些被我略過的事情

  • React Virtual DOM
    前面我只是很簡單的帶過大概的概念而已,但React Virtual DOM是React和其他框架不同的重點之一。

    在一開始我說過,我們寫的網頁就像是一棵有很多節點的樹,而React Virtual DOM的原理是,每次要更新時,對新產生的樹做dfs(深度優先搜尋),每拜訪一個節點,就跟原本舊樹的節點比較,若有差異,就紀錄下來。最後實際只去DOM更改有差異的地方。

    那麼會什麼這樣會比原本操作DOM好呢?

    過去我們常常用元素.innerHTML去更改元素在DOM上的內容。但是這樣做有個缺點,即便我們新的內容只有一部份不一樣,還是要把該位置的內容完全更新。而Virtual DOM的好處就是只更新用JS比較後發現不一樣的地方,所以比起直接操作DOM可以節省不少資源。注意Virtual DOM是能降低浪費的資源,直接操作DOM的速度平均還是會比加一層Virtual DOM快

    更詳細的內容可以參考:

    1. 网上都说操作真实 DOM 慢,但测试结果却比 React 更快,为什么?
    2. 理解 Virtual DOM
  • React hooks
    這系列我們只講了兩個,但React hook還有很多,強烈建議可以搭配現在版上其他的系列文來了解他們。

  • webpack或是其他打包工具
    在這系列我們使用了React幫我們設定好一切東西的create-react-app,但是有些狀況下不會允許我們使用這項工具。學習好webpack,不但有助於以後在React專案中加入更多協助開發的工具,未來如果要轉換成React以外的工具也能在設定上更快上手。

  • PWA(Progressive Web App)
    先前我們在解析index.js的時候跳過了這個東西,簡單來說它是能夠把網站包成App的一個技術。目前鐵人賽也有專門在講PWA的文章,如果你是為了之後要寫React Native而順便來學React的,可以考慮一下

  • Context api & Redux
    前面那一篇提過了,基本上有點規模的專案都會用到。

  • React ref
    前面那一篇提的非控制組件會用到這個東西。

  • React-router-dom的api
    Link那邊我略過滿多功能,官方文件寫得挺清楚,不過有需要再去查就好。

  • 其他
    應該還有一些是我略過但我忘記我略過(?)的東西哈哈,多看看其他鐵人賽的系列,會有更多收穫的!

我還是要學React Native,轉換上會有困難嗎?

自己目前也在學React Native,目前我覺得大部份的架構、元件之間的邏輯都是差不多的,只要把DOM元素轉成對應元件(例如: div轉view,span轉text),以及插件改成RN專用的就可以。

更多其他的工具

「前處理」的概念下,也誕生了不少好用的東西,常見像是:

  • Javascript: TypeScript
  • HTML: Pug
  • css : Sass、Less、Scss
  • 測試單元 : Jest、Mocha

還有好多好多提高效率的各種工具。有興趣去看看是什麼吧!

善用框架,不要被框架綁架

雖然React好用,學完會有回不去的感覺(?),但它只是一個工具,不要為了用而用。如果是簡單的專案就用原生javascript/jQuery解決就好。

然後這系列結束了

如果你是新手,希望這個系列有幫助你進入React,也希望你能從鐵人賽其他講React的系列學到更多東西。

晚點或這幾天可能會發一篇講個心得跟自己參賽的狀況吧,也有可能不會發就是了。

嗯,就這樣。


上一篇
【React.js入門 - 29】 使用圖片、使用css檔、新手容易遇到的問題
下一篇
後記 - 一個菜雞、胡言亂語
系列文
給初入JS框架新手的React.js入門31

1 則留言

0
iT邦新手 5 級 ‧ 2020-08-23 18:52:03

如果是簡單的專案就用原生javascript/jQuery解決就好。

關於這部分有個菜鳥的小疑惑,剛好我現在第一份工作就是使用 react & react native ,常在想我已經比較熟悉 react ,如果遇到比較簡單的專案,還是再去學習使用「原生javascript/jQuery」來解比較好嗎?還是就直接用熟悉的 react 來做就好?

感謝你的文章分享,讓我認識一遍 react 的大小事。

我並不是什麼資深的工程師,目前也還沒從大學畢業。
不過可以跟你聊聊我的狀況:

這系列的文章其實是在我硬用React刻出人生第一份大型專案後寫出來的東西。老實說,在我寫完這系列後,我發現自己對於原生的JS、DOM api理解的內容還太少,也並不是很理解「需要使用框架」的理由。

講白一點,我覺得我只是照著這些框架規定的語法去寫我的code。

於是我開始回過頭去用原生JS寫一些很小的專案(例如: 自己的履歷),設法硬逼自己找出用原始方式的解法。

在這個過程中,除了更理解自己過去在做什麼、認識更多DOM api以外,我意識到我的程式碼開始變的肥大、不好管理,必須要重新思考架構、才能讓程式碼的運用最佳化。

漸漸的,我發現我開始在寫「React、Vue這些框架在做的事情」。

後來當我又回過頭來在寫框架程式的時候,我覺得除了更理解了為什麼他們的架構要這樣設計外,我也能在原始DOM和框架提供的方式中,比過往更直覺、靈活、正確地選擇實現目標功能的手段,切割元件的思維也和過往不同。

「框架並不是要去侷限你撰寫程式的方式,而是幫你做了你原本就要做的事情。」

這是我在這段過程中體會到的,提供給你參考。
(今年如果我有參賽鐵人賽的話也會考慮從這個角度寫,前提是我有空的話啦 哈哈)

iT邦新手 5 級 ‧ 2020-11-26 10:30:02 檢舉

嗨 不好意思 過這麼久才回覆。
謝謝你的建議,我也會再找機會去了解一些功能,如何使用原生 js 實現。

我要留言

立即登入留言