首頁 >web前端 >js教程 >React的使用：react框架的五大特點

React的使用：react框架的五大特點

不言原創: 2018-07-20 10:34:445952瀏覽

這篇文章跟大家介紹的內容是關於React的使用：react框架的五大特點，有著一定的參考價值，有需要的朋友可以參考一下。

01. React 出現的時代背景

世界上的事情都有因才有果，一個框架的出現也必然離不開特定的時代背景。而對於React 而言，不得不提的時代背景主要有這麼兩條：

大量業務邏輯由後端實作改為前端實作：AJAX技術的出現促使人們追求更流暢的Web互動體驗，使得大量複雜的業務邏輯從後端開發改為由前端開發實現，這使得前端程式碼量呈幾何式增加，量變引起質變，如何組織管理這種量級的前端程式碼？如何更好的提升應用效能？借鑒幾十年來後端開發的經驗，毫不意外，答案是使用大型前端框架。
對於邏輯複雜的SPA應用，原有前端框架表現不佳：在React 問世之前，已經有backbone.js 與Angular.js 等成熟的大型前端框架了，然而Facebook 的工程師們發現，在面對複雜的業務場景（例如：頻繁操作DOM）時，這些框架都無法帶來良好的頁面性能，於是他們打算著手自己開發一個框架來解決這個問題，所開發出的框架即是React，而對於這一問題的解決方案則是：使用虛擬DOM。

02. 虛擬DOM

虛擬DOM 的想法其實不難理解：我們知道頻繁的DOM 操作會導致瀏覽器對DOM 樹進行大量計算，這是前端最重要的效能瓶頸。因此，只要我們能夠合併多次的 DOM 操作，然後“畢其功於一役”，適時的，一次性的對 DOM 樹集中進行一次操作，就可以大大提升前端性能。

對於 React 而言，實現這一思路的方案即是使用 虛擬 DOM。我們所謂的 DOM 樹其實就是一個以樹狀結構嵌套的 JavaScript 物件。而在瀏覽器中，DOM 樹的改動會造成瀏覽器一系列的計算，因此我們可以基於現有的DOM 樹結構，克隆出一份一模一樣的DOM 樹，即“虛擬DOM ”，將所有的改動都實作在這棵虛擬DOM 上，然後統一合併至瀏覽器中的DOM 樹以解決先前所提及的效能瓶頸。

雖然理解起來不難，但在這個過程中其實牽扯到很多複雜的情況以及一些演算法上的難點，足夠開一篇新的文章講解，在這裡就先點到為止，就此不表了。

03. 什麼是元件化？

元件化是一種程式碼設計模式，它表現為你能夠將一些簡單的函數建構成一個更複雜的函數加以使用。

元件化有兩個顯著的特點：

封裝：一個元件所需的資料封裝於元件內部；
#組合：一個元件可以與其他元件透過組合的方式實現更複雜的業務邏輯；

#而React 最棒的一點就在於在React 中一切UI 元素都是元件，而元件又只是一個JavaScript 函數。但相較於傳統函數接收一些參數並傳回一個值的模式而言，React 函數將會接收一些參數，傳回介面中的 UI 元素。

就像一個好的函數應該符合「DOT」（Do One Thing）原則，一個好的React 元件也不能混雜其他元件的業務邏輯，我們應該盡量讓React 元件保持簡單，從而讓複雜的React 元件的內部邏輯變得清晰。

下面這個公式可以很好的表達在React 中「視圖是對資料的渲染」的組件化思想：

UI = render(data)

這樣一來，在React 中，構成複雜視圖的方式就變得很簡單：組合元件;

04. 聲明式程式碼

聲明式程式碼指的是：讓開發者按照“我要做什麼”，而不是「我要讓電腦做什麼」去思考如何實現業務需求。

讓我們簡單比較一下「宣告式程式碼」與「命令式程式碼」的不同：

#指令式程式碼：
感受到天氣太熱，編寫程式碼：

1. 拿起空调遥控器；
2. 打开空调；
3. 设置温度为 27 摄氏度；

聲明式程式碼：
感受到天氣太熱，寫程式碼：
```
1. 调用“开空调(27)”函数；
```

看起來，聲明式程式碼不過是對封裝了的命令式程式碼進行呼叫，但本質上，這是一種更棒的程式設計思維，它能夠讓我們不再僅僅著眼於如何透過程式碼實現功能，而是更多的思考為了實現業務邏輯，程式碼需要哪些功能（函數），對功能的設計，和功能之間的關係的思考，讓我們的程式碼邏輯更加清晰，富有秩序。

05. 單向資料流

在React 中，資料的組織形式是樹狀的，從上到下單向流動（對應DOM樹），之所以這樣設計，是因為：資料流更清晰，元件的狀態就更可控；

對於業務邏輯複雜的單頁應用而言，前端所承接的資料量很大，資料之間的關係也錯綜複雜，再加上React 採用元件式開發，不同UI 根據不同資料產生變化，如果沒有一個清晰，合理的資料流管理方式，最後的程式碼只能是一團糟，一旦UI 或資料出現錯誤將很難排查出錯源到底在哪裡。

有鑑於此，React 使用「單向資料流」的方式，只允許資料從父元素流到子元素。

React 單向資料流的機制大致如下：資料被儲存在父級元件上，並且向下流動至子元件。雖然資料儲存在父級元件上，但是父級與子級的元件都可以使用這個資料。但是，如果數據需要更新，那麼只有父級元件應該去更新，如果子元件需要修改數據，他也只能透過發送更新的數據給父級元件，那裡才是數據真正更新的地方。一旦資料被父級元件更新了，子級元件將會接收到新的資料。

單向資料流雖然聽起來增加了額外的工作量，但卻讓開發者更容易搞清楚應用程式是如何運作的。

06. 純粹的JavaScript語法

我們很容易就忽略React 的這個特點，即在React 中，沒有任何特殊的專有的React 語法需要理解和記憶，所有的元件，資料操作，業務邏輯都是透過使用JavaScript 語法來實現的。

這意味著你想要使用 React 只需理解 React 的思想和幾個關鍵的 API 就可以立即開始使用 React 進行複雜應用的開發。而 React 也鼓勵你使用函數式程式設計思想進行開發，你可以在 React 開發中，使用你的任何函數式程式設計技巧。

07. 小結

在本文中我們先談到了React 框架產生的時代背景，接著解釋了React 的五大特點：

虛擬DOM;
元件化;
聲明式程式碼；
單向資料流；
純粹的JavaScript 語法；