- 初識(shí)React
- 虛擬DOM
- React的基本單元
- 小結(jié)
初識(shí)React
React是一個(gè)用于構(gòu)建跨平臺(tái)用戶界面的JavaScript庫.
React有哪些優(yōu)秀的思維模型:
2.1持續(xù)保持“重新思考已建立的最佳實(shí)踐”的精神(鼓勵(lì)開發(fā)人員們更新最新的語法哟冬、API)
2.2 對(duì)依賴相似邏輯和UI的部分代碼進(jìn)行封裝,并將會(huì)始終確保該部分保持最新(鼓勵(lì)開發(fā)者們寫類似“框架”的code)-
React有哪些更好的性能:
當(dāng)訪問狱掂、修改或創(chuàng)建DOM元素時(shí),瀏覽器常常要在一個(gè)結(jié)構(gòu)化的樹上執(zhí)行查詢來找到指定元素. 訪問元素僅是更新元素的第一部分,通常情況下,作為更改的一部分,它不得不重新進(jìn)行布局、縮放和其他操作. (這些操作計(jì)算量都很大)
3.1 虛擬DOM使用差異對(duì)比和只更新已更改的部分,幫助優(yōu)化對(duì)DOM的更新,提高渲染的性能,并可以讓開發(fā)者可以少考慮多復(fù)雜的狀態(tài)追蹤.
虛擬DOM
-
DOM(Ducoment Object Model)是一種反映了XML文檔層次結(jié)構(gòu)的樹形結(jié)構(gòu).
DOM樹結(jié)構(gòu)的簡化版本 虛擬DOM是模仿或鏡像存在于瀏覽器中的文檔對(duì)象模型的數(shù)據(jù)結(jié)構(gòu)或數(shù)據(jù)結(jié)構(gòu)的集合.
React的虛擬DOM處理數(shù)據(jù)的變更檢測,并將瀏覽器事件轉(zhuǎn)換為React組件可以理解和響應(yīng)的事件. React的虛擬DOM還為性能專門優(yōu)化了對(duì)DOM的更新操作.
拼裝起來:
虛擬DOM會(huì)作為應(yīng)用程序代碼和瀏覽器DOM之間的中間層(虛擬DOM向開發(fā)人員隱藏了變更檢測與管理的復(fù)雜性并將其轉(zhuǎn)移到專門的抽象層)
React的基本單元
- React的基本單元是組件.
- 組件是返回JSX(JavaScript XML)的函數(shù).
- JSX是一種完全利用JavaScript的功能編寫類似HTML代碼的方法.
拼裝起來:
React組件始終返回JSX,然后執(zhí)行并將其轉(zhuǎn)換為HTML
小結(jié)
- React是一個(gè)用來構(gòu)建用戶界面的庫,它最初是由Facebook的工程師創(chuàng)建的.
- React 提供了一個(gè)基于組件的簡單、靈活的API.
- 組件是React的基本單元,在React應(yīng)用中被廣泛使用.
- React在程序和瀏覽器DOM之間實(shí)現(xiàn)了一個(gè)虛擬DOM層.
- 虛擬DOM使用快速對(duì)比算法對(duì)DOM進(jìn)行高效更新.
- 虛擬DOM具有優(yōu)秀的性能,但最大的好處是他提供的思維模型
參考文章:
用思維模型去理解 React
React實(shí)戰(zhàn)
下一節(jié): 我們的第一個(gè)組件 <Hello World/>
