React掃盲 (1)React定義與優點

2021-08-15 13:43:34 字數 1197 閱讀 4065

宣告:

author:趙志幹

date:2018-2-10

declaration:all right reserved!!!

1、什麼是react?

「react是由facebook推出的乙個開源專案,其為開發人員提供了ui介面的全新構建方式:即在js中構建介面。」

要全面、準確的闡明react為何物,其實並非易事。我們可以大可從react本身的特點來闡述:

a、使用js和xml兩種技術來構建ui介面。xml技術雖然是可選的,但其宣告式的特點會讓元素之間的關係變得清晰可見,它也是實際應用開發過程中推薦的方式。

b、元件概念的引入。將ui介面劃分成易於重用、維護、擴充套件以及能夠關注特定用途的小組件,從而讓開發人員以組合方式來構建ui介面,實現真正的關注點分離。

c、類似引擎的渲染機理。將應用狀態從ui中分離出來,並由開發人員描述狀態如何對映到虛擬dom中。當狀態發生變化時,react能夠自動更新真實dom以反映狀態的變更。

注:雖然react使用js和xml兩種技術,但其在本質上依然是純js開發。因為轉義過程中會將標籤轉義為react對dom api的直接呼叫。

2、react的特點造就了其兩大優點:

a、更合理的關注點分離:在傳統的web開發中,關注點的分離是指技術分離,如文件結構由html來實現、樣式由css來實現、顯示邏輯由js來實現。而在react中,關注點的分離是指功能元件的分離,如將結構、樣式和顯示邏輯看做ui顯示的整體,並從功能角度劃分元件,從而拆分出易於重用、擴充套件、維護以及關注特定用途的小組件。

2、更高效的渲染方式:早期的js框架大多採用資料繫結技術來解決複雜spa中狀態和ui介面的同步,其在維護性、擴充套件性以及效能方面存在不足。而react則通過響應式渲染,並引入位於記憶體的虛擬dom來解決資料繫結技術所存在的不足。

注:react的渲染過程:當使用者的互動行為或後台的資料獲取導致應用程式的狀態發生改變時,react會通過對比當前ui和期望的ui進行對比,然後計算出要對真實dom所進行的最小改動,最後重新整理需要變動dom部分,反映狀態的變更。

React初始系列教程 1 React初探

什麼是react?react是facebook公司開發的乙個前端框架,是目前三大前端框架之一 react,angular,vue 元件化開發web與傳統web開發專案,確實絲滑很多,它有三大特點 宣告式 你只需要專注於描述你的ui,react會幫你做底層更新 元件化 所有ui都抽象成元件,大大提高可...

1 react 程式設計實踐 俄羅斯方塊 需求分析

1.需求分析 俄羅斯方塊的要素 介面展示 定時重新整理 鍵盤響應 方塊模型 遊戲規則 俄羅斯方塊 比 電商購物車 好在哪?業務比較簡單,人人都了解,不需要過多前置知識 技術棧比較單純,不需要使用過多的工具 本身的複雜性高於 購物車 可以在成品的基礎上進行技術演進,過渡到前端框架 重點重點不在於寫出乙...

React筆記 2 react語法1

這一節內容主要以了解為主。漸漸的體會react的語法和其特性。htmlandjs 混合編寫 react和以往的前後臺書寫方式不一樣。在之前的多個語言中,講求的是將頁面 和js 邏輯分開,包括原來的css檔案都有獨立的分裝。而react的提供了一種html和js語句混合編寫的方式。這就是jsx。先不詳...