React學習筆記(一)-- React簡介

web開發(fā)早期

在web開發(fā)的早期時代(據(jù)史書記載,那段不堪回首的歲月被稱之為web1.0時代 (╯▽╰)),開發(fā)過程十分的簡單明快,構建web應用的大致過程就是,瀏覽器向服務器端發(fā)送請求,然后由服務器端響應請求并返回頁面內容,基本可以概括為:朕(服務器)給你(瀏覽器)的是你的,朕不給你的你不能搶。

這種模式下開發(fā)者無需關心瀏覽器端發(fā)生了什么,通常5個人以內,不分前后端就可以close掉一個小項目,當然是在業(yè)務不太復雜的情況下。然而業(yè)務往往是會變復雜滴(個人感覺這和熵增原理存在著某些必然聯(lián)系(¬_¬)),當業(yè)務變得復雜時,很多開心的事就會發(fā)僧了,Because往往業(yè)務一復雜,人就得多,人一多,花樣就多,花樣一多,維護的成本就會變大...

還有一個就是用戶體驗問題,在這種模式下很難打造出極佳的用戶體驗,因為無論用戶想做點什么,都需要向服務器發(fā)請求,并等待服務器端的響應,這會導致用戶失去在頁面上所積累的狀態(tài)。畢竟我們是服務行業(yè),服務行業(yè)的主旨是什么?——客戶就是上帝。上帝要是不開心了,你還想不想吃小饅頭了。因此為了小饅頭,,,Σ( ° △ °|||)︴,,,啊呸,不對,是為了更好的用戶體驗!!人們開始開發(fā)類庫。

web1.0

類庫

為了更好的用戶體驗,人們開始開發(fā)類庫,使用JavaScript在瀏覽器端渲染應用。這些類庫使用的方法也不盡相同,簡單的使用帶參數(shù)的模板,復雜的就完全掌控整個應用。隨著開發(fā)者在越來越大的項目中使用這些類庫,應用也變得越來越難以把握,因為這些應用是一系列相互作用的結果。

React簡介

React 是一個 Facebook 和 Instagram 用來創(chuàng)建用戶界面的 JavaScript 庫。發(fā)源自FaceBook的PHP框架XHP的一個分支,XHP作為一個PHP框架,其主旨在于每次有請求進來時渲染整個頁面。React的產生是為了把這種重新渲染整個頁面的PHP式工作流帶到客戶端應用中來。

React_Logo
React_Logo

React本質上是一個“狀態(tài)機”,可以幫助開發(fā)者管理復雜的隨著時間而變化的狀態(tài)。它以一種精簡的模型實現(xiàn)了這一點。React只關心兩件事:

  • 最小化重繪DOM
  • 單事件處理器

最小化重繪DOM

React不處理Ajax,路由和數(shù)據(jù)存儲,也不規(guī)定數(shù)據(jù)的組織方式。如果非要問它是什么,我們可以把它看做MVC里的“V”。React的精簡允許你將其集成到各種各樣的系統(tǒng)中。我們幾道,在頁面渲染過程中,頻繁的操作DOM元素,會導嚴重影響頁面性能。而React通過一個虛擬的DOM實現(xiàn)了一個非常強大的渲染系統(tǒng),在React中可以做到對DOM的最小化重繪(_( ?Д?)?江湖傳言可以做到只更新不讀取...)。

React把視圖更新簡化為一個render函數(shù),render函數(shù)只關心兩個參數(shù),分別是配置項和狀態(tài)。render函數(shù)讀入當前狀態(tài),并返回一個快速的DOM描述。只要React被告知狀態(tài)有變化,其會重新運行函數(shù),計算出新的DOM描述,然后判斷差異后,進行最少的必要更新。

單事件處理器

在web開發(fā)過程當中,過多的事件處理器會增大程序的開銷,影響應用的性能。通常我們會使用事件委托來減少事件處理器的數(shù)量。而React在整個應用中只使用單個的事件處理器,并且會把所有的事件委托到這個事件處理器上,這一點也大大提升了React的性能。

參考

【1】《React引領未來的用戶界面開發(fā)框架》
【2】Web 研發(fā)模式演變
【3】為什么使用 React?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,813評論 25 708
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,854評論 1 18
  • 睡完一大覺起來,身上的疲憊已經退去,但心情卻依舊很好。又是一個艷陽高照天,我喜歡晴天萬里碧空中總給人以無限的現(xiàn)象,...
    橙樂天閱讀 584評論 12 7
  • 人人都渴望成功,但追求成功的道路卻復雜又艱難,最簡單的取勝之道是:提升格局,讓我們短時間內成為人生贏家。 簡單易行...
    Connie1314鄧雅之閱讀 296評論 1 3