React技術初識

jeanron100發表於2018-06-02

前端框架哪家強,如果沒理解錯,應該是React,Angular,VUE。記得去年的時候,和我一個老同學聊天,他是一個架構師,偏向於後端開發,但是發現他已經在入手React技術了,而且做得風風火火,我對React有所耳聞,基本是一句話簡介的瞭解。因為我的重心還不打算在前端做很多投入,所以就只是問問而已,就此作罷。

然後不久聽到Facebook因為React開源協議問題,和開源社群吵的沸沸揚揚。國內方面百度等也宣佈停止使用React,要求各部門選擇新的方案。這件事導致很多公司在評估使用 React 風險和替換成本的時候,發現這件事風險很高。所以技術上的基因是沒有問題,但是大海航向靠舵手,開源的方案協議還是很多,選擇還是需要做一些參考和對比。

以下是前端專家阮一峰做的一個開源協議的翻譯,原文是Paul Bagwell整理的一個列表。

React技術初識

我們來說下React,React 起源於 Facebook 的內部專案,因為對市場上所有 JavaScript MVC 框架都不滿意,就決定自己寫一套,做出來以後,發現這套東西很好用,就在2013年5月開源了,所以說React技術只是在2013年開放,技術的基因其實要更早一些。

簡單來說,既然React是重新構建的一套框架,對市面上的框架不滿意,所以換一種理解就會容易很多,React不是一個完整的MVC/MVVM框架,只專注於提供直接的view檢視層解決方案,在設計之初就做了裁剪,只專注於元件開發技術,在React中沒有控制器,服務,沒有指令,也沒有過濾器。

React的目標是Minimal API Interface,值提供元件化相關的少量API,實現是很輕量級的。它是為了元件開發而誕生,能夠最大限度的簡化一個元件的開發。

React可以搭配Flux架構,使用Redux實現。他的一個核心是資料單向流動,也是學習React的一個難點。這個我後續準備也入手學習下。

我不希望大家的第一課就是跑個demo,然後發現對React的原理沒有任何理解。所以要提一下,React使用了virtual DOM的技術,這個需要我們好好理解一下,也是學習React的核心。

一般來說,我們知道的大多數前端技術,都是程式直接來改變DOM,DOM通過事件觸發來告知程式。

React技術初識

而在React中使用了Virtual DOM,類似於一個緩衝器,使得資料的流程都需要經過Virtual DOM這麼一個角色。

React技術初識

這麼做有什麼意義呢,我們來設想一個場景。

比如有一個列表,我們使用標籤<li>來描述。

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

我們需要把DOM結構修改為:

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

按照一般的方式,我們需要兩類操作,先刪除已有的5個元素5~9,然後插入新的元素1~4

這樣下來,細粒度的原子操作就是5+4=9次。Virtual DOM的核心演算法就是DIFF,通過它來完成最小的操作,來避免頻繁的DOM操作。使用Virtual DOM的消耗就是修改4個已有的InnerHTML元素5~8,,然後新增一個元素9

比如下面一個看起來使用相對複雜的操作,如果是這樣一個的資料結構,如果使用Virtual DOM這個複雜度就會降低,直接在葉子節點層直接轉換(是一個類似append的操作)即可。這也是React的核心DIFF的意義所在,是一種層次化的結構解決方案。

React技術初識

另外React中使用JSX,即JavaScript+XML,在實現上會更加專注,但是有一個對於新手來說很複雜的學習路徑,那就是整個前端的技術方案實在是太龐大了。

因為瀏覽器無法識別JSX語法,所以需要另外一個工具來翻譯,我們這裡可以理解是babel,說到了babel,就需要用ES2016或者ES6的語法了,當然寫一些翻譯一些還不太方便,於是還有webpark結合babel-loader的方案,然後還可以繼續下鑽,所以我開始的時候感覺很清爽,但是發現前端的方案實在太多,以至於我覺得陷入了一個巨大的困擾中。

這是前端專家阮一峰在多年前的一個微博表述,前端的技術發展真是太快。

React技術初識

而看看現有的技術矩陣中,新技術和方案真是層出不窮。

我在之前的一篇文章中引用了一個圖,如果理解Python web開發技術

React技術初識

現在看來後端對於前端的理解真是越來越少,後端對於前端的一個瓶頸就在於靜態頁面的基礎,現在前端的動態內容如此豐富,這個難度和代溝會變得越來越大。所以前後端技術分離,做成RESTful介面也越來越受到歡迎。

所以我們對待前端技術還是要有一定的前瞻性,另外一個就是儘可能學習成熟快捷的方案,避免重複造輪子,經常返工,對架構進行重構。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/23718752/viewspace-2155509/,如需轉載,請註明出處,否則將追究法律責任。

相關文章