React之元件化
阿新 • • 發佈:2018-12-05
image.png
一、說一下對元件化的理解
1.1 元件的封裝
- 檢視
- 資料
- 變化邏輯
image.png
1.2 元件的複用
props
傳遞- 複用
image.png
image.png
二、JSX 本質是什麼
2.1 JSX 語法
html
形式- 引入
JS
變數和表示式 - 迴圈
style
和className
- 事件
- JSX 語法根本無法被瀏覽器所解析
- 那麼它如何在瀏覽器執行?
image.png
2.2 JSX 解析
JSX
其實是語法糖- 開發環境會將
JSX
編譯成JS
程式碼 JSX
的寫法大大降低了學習成本和編碼工作量- 同時,
JSX
也會增加debug
成本
image.png
image.png
image.png
2.3 JSX 獨立的標準
JSX
是React
引入的,但不是React
獨有的React
已經將它作為一個獨立標準開放,其他專案也可用React.createElement
是可以自定義修改的- 說明:本身功能已經完備;和其他標準監控和擴充套件性沒問題
三、JSX 和 vdom 的關係
3.1 為何需要 vdom
vdom
是React
初次推廣開來的,結合JSX
JSX
就是模板,最終要渲染成html
- 初次渲染 + 修改
state
後的re-render
- 正好符合
vdom
的應用場景
3.2 React.createElement 和 h
image.png
3.3 何時 patch
- 初次渲染 -
ReactDOM.render(<App/>, container)
- 會觸發
patch(container, vnode)
re-render
-setState
- 會觸發
patch(vnode, newVnode)
3.4 自定義元件的解析
image.png
‘div’
- 直接渲染<div>
即可,vdom
可以做到Input
和List
,是自定義元件(class
),vdom
預設不認識- 因此
Input
和List
定義的時候必須宣告render
函式 - 根據
props
初始化例項,然後執行例項的render
函式 render
函式返回的還是vnode
物件
image.png
四、說一下 React setState 的過程
4.1 setState 的非同步
image.png
setState 為何需要非同步?
- 可能會一次執行多次
setState
- 你無法規定、限制使用者如何使用
setState
- 沒必要每次
setState
都重新渲染,考慮效能 - 即便是每次重新渲染,使用者也看不到中間的效果
- 只看到最後的結果即可
image.png
4.2 vue 修改屬性也是非同步
- 效果、原因和
setState
一樣
4.3 setState 的過程
- 每個元件例項,都有
renderComponent
方法 - 執行
renderComponent
會重新執行例項的render
render
函式返回newVnode
,然後拿到preVnode
- 執行
patch(preVnode, newVnode)
五、React vs vue
5.1 兩者的本質區別
- vue - 本質是 MVVM 框架,由 MVC 發展而來
- React - 本質是前端元件化框架,由後端元件化發展而來
- 但這並不妨礙他們兩者都能實現相同的功能
5.2 看模板和元件化的區別
vue
- 使用模板(最初由angular
提出)React
- 使用JSX
- 模板語法上,我更加傾向於
JSX
- 模板分離上,我更加傾向於
vue
模板的區別
模板應該和 JS 邏輯分離
image.png
image.png
image.png
元件化區別
React
本身就是元件化,沒有元件化就不是React
vue
也支援元件化,不過是在MVVM
上的擴充套件- 對於元件化,我更加傾向於
React
,做的徹底而清晰
5.3 兩者共同點
- 都支援元件化
-
都是資料驅動試圖
求點贊,求關注~
作者:Amor丶情深
連結:https://www.jianshu.com/p/8e90f63c95fe
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。