React 進階一

難忘記發表於2019-03-12
React

React適合做什麼

React是facebook開源的前端開發框架，以高效能，易用性著稱，而作為React本身，它適合做什麼事情呢？

Building large applications with data that changes over time

即用於構建資料不斷髮生變化的大型應用。 怎麼說呢，就是React並不適用於構建一個企業的展示型官網，它適合的是電商網站，ERP系統，人資管理平臺等中後臺應用。

React的優缺點

React的優點大概就是效能，易用性，單向資料流三個方面。

  • 易用性
    • 宣告式程式設計。按我理解的宣告式程式設計就是在開發過程中關注的點發生了變化，在jquery年代，我們需要考慮取回資料後如何拼接DOM然後如何塞入到指定div中，而現在更多的是關注資料格式，不需要考慮如何將資料渲染到指定容器中。
    // jquery
    function renderDiv(data, id){
        var content = $("#"+id);
        content.html("");
        content.html(dataRender(data);
    }
// React
    <diy-list data={data}></diy-list>
    handelClick(){
        this.data = ...
    }
複製程式碼
  • 效能
    • 虛擬DOM。在原先的前端開發中，動輒就是對頁面上的原生DOM進行操作，而原生DOM本身的屬性之多令人不能想象，繼而可以想到操作原生DOM的效能消耗成本。而虛擬DOM就是用javascript物件來代替dom，而我們在react中的一切操作其實都是基於虛擬DOM，我們並不能直接操作到真實DOM。
    <diy-list data={data}></diy-list>
/*
{
    tagName: diyList,
    props:{
        data: data
    },
    children: [
    
    ]
}

*/
複製程式碼
    • diff演算法。react中的虛擬DOM是diff演算法的前提，每次頁面DOM需要更新時，React會將之前的虛擬DOM存放在記憶體中，並且通過diff演算法算出新舊倆個虛擬DOM中所需要的變更，準確的反應到DOM中
      • diff演算法的規律：
        • 同層順序對比，即每一層級和對應層級順序對比，之後到下一層
        • 標籤名稱不同直接刪除
        • 標籤相同，屬性不同，將對應屬性標記，待完成後更新
        • 為什麼需要key值，是因為React在執行diff演算法時，為了準確且不消耗不必要效能，會根據key值迴圈整個列表，從而找到最小的改動
        // ago
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
// now
<ul>
    <li>a</li>
    <li>b</li>
    <li>e</li>
    <li>c</li>
    <li>d</li>
</ul>
//當前情況下，如果沒有key，diff演算法在比較到第三個li的時候，
會因為內容的不同直接刪掉之前的<li>c</li><li>d</li>,並且新
建 <li>e</li><li>c</li><li>d</li>
// 而如果根據一個固定key去迴圈，就會得出now只是比ago多了一
個<li>e</li>,只需要新建一個即可，所以key最好使用uid這種字
段去表示，而不是選用index區表示。
複製程式碼
  • 單向資料流 單向資料流是指應用狀態從上到下，便於維護。

React的缺點

  • 過於簡單，會導致需要學習其他的庫和他搭配使用，比如fetch，Redux等，提高了學習成本。

jsx需要注意的點

  • jsx是用來描述DOM結構的JavaScript語法糖。
  • class->className, for->htmlfor
  • jsx中的className和style是javascript物件

相關文章