web前端技巧-DOM和Diff算法你應該知道的那些事

      我們在進行dom操作的時候可能會出現(xiàn)需要更新某一個dom元素，但如果不更新整個組件就無法生效，其實我們使用diff算法配合虛擬dom即可實現(xiàn)，下面小千就來給大家介紹一下。

      虛擬DOM

      本質上就是一個JS對象，用來描述你希望在屏幕上看到的內容

      Diff算法

      執(zhí)行過程

      初次渲染時，React會根據(jù)初始化的state（model），創(chuàng)建一個虛擬DOM對象（樹）

      根據(jù)虛擬DOM生成真正的DOM，渲染到頁面

      當數(shù)據(jù)變化后(setState())，會重新根據(jù)新的數(shù)據(jù)，創(chuàng)建新的虛擬DOM對象（樹）

      與上一次得到的虛擬DOM對象，使用Diff算法比對（找不同），得到需要更新的內容

      最終，React只將變化的內容更新（patch）到DOM中，重新渲染到頁面

      代碼演示

      組件render()調用后，根據(jù)狀態(tài)和JSX結構生成虛擬DOM對象(render()方法的調用并不意味著瀏覽器進行渲染，render方法調用時意味著Diff算法開始比對了)

      示例中，只更新p元素的文本節(jié)點內容

      初次渲染的DOM對象

      數(shù)據(jù)更新之后的虛擬DOM對象

      小結

      工作角度：應用第一，原理第二

      原理有助于更好的理解React的自身運行機制

      setState() 異步更新數(shù)據(jù)

      父組件更新導致子組件更新，純組件提升性能

      思路清晰簡單為前提，虛擬DOM和Diff保效率（渲染變化的組件）

      虛擬DOM -> state + JSX

      虛擬DOM最大的特點是 脫離了瀏覽器的束縛，也就是意味著只要是能支持js的地方都可以用到react，所以為什么說react是可以進行跨平臺的開發(fā)

      以上就是關于dom和diff算法的介紹了，最后歡迎對前端開發(fā)感興趣的同學來到千鋒web前端培訓班參加我們的前端培訓課程的學習，全程名師面授確保教學質量，現(xiàn)在咨詢還有免費學習資料可以領取，趕緊來了解一下吧。