這幾天在經過各類資料，瞭解了 React 「出現的背景」，還有「前端發展的那些年」，不得不說，感受真的神奇！～數組
首先咱們來看看爲何會產生 React 這個框架？瀏覽器
React 是 Facebook 在 2013 年開源的一款前端框架，在這以前，Facebook 工程師開發一個簡單功能時，以下圖界面中「小紅點」功能：前端框架
在導航欄中有「新好友」、「新消息」和「新動態」三個功能按鈕，這其實功能挺簡單，但卻常常出 BUG，好比「收到新消息後，新消息的圖標上數字沒有正確更新」等問題。微信
你們能夠先猜一下致使這個問題可能的緣由。
咱們都知道 Facebook 工程師都是世界頂級水平，「他們找尋出現這種問題的深層次緣由」 ，最終總結爲兩個緣由：
1.「工程師太過關注 UI 層面的細節操做」；å
2.「應用程序的狀態較爲分散，沒法追蹤和維護」。
另外這裏再介紹下 React 出現的時代背景：
1.「大量業務邏輯由後端轉爲前端實現」，即先後端分離；
2.已有前端框架開發的「複雜應用性能不佳」。
當時因爲 Ajax 技術興起，大量原來由服務端處理的邏輯，慢慢轉移到前端作處理，這也是爲了追求更流暢的 Web 交互體驗。後來爲了「提高開發效率和應用性能」，開始有不少大型前端框架出現（如：AngularJS），這些框架也讓工程師們愈來愈關注 UI 層面的操做（如：頻繁操做 DOM），「應用性能愈來愈差」，並伴隨沒法預知的 BUG 出現，就像前面講到的 Facebook 工程師總結的緣由之一。
以後 Facebook 工程師開始打造本身的前端框架，解決前面總結的問題，因而 React 就誕生啦～
接下來就跟我一塊兒，踏上 React 入門第一步吧！
1、React 介紹
1. 前端開發方式演進
-
前端混沌時代
在「前端混沌時代」，頁面主要在服務端開發並生成，服務端生成什麼頁面，瀏覽器端就展現什麼樣的頁面，這是時代，是多麼單純。
-
小前端時代
隨後進入「小前端時代」，造成了以 HTML 爲骨架，CSS 爲外貌，JavaScript 爲交互體驗的前端開發模式，在這個時代，出現了 Ajax 這種劃時代意義的技術，讓靜態網頁升級爲動態網頁，並隨着 JavaScript 的發展，前端能作更加多樣的頁面。當時出現了 jQuery 這類 JS 工具庫，主要用來「操做 DOM」，「處理數據交互」，至今仍有不少老舊項目依然在使用 jQuery。
-
大前端時代
在小前端時代穩定發展一段時間以後，工程師們開始發現前端「須要呈現的數據量愈來愈大」，「網頁動態交互效果也愈來愈多」，jQuery 這類工具庫「愈來愈頻繁操做 DOM」，使得應用性能愈來愈差，頁面愈來愈卡，慢慢前端大佬們開始解決這些問題。
在 2009 年誕生了 NodeJS ，將前端帶入全新方向，爲 AngularJS（2009年誕生），React（2011年誕生）和 Vuejs （2014年誕生）三大框架的「誕生奠基基礎」。這些框架經過必定的分析比較算法，實現同等效果下最小的 DOM 開銷，提升應用性能。前端開發進入「大前端時代」。
-
全棧前端時代
「大前端時代」以後 NodeJS 社區蓬勃發展，4G 網絡也在不斷普及發展，不少傳統 PC 網站開始轉向手機、平板等移動端設備，開始出現了混合應用技術（Hybrid APP），出現了各類開發框架，如 Cordova、React-Native、Weex、Electron等，還有最近比較火的 Flutter。
隨着 TypeScript 的出現，和 ECMAScript 標準日漸完善，「前端開發正在朝着更加全能化」，「多樣化和更加細分領域的方向發展」。
2. React 介紹
React 是一個用於構建用戶界面的 JavaScript 庫，是用 JavaScript 構建「快速響應」的大型 Web 應用程序的首選方式。
因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。
在 React 中，能夠將頁面中每一個部分分紅每個獨立的小模塊，每一個小模塊就是組建，這些組件能夠互相組合和嵌套，就組成每個頁面。相比傳統操做 DOM 的前端開發方式，咱們「主要要關心的是應用中數據的變化」 ，React 會幫咱們將 UI 渲染完成。
以一個「用戶推薦關注頁面」爲例子，能夠將頁面簡單分爲下面幾個組件：
其中：
-
組件 UserPageComponent爲：主頁面組件； -
組件 HeaderComponent爲：頁面頂部標題欄組件； -
組件 ContentComponent爲：頁面主要內容區域組件； -
組件 FooterComponent爲：頁面底部操做組件； -
組件 UserInfoComponent爲：通用用戶信息組件； -
組件 CommonButtonComponent爲：通用按鈕組件。
接下來看下這個頁面在 React 中是如何編寫的吧～
class UserPageComponent extends React.Component {
// ...
render() {
return (
<div>
<HeaderComponent></HeaderComponent>
<ContentComponent></ContentComponent>
<FooterComponent></FooterComponent>
</div>
);
}
}
class ContentComponent extends React.Component {
// ...
render() {
return (
<div>
<UserInfoComponent></UserInfoComponent>
<UserInfoComponent></UserInfoComponent>
<UserInfoComponent></UserInfoComponent>
</div>
);
}
}
看起來就跟疊積木同樣啦～～
看到這裏，恭喜你已經瞭解了 React 而且知道 React 代碼是如何編寫的了！
接下來再來看看 React 各個重大版本的更新，這對於你瞭解 React 頗有幫助。
3. React 版本
咱們能夠在 React 官網中查看 React 的版本迭代歷史記錄和更新內容：https://reactjs.org/versions/。
在 2017.09.26 Facebook 發佈 React v16.0 版本，截止課程製做時，React 最新版本爲 v16.13.1 ，且引入了大量的使人振奮的新特性，接下來將以 React v16.0 版本開始，介紹一些重要更新內容，快跟我一塊兒看看吧！
-
「React v16.2.0 (November 28, 2017)」
增長 Fragment 組件，其做用是將一些子元素添加到 DOM tree 上且不須要爲這些元素提供額外的父節點，至關於 render 返回數組元素。
-
「React v16.3.0 (March 29, 2018)」
增長 React.createRef() API，能夠經過 React.createRef 取得 Ref 對象。
增長 React.forwardRef() API，它是 Ref 的轉發, 讓父組件可以訪問到子組件的 Ref，從而操做子組件的 DOM。
-
「React v16.6.0 (October 23, 2018)」
增長 React.memo() API，它只能做用在簡單的函數組件上，本質是一個高階函數，能夠自動幫助組件執行 。
增長 React.lazy() API，它提供了動態 import 組件的能力，實現代碼分割。
-
「React v16.8.0 (February 6, 2019)」
增長 React Hooks，一種無需編寫類便可使用狀態和其餘React功能的方法，用來解決狀態邏輯複用問題，且不會產生 JSX 嵌套地獄。
改進 useReducer Hook 惰性初始化API。
2、闖關訓練
請問 React 開發中，相比傳統前端開發，咱們更須要關注什麼？
A. 應用中 DOM 的變化
B. 應用中數據的變化
C. 應用中 UI 展現
答案：B
回覆「加羣」與大佬們一塊兒交流學習~
點擊「閱讀原文」查看70+篇原創文章
本文分享自微信公衆號 - 前端自習課（FE-study）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。