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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。