說一下使用jQuery和使用框架的區別？說一下對MVVM的理解？說一下對組件化的理解？JSX的本質是什麼…… ...
1. 說一下使用jQuery和使用框架的區別？
- 數據和視圖的分離，（jQuery數據和視圖混在一起，代碼耦合）-------開放封閉原則
- 以數據驅動視圖（只關註數據變化，DOM操作被封裝）
2.說一下對MVVM的理解？
- 先說MVC：Model, View, Controller（主要用於後端）
- MVVM: Model, View, ViewModel[中間連接者，連接view和和model]
- 關於ViewModel
2.2.1 MVVM在React中對應關係
- 1） M(odel)：對應組件的方法或生命周期函數中實現的業務邏輯和this.state中保存的本地數據，如果React集成了redux +react-redux，那麼組件中的業務邏輯和本地數據可以完全被解耦出來單獨存放當做M層，如業務邏輯放在Reducer和Action中。
- 2） V(iew)-M(odel)：對應組件中的JSX，它實質上是Virtual DOM的語法糖。React負責維護 Virtual DOM以及對其進行diff運算，而React-dom 會把Virtual DOM渲染成瀏覽器中的真實DOM
- 3） View：對應框架在瀏覽器中基於虛擬DOM生成的真實DOM（並不需要我們自己書寫）以及我們書寫的CSS
- 4）綁定器：對應JSX中的命令以及綁定的數據，如className={ this.props.xxx }、{this.props.xxx}等等
2.2.2 MVVM的雙綁和單綁區別
- 1） 一般，只有UI表單控制項才存在雙向數據綁定，非UI表單控制項只有單向數據綁定。
- 2） 單向數據綁定是指：M的變化可以自動更新到ViewModel，但ViewModel的變化需要手動更新到M（通過給表單控制項設置事件監聽）
- 3） 雙向數據綁定是指念：M的變化可以自動更新到ViewModel，ViewModel的變化也可以自動更新到M
- 4） 雙向綁定 = 單向綁定 + UI事件監聽。雙向和單向只不過是框架封裝程度上的差異，本質上兩者是可以相互轉換的。
- 5） 優缺點：在表單交互較多的情況下，單向數據綁定的優點是數據更易於跟蹤管理和維護，缺點是代碼量較多比較啰嗦，雙向數據綁定的優缺點和單向綁定正好相反。
3.說一下對組件化的理解？
- 組件的封裝
- a. 視圖的封裝
- b. 數據的封裝
- c. 變化邏輯（數據驅動視圖變化，setState）
- 組件的復用
- a. 使用props來傳遞數據（同一個組件傳遞不同飛數據）
- b. 組件的復用（同一個組件使用不同的數據）
4.JSX的本質是什麼？
[!NOTE]
- JSX語法（標簽、JS表達式，判斷，迴圈，事件綁定）
- JSX是語法糖, 需要被解析成JS才能運行（h函數的使用）
- JSX是獨立的標準，可以被其他項目使用
// 下麵的代碼實際執行流程：
// JSX 代碼
const user = {
firstName : 'xiugang',
lastName : 'zhang'
}
var profile = <div>
<img src="a.jpg" className='profile'/>
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>
// 解析結果(重點掌握)，關鍵點：是使用了一個React.createElement來創建節點的
var profile = React.createElement('div', null, [
React.createElement('img', {src : 'a.jpg', className : 'profile'}),
React.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])
])
/* @jsx h*/
// 1. 使用插件：cnpm install babel-plugin-transform-react-jsx
// 2. 開始編譯JSX： babel --plugins transform-react-jsx demo.js
// 3. 可以自定義React.createElement變為一個h函數： /* @jsx h*/
5.JSX和VDOM的關係？
5.1 分析為何需要VDOM
- VDOM是React初次推廣開來的，結合JSX
- JSX就是模板渲染成HTML
- 初次渲染 + 修改state之後的re-render
正好符合VDOM的應用場景
5.2 React.createElement和h函數
5.3 何時patch？
- 初次渲染----
js ReactDOM.render(<App/>, container) - 會觸發patch(container, vnode)函數
- re-render-- setState
會觸發patch(vNode, newVNode)
5.4 自定義組件的解析？
5.4.1 自定義組件的解析（TODOInput和TODOList組件的解析）
- ‘div’可以直接渲染即可，vdom可以實現
- TodoInput和TodoList是自定義組件（class），vdom不認識
- 因此Input和List定義的時候必須聲明render函數
- 根據props屬性初始化實例，然後執行實例的render函數
- render函數返回的還是vnode的對象
React.createElement(TodoInput, { addTitle: this.addTitle.bind(this) }),
React.createElement(TodoList, { data: this.state.list })
// 上面的代碼相當於是先去創建一個TodoList實例對象
var list = new TodoList({ data: this.state.list });
// 然後再去調用這個函數的render方法（返回的是一個JSX，然後對當前的這個JSX渲染為VDOM）
var vnode = list.render();6.說一下setState的過程？
// 1. 每個組件實例，都有renderComponent方法
class Component {
constructor(){
}
// 每個組件都有這個函數
renderComponent(){
// 獲取上一次的vNode
const prevVnode = this._vnode;
// render函數只需之後，得到的還是一個新的node
const newVnode = this.render();
// 開始對比，找出差異
patch(prevVnode, newVnode);
// 更新node為最新的node
this._vnode = newVnode;
}
}
// 2. 執行renderComponent會重新執行實例的render方法
// 3. render函數返回newVnode，然後拿到prevNode（也就是上次的vnode）----多次執行setState視圖最終也只會渲染一次
// 4. 執行patch（preVnode, newVNode）[!NOTE]
- setState通過一個隊列機制實現state更新，當執行setState時，會將需要更新的state很後放入狀態隊列，而不會立即更新this.state，隊列機制可以高效地批量更新state。如果不通過setState而直接修改this.state的值
- 那麼該state將不會被放入狀態隊列中。當下次調用setState並對狀態隊列進行合併時，就會忽略之前修改的state，造成不可預知的錯誤
- 同時，也利用了隊列機制實現了setState的非同步更新，避免了頻繁的重覆更新state
7.7. 闡述自己對React和Vue的認識？
7.7.1. 兩者的本質區別
- vue本質是MVVM框架，由MVC發展而來
- React本質是前端組件化框架，由後端組件化發展而來
並不妨礙兩者都能實現相同的功能
7.7.2. 模板的區別
- vue-使用模板（最初由angular提出）
- React-使用JSX
- 模板語法上，我更傾向於JSX
- 模板分離上，我更傾向於Vue
- 模板應該和JS邏輯分離
“開放封閉原則”
7.7.3. 組件化的區別
- React本身就是組件化，沒有組件哈就不是React
- vue也支持組件化，不過是在MVVM上的擴展
- 查閱vue組件化的文檔
組件化更適合選擇React
7.7.4. 兩者的共同點
- 都支持組件化
都是數據驅動視圖
7.7.5. 如何選擇
- 國內使用，首推vue。文檔更易讀，易學，社區夠大
如果團隊水平較高，推薦使用React，組件化和JSX
