我自己在學習新技術的時候比較習慣先暸解一下這個技術的基本概念還有它解決了什麼問題。
所以今天我要跟大家一起來看 React.js 到底是什麼？它又能夠幫我們做什麼呢？
A JavaScript library for building user interfaces.
沒錯！從官網進去後，印入眼簾的就是這段話。
所以 React.js 其實就是一個用來打造 UI 的 JavaScript 函式庫，而且它是由 Facebook 團隊所開發出來的。在 Facebook Open Source 中不只有 React.js 而已，現今撰寫 APP 常用到的框架 React Native 也是由他們所開發的（在 Facebook Open Source 的網站中可以瀏覽其他由該團隊開發的框架和函式庫）。
隨著網頁開發的功能越來越多元、內容也越來越複雜後，工程師們為了解決開發上衍生出的種種問題而寫出解決這些狀況的框架和函式庫。不過看了那麼多資料跟介紹不斷地提及框架和函式庫，我真的每次都被搞得頭昏眼花。結果就在搜集資料和瀏覽文章的時候看到了這篇文章仔細地分析了究竟這兩者的差別在哪？
差異在於，使用「框架」的話，框架具有控制權，而身為這份軟體的開發者，你需要依照框架的設計把功能填上，填完的之後，程式便會照你的意思運作了；「函式庫」則是不同的，它像是一個彈藥庫，裡面藏有各種武器供你使用，你有控制權去決定怎麼使用它們，甚至不使用。
看完這段敘述之後我們大概可以了解這兩者之間的差異了吧？
想想看以前在練習 Side Project 的時候如果遇到不會的功能，可能會去 CodePen 上面找看看別人的範例。而這些範例當中會有些人在特定的地方使用到 jQuery 這個函式庫 (library) 但是並不一定所有的內容都會使用到（可能一部分是寫原生的 JavaScript ）。不過當你是使用 Vue.js 這個 框架 (Framework) 的時候，就是必須按照它設定好的環境來撰寫特定的語法來開發整個功能。
所以你有發現一件事情嗎？
在你見過的大多數資料內所提及目前的前端三大框架 Angular 、 Vue.js 以及 React.js 中，其實有一個根本就不是框架而是函式庫，它就是 React.js ！
透過上面的內容我們現在對 React.js 可以說是有初步的認識了，但是所有的工具（不管是框架或函式庫）被開發出來都是為了要解決問題，讓我們能夠更便利更快速地進行前端開發。講了這麼多，所以 React.js 到底提供了哪些功能來幫助我們呢？
要了解它能幫你解決什麼問題前，你其實應該先問問自己一個問題：
在最一開始學習 JavaScript 做前端開發時遇到了哪些狀況？
這邊先列幾個我曾經寫原生 JavaScript 寫到懷疑人生的時候遇到的狀況給大家作為參考：
以上就是我目前想到當初在使用原生 JavaScript 開發的時候遇到的難處和困擾。當然我相信這不會是只有我一個人遇到的狀況，所以這些開發困境也是讓後來許許多多的 JavaScript 框架和函式庫不斷出現的原因。
所以知道自己的問題在哪之後，我們就來看看 React.js 這個函式庫究竟提供了什麼樣的方法來幫助我們脫離上面的種種困境呢？
1. 宣告式 Declarative
在 React.js 中的 View 是採用宣告的方式並使用 Virtual DOM 的概念來進行綁定和渲染。它會在資料有變更時更有效率的自動更新並渲染 （Render） 所有有產生變動的元件。
簡單來說，這代表當我的資料或內容有更新的時候，我不再需要去重新渲染出整個區塊的資料，而是透過宣告式的 View 來直接幫我更新畫面上那些有變更的資料而且需要重新渲染的部分即可。
所以這部分就解決了我們前面提到不斷的再重新渲染頁面的問題（ Virtual DOM 是什麼？附上傳送門給大家）。
2. 元件式開發 Component-Based
React.js 是以元件為基礎來做開發的，因此你可以自行定義不同的元件並設定每個元件不同的狀態（state），以及透過傳送給子元件（props）的方式來進行資料的傳遞。
而基於這樣的元件基礎開發模式之下，我們就可以將網站中會重複利用的東西（像是按鈕等）定義成一個元件，並針對不同用途或功能去做設定資料（像是按鈕上面的文字）。
所以這部分則是解決了原生 JavaScript 在開發上會重複撰寫相同功能但是不同資料的東西，大大的簡化程式碼之外也提升了可閱讀性和之後要修改的便利性。
以上都是 React.js 為我們提供的強大功能，不過還有很多等著我們探索的地方，所以就繼續讀下去吧！
另外有任何問題都非常非常歡迎提出和指教唷～
那我們下篇見ʘ‿ʘ
iThome鐵人賽
看影片追技術