2022 最適合你的前端框架： React 發展趨勢和前景！

2022 最適合你的前端框架： React 發展趨勢和前景！

爲什麼你該了解 React？ 因為世界級知名的網站，如 Netflix、Uber、Airbnb 等等都採用 React。前端框架在使用率上， React 佔據了不可撼動的位置，而近期這股風潮，更是吹向台灣各大電商，紛紛採用 React 前端框架開發。

如果你會這個前端開發框架，幾乎是拿到年薪百萬的入場券！ 因此，如果你正在思考你的下一個程式語言該學什麼，你沒看錯，是下一個程式語言， 因為如果是初學者的話，現在是開始要學第一個程式語言的話，可能要依據你周邊資源，才能決定哪個語言更適合你！推薦你看這篇「自學程式現場」新手應該要學什麼程式語言？

綜上所述，如果正在思考「你的下一個程式語言該學什麼」 不妨到五倍紅寶石 Youtube 看看這場直播。以下為五倍紅寶石課程團隊為大家準備的重點整理！

江湖在走，工具要有！2022 為什麼 React 還是受歡迎？

為什麼國內外企業愛用 React ？

1. Data Binding 框架的出現：以往沒有使用框架時，在 1.資料改變後，還需 2.透過操作 DOM (Document object model) 來告訴畫面要怎麼變動，過程繁複，且 code 寫起來會比較囉唆。但透過 React 的 data binding，便能在改變資料的當下，同時更新畫面，對團隊成員來說，更能注重在程式邏輯面。
2. Component (元件) 化：工程師們可以透過分工，每個人負責設計不同的元件，如此不會有重工的問題，且功能、外觀相近的元件，也可 (在微調後) 輕鬆的在專案內被重複使用，如常出現的「下一步」按鈕，便可透過更改文字及綁定的 function，達到重複使用的效果。
3. React Native：可以用 React 開發 iOS 或是 Android APP。以往在開發手機 App 時，可能得用 Swift 寫一個放在 iOS 系統的 APP、再用 Kotlin 寫一個放在 Android 系統的 APP，工程師要開發及維護兩個專案，是很辛苦且費時的一件事。但現在有許多企業或是區塊鏈的公司，他們的 APP 多數是以 React native 開發，便能讓你用一個專案，同時部屬到 iOS 跟 Android。擁有比起其他市面上的框架，所做不到的強大功能。

業界哪些企業使用 React ?

1. 國外企業：Facebook, Disney+, Netflix, Instagram, WhatsApp, Dropbox, Line 部分功能
2. 國內企業：蝦皮、東森購物

對於 React 未來發展的看法？

1. React 只開發及提供 React 框架，所使用的語法為標準的 JavaScript。React 是 JavaScript 的 framework，JavaScript 可以寫前端、後端、APP，通吃所有的平台，JavaScript 可以做到的， React 也可以做到，只要有 Web 存在的一天，就會有網站開發的需求。
2. React 維護者是 Facebook，有一整個團隊在營運 framework，版本迭代的頻率高，如有出現嚴重 Bug，也會即時快速更新。

工具升級，謹慎更新！React 18 新版本

對於 React 18 有什麼看法？使用後有什麼立即的影響嗎？

這次版本的修改，主要是程式的核心效能，對一般的開發人員來說，並不會有任何的影響。唯一要注意的 React 18 是不支援 IE 11，如果公司專案還需要顧及 IE11 的話，建議維持在 React 17。從 React 17 升級為 React 18 只需要改一行程式進入點，而其他程式碼完全相容。

效能提升有何好處？

改善 Automatic Batching 問題，以前某些狀態下會造成過多 render (渲染) 的問題，升級為 React 18 後，為了要讓網站效能好，就不再做過多的渲染。再者，升級後的 React 18 多了一些新的函式，更能優化專案效能。

工具在手，希望無窮！針對不同階段工程師學習 React 建議

對於尚未學習過前端框架的工程師，想以 React 為優先學習，會給予什麼樣的建議？

學習 React 難度一開始會比較高，學習之前必須要先知道物件導向程式語言，且 React 的撰寫過程中，常常使用到 JavaScript ES6 的語法，所以需要具備 JavaScript ES6 的一些基礎知識，如：Functions, 變數宣告等等，會更方便寫 React。 在學習前，可以嘗試不看官方文件，使用純 JavaScript 寫出 To Do List，至少對 JavaScript 熟悉，也清楚事件的傳遞機制，在這樣的情況下學習 React 會更適合。在學習 React 後，才會知道 React 的優勢可以解決什麼樣的問題。

對於已有 React 基礎的工程師 要如何再更上一層樓？

Redux 為狀態管理的套件，被 React 發揚光大，如果工程師對 React 已經熟悉了，接下來可以學習 Redux。React 的資料主要傳遞方式為，透過 props 由父層傳到子層，而這樣的做法，在專案越發龐大的情況下，為了讓某個很深的子層拿到父層的資料，在資料一層一層的傳遞下，會造成一種叫做 props drilling 的現象 (drill 即為鑽的意思)。 Redux 便可解決這種問題，Redux 透過將資料置放於一個全域的 state，在設立資料的狀態與規則後，便可(視需求)傳遞到應用程式的各個角落，而避開 props drilling 的問題。 當專案非常龐大的時候，又需要讓所有的 component 存取某些資料的話，Redux 就是很好的選擇！

👩‍🏫 課務小幫手： ✨ 想掌握 React 觀念和原理嗎？ 我們有開設 React 全攻略入門班 課程唷 ❤️️