【前端知識體系-JS相關】組件化和React

1. 說一下使用jQuery和使用框架的區別?

  1. 數據和視圖的分離,(jQuery數據和視圖混在一塊兒,代碼耦合)-------開放封閉原則
  2. 以數據驅動視圖(只關注數據變化,DOM操做被封裝)

2.說一下對MVVM的理解?

  1. 先說MVC:Model, View, Controller(主要用於後端)
  2. MVVM: Model, View, ViewModel[中間鏈接者,鏈接view和和model]
  3. 關於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.說一下對組件化的理解?

  1. 組件的封裝
    • a. 視圖的封裝
    • b. 數據的封裝
    • c. 變化邏輯(數據驅動視圖變化,setState)
  2. 組件的複用
    • a. 使用props來傳遞數據(同一個組件傳遞不一樣飛數據)
    • b. 組件的複用(同一個組件使用不一樣的數據)

4.JSX的本質是什麼?

[!NOTE]前端

  1. JSX語法(標籤、JS表達式,判斷,循環,事件綁定)
  2. JSX是語法糖, 須要被解析成JS才能運行(h函數的使用)
  3. 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

  1. VDOM是React初次推廣開來的,結合JSX
  2. JSX就是模板渲染成HTML
  3. 初次渲染 + 修改state以後的re-render
  4. 正好符合VDOM的應用場景vue

    5.2 React.createElement和h函數

    5.3 什麼時候patch?

  5. 初次渲染----
    js ReactDOM.render(<App/>, container)
  6. 會觸發patch(container, vnode)函數
  7. re-render-- setState
  8. 會觸發patch(vNode, newVNode)node

    5.4 自定義組件的解析?

5.4.1 自定義組件的解析(TODOInput和TODOList組件的解析)

  1. ‘div’能夠直接渲染
    便可,vdom能夠實現
  2. TodoInput和TodoList是自定義組件(class),vdom不認識
  3. 所以Input和List定義的時候必須聲明render函數
  4. 根據props屬性初始化實例,而後執行實例的render函數
  5. 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]react

  1. setState經過一個隊列機制實現state更新,當執行setState時,會將須要更新的state很後放入狀態隊列,而不會當即更新this.state,隊列機制能夠高效地批量更新state。若是不經過setState而直接修改this.state的值
  2. 那麼該state將不會被放入狀態隊列中。當下次調用setState並對狀態隊列進行合併時,就會忽略以前修改的state,形成不可預知的錯誤
  3. 同時,也利用了隊列機制實現了setState的異步更新,避免了頻繁的重複更新state

7.7. 闡述本身對React和Vue的認識?

7.7.1. 二者的本質區別

  • vue本質是MVVM框架,由MVC發展而來
  • React本質是前端組件化框架,由後端組件化發展而來
  • 並不妨礙二者都能實現相同的功能jquery

    7.7.2. 模板的區別

  • vue-使用模板(最初由angular提出)
  • React-使用JSX
  • 模板語法上,我更傾向於JSX
  • 模板分離上,我更傾向於Vue
  • 模板應該和JS邏輯分離
  • 「開放封閉原則」npm

    7.7.3. 組件化的區別

  • React自己就是組件化,沒有組件哈就不是React
  • vue也支持組件化,不過是在MVVM上的擴展
  • 查閱vue組件化的文檔
  • 組件化更適合選擇Reactredux

    7.7.4. 二者的共同點

  • 都支持組件化
  • 都是數據驅動視圖後端

    7.7.5. 如何選擇

  • 國內使用,首推vue。文檔更易讀,易學,社區夠大
  • 若是團隊水平較高,推薦使用React,組件化和JSX瀏覽器

相關文章
相關標籤/搜索