React簡(jiǎn)介
一透绩、什么是React
廢話不說(shuō)寻馏,我們先看看官方是雜說(shuō)的
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.
大概意思就是說(shuō) React 是被 Facebook 和 Instagram 創(chuàng)建的一個(gè)針對(duì) Ui Js 類庫(kù)棋弥,許多人也把它認(rèn)為是 MVC 中的 V 層。
話說(shuō)诚欠,F(xiàn)aceBook 對(duì)市面上所有的 js 類庫(kù)都不滿意顽染,所以自己就開發(fā)了一個(gè),我只能說(shuō)真是藕涿啵「B」呀粉寞。有點(diǎn)扯遠(yuǎn)了。
我們只要知道這個(gè)玩意是用來(lái)創(chuàng)建 V 的就可以了
二左腔、React 特點(diǎn)
1唧垦、簡(jiǎn)單
用官方的話說(shuō)就是,使用 React 可以很簡(jiǎn)單的呈現(xiàn)出你的應(yīng)用液样。當(dāng)然學(xué)習(xí)也簡(jiǎn)單
2振亮、聲明式
在數(shù)據(jù)發(fā)生變化的時(shí)候,React 從概念上講與點(diǎn)擊了 F5 一樣鞭莽,實(shí)際上它僅僅是更新了變化的一部分而已(通過(guò)虛擬 DOM 技術(shù)的 diff 算法)坊秸。
3、組件化
Rect 的編寫是基于組件的澎怒,它是把一個(gè)個(gè)組件組合起來(lái)形成一個(gè)界面, Facebook 使用組件化開發(fā)代替模板引擎褒搔,通過(guò) js 代碼生成 View
下幅圖可以直觀的看到組件化的思想:
MVC:開發(fā)者將三者定義成不同的類,實(shí)現(xiàn)了表現(xiàn)喷面、數(shù)據(jù)星瘾、控制的分離(從技術(shù)角度拆分UI實(shí)現(xiàn)松耦合)
React:新的思路,開發(fā)者從功能的角度出發(fā)乖酬,將UI拆成不同的組件死相。每個(gè)組件都獨(dú)立封裝。即按照界面模塊自然劃分的方式來(lái)組織和編寫你的代碼
4咬像、一次學(xué)習(xí),到處使用
并沒有說(shuō)一次編寫到處運(yùn)行,我們可以在客戶端渲染县昂,也可以在服務(wù)端渲染肮柜,還可以在手機(jī) app 上渲染( 使用 RN )
三、React的工作原理(基本原理)
- 1倒彰、Virtual DOM -- 虛擬 DOM
和傳統(tǒng)的 Web 應(yīng)用的不同的是审洞,React 為了減少 Dom 的操作( Dom 的更新代價(jià)是比較大的),不是全部更新 Dom 而是通過(guò)虛擬 DOM 的技術(shù)待讳,就是真實(shí) Dom 的當(dāng)前 Dom 之間通過(guò) diff 算法比較芒澜,只更新改變部分的 Dom ,這就大大提高了性能。
- 2创淡、基于狀態(tài)更新( state 和 render )
React 是如何渲染組件痴晦,并且在什么渲染組件的,這就要說(shuō)說(shuō) state 和 render 了琳彩。state 包含一些組件所需要的屬性誊酌,如果這些數(shù)據(jù)發(fā)生變化,那么就會(huì)自動(dòng)調(diào)用 render() 方法來(lái)渲染組件露乏,我們只能通過(guò) React 的 setState() 方法來(lái)更新組件狀態(tài)碧浊。
總結(jié):通過(guò)本節(jié)我們了解了以下幾點(diǎn):
- 1、React 是一個(gè) V
- 2瘟仿、React 沒有模板的概念箱锐,是通過(guò)組件組合來(lái)使用
- 3、React 通過(guò)虛擬 Dom 來(lái)更新組件
- 4劳较、React 是一個(gè)狀態(tài)機(jī)(通過(guò)狀態(tài)的改變來(lái)更新組件)