React

　當我們使用React開發的時候，我們就是在寫React元件，元件的state即資料，元件的render方法返回的是檢視，元件的宣告週期鉤子和事件的處理，是資料的變化邏輯。更準確地說是一顆元件樹，根元件引用子元件，子元件可能還會引用子元件，形成元件樹。元件樹的結構和檢視的盒子巢狀結構類似。

　將介面劃分為元件、宣告檢視和資料的關係、實現資料的變化邏輯

　JSX是一個JavaScript的語法擴充套件

　生命週期：常見的生命週期鉤子函式有componentDidMount、componentDidUpdate、componentwillUnmount

　 為什麼需要hook？

　　為了讓功能程式碼聚合在一起，增加了元件的可維護性。hook提供了功能邏輯程式碼複用的新方式。React需要提供一些額外的api實現，由於React推崇函式式元件的簡潔和宣告式程式設計的理念，hook給函式元件增加狀態和邏輯。

　　useState和useEffect

　　usestate原理：讓函式式元件擁有自己的狀態，如何讓函式式元件擁有自己的狀態，有兩個關鍵：1.狀態儲存在哪裡？2.狀態以什麼格式儲存

　　狀態儲存在哪裡？對於class元件可以直接掛載例項上面，函式式元件應該掛在虛擬DOM節點上，渲染過程中，呼叫函式元件時候React是知道在處理哪個節點的，因此當在函式式元件中呼叫useState方法，React就可以把建立的狀態掛到相應的節點上面。在下一次呼叫函式元件時候，React發現已經有這個狀態了，就把值返回。

　　狀態如何儲存？類比class元件，把整個state作為一個物件儲存，但是上面提到，這樣儲存不能達到分離功能邏輯的目的；因此我們希望可以將狀態分開，每個狀態有自己對應的key，例如const 【a,setA】= useState('a',’‘) 即物件儲存狀態，useState方法傳遞一個key和一個初始值，React把這個key和對應value儲存到物件上。但是這樣會比較冗餘，React實現方式是隻需要傳遞初始值，不用傳遞key，React根據useState呼叫順序來識別是哪一個狀態。函式式元件的狀態就是一個數組格式，每個狀態在函式式元件中呼叫useState宣告的順序，也是它們在狀態陣列中儲存的順序。

• 　　函式式元件新增狀態需要useState這個hook；在函式式元件中新增一些有副作用的操作，需要用到useEffect這個hook
• 　　useState函式接收一個引數作為初始值；
• 　　useState返回值為一個數組，陣列第一個元素式狀態變數，第二個元素是設定該狀態的方法；
• 　　呼叫設定狀態的方法，會同步觸發diff和更新操作

1. 　　useEffect接收第一個引數是一個回撥callback，會在特定時機執行
2. 　　useEffect傳入的callback，可以返回一個方法clearEffect，React會在元件解除安裝時候呼叫clearEffect，清除副作用
3. 　　useEffect第二個引數是一個數組，陣列中是依賴項，當依賴變化時候才會執行useEffect傳入的方法
4. 　　如果是空陣列，則只在元件掛載時候執行，類似compontDidMount
5. 　　如果第二個引數不傳，則在元件更新時候執行

Vue

　　vue是一款優秀的web應用開發框架，使用它讓我們開發應用時更加高效。從使用者角度，web應用要提供互動能力和資訊展示。從開發者角度，web應用是一種利用網路瀏覽器和網路技術在網際網路上執行任務和計算機程式。（前端開發者實現一個web應用需要用到建立和改變介面dom的能力來給使用者呈現預期的介面、網路通訊能力來控制和獲取使用者關心的資料）

比較

相同點：Virtual DOM、提供響應式和元件化的檢視元件、將注意力集中在核心庫，其他功能如路由和全域性狀態管理交給相關的庫

不同點：

使用上：React的api簡潔，Vue的Api更多，vue編寫程式碼可能更少

　　　　Vue更容易上手，React要實現相同功能需要使用者操作，Vue的模板語法更貼近原生，因此更容易接收和理解

　　　　模板語法和JSX 其實vue也支援JSX，JSX表達能力更強，模板語法更直觀

　　　　超大規模的首屏渲染上React有一些優勢，因為Vue需要做一些初始化工作

　　　　React元件是繼承React.compont ,Vue是物件，因此React可以實現基於繼承的元件複用，而Vue不行

原理上：Vue通過資料劫持，實現當資料變化時候響應式更新，React在setState時候diff元件樹