React 與前端開發的那些年

最近原創文章😊：

• 《1.2w字 ｜ 初中級前端 JavaScript 自測清單 - 1》
• 《了不得的 Webpack HMR 學習指南（含源碼分析）》
• 《了不得的 Webpack 構建流程學習指南》
• 《你不知道的 WeakMap》番外篇
• 《你不知道的 Blob》番外篇
• 《了不得的 tsconfig.json 指南》
• 《200行JS代碼，帶你實現代碼編譯器》

這幾天在經過各類資料，瞭解了 React 出現的背景，還有前端這些年的變換，不得不說，感受真的神奇！

本文將帶你們瞭解「前端發展的那些年」還有 React 「出現的背景」～

首先咱們來看看爲何會產生 React 這個框架？

React 是 Facebook 在 2013 年開源的一款前端框架，在這以前，Facebook 工程師開發一個簡單功能時，以下圖界面中「小紅點」功能：

Facebook

在導航欄中有「新好友」、「新消息」和「新動態」三個功能按鈕，這其實功能挺簡單，但卻常常出 BUG，好比「收到新消息後，新消息的圖標上數字沒有正確更新」等問題。

你們能夠先猜一下致使這個問題可能的緣由。

咱們都知道 Facebook 工程師都是世界頂級水平，「他們找尋出現這種問題的深層次緣由」 ，最終總結爲兩個緣由：

1.「工程師太過關注 UI 層面的細節操做」；å

2.「應用程序的狀態較爲分散，沒法追蹤和維護」。

另外這裏再介紹下 React 出現的時代背景：

1.「大量業務邏輯由後端轉爲前端實現」，即先後端分離；

2.已有前端框架開發的「複雜應用性能不佳」。

當時因爲 Ajax 技術興起，大量原來由服務端處理的邏輯，慢慢轉移到前端作處理，這也是爲了追求更流暢的 Web 交互體驗。後來爲了「提高開發效率和應用性能」，開始有不少大型前端框架出現（如：AngularJS），這些框架也讓工程師們愈來愈關注 UI 層面的操做（如：頻繁操做 DOM），「應用性能愈來愈差」，並伴隨沒法預知的 BUG 出現，就像前面講到的 Facebook 工程師總結的緣由之一。

以後 Facebook 工程師開始打造本身的前端框架，解決前面總結的問題，因而 React 就誕生啦～

react

接下來就跟我一塊兒，踏上 React 入門第一步吧！

1、React 介紹

1. 前端開發方式演進

• 前端混沌時代

在「前端混沌時代」，頁面主要在服務端開發並生成，服務端生成什麼頁面，瀏覽器端就展現什麼樣的頁面，這個時代是多麼單純。

• 小前端時代

隨後進入「小前端時代」，造成了以 HTML 爲骨架，CSS 爲外貌，JavaScript 爲交互體驗的前端開發模式，在這個時代，出現了 Ajax 這種劃時代意義的技術，讓靜態網頁升級爲動態網頁，並隨着 JavaScript 的發展，前端能作更加多樣的頁面。當時出現了 jQuery 這類 JS 工具庫，主要用來「操做 DOM」，「處理數據交互」，至今仍有不少老舊項目依然在使用 jQuery。

jquery

• 大前端時代

在小前端時代穩定發展一段時間以後，工程師們開始發現前端「須要呈現的數據量愈來愈大」，「網頁動態交互效果也愈來愈多」，jQuery 這類工具庫「愈來愈頻繁操做 DOM」，使得應用性能愈來愈差，頁面愈來愈卡，慢慢前端大佬們開始解決這些問題。

在 2009 年誕生了 NodeJS ，將前端帶入全新方向，爲 AngularJS（2009年誕生），React（2011年誕生）和 Vuejs （2014年誕生）三大框架的「誕生奠基基礎」。這些框架經過必定的分析比較算法，實現同等效果下最小的 DOM 開銷，提升應用性能。前端開發進入「大前端時代」。

frame

• 全棧前端時代

「大前端時代」以後 NodeJS 社區蓬勃發展，4G 網絡也在不斷普及發展，不少傳統 PC 網站開始轉向手機、平板等移動端設備，開始出現了混合應用技術（Hybrid APP），出現了各類開發框架，如 Cordova、React-Native、Weex、Electron等，還有最近比較火的 Flutter。

app

隨着 TypeScript 的出現，和 ECMAScript 標準日漸完善，「前端開發正在朝着更加全能化」，「多樣化和更加細分領域的方向發展」。

2. React 介紹

React 是一個用於構建用戶界面的 JavaScript 庫，是用 JavaScript 構建「快速響應」的大型 Web 應用程序的首選方式。

因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。

在 React 中，能夠將頁面中每一個部分分紅每個獨立的小模塊，每一個小模塊就是組建，這些組件能夠互相組合和嵌套，就組成每個頁面。相比傳統操做 DOM 的前端開發方式，咱們「主要要關心的是應用中數據的變化」 ，React 會幫咱們將 UI 渲染完成。

以一個「用戶推薦關注頁面」爲例子，能夠將頁面簡單分爲下面幾個組件：

component

其中：

• 組件 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

本文使用 mdnice 排版