前端面試之元件化

摘要： 檢視 資料 變化邏輯 1.2 元件的複用 props 二、JSX 本質是什麼 2.1 JSX 語法 html 形式 引入 JS 變數和表示式 迴圈 style 和 ...

• 檢視
• 資料
• 變化邏輯

1.2 元件的複用

props

二、JSX 本質是什麼

2.1 JSX 語法

• html 形式
• 引入 JS 變數和表示式
• 迴圈
• style 和 className
• 事件

• JSX 語法根本無法被瀏覽器所解析
• 那麼它如何在瀏覽器執行？

2.2 JSX 解析

• JSX 其實是語法糖
• 開發環境會將 JSX 編譯成 JS 程式碼
• JSX 的寫法大大降低了學習成本和編碼工作量
• 同時， JSX 也會增加 debug 成本

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

3.3 何時 patch

• 初次渲染 - ReactDOM.render(<App/>, container)
• 會觸發 patch(container, vnode)
• re-render - setState
• 會觸發 patch(vnode, newVnode)

3.4 自定義元件的解析

• ‘div’ - 直接渲染 <div> 即可， vdom 可以做到
• Input 和 List ，是自定義元件（ class ）， vdom 預設不認識
• 因此 Input 和 List 定義的時候必須宣告 render 函式
• 根據 props 初始化例項，然後執行例項的 render 函式
• render 函式返回的還是 vnode 物件

四、說一下 React setState 的過程

4.1 setState 的非同步

setState 為何需要非同步？

setState
setState
setState

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 邏輯分離

元件化區別

• React 本身就是元件化，沒有元件化就不是 React
• vue 也支援元件化，不過是在 MVVM 上的擴充套件
• 對於元件化，我更加傾向於 React ，做的徹底而清晰

5.3 兩者共同點

• 都支援元件化
• 都是資料驅動試圖