對react vd 效能的理解

相信大家都知道react vd的效能是很好的，速度挺快的，真實dom操作很慢的，但是結果完全相反；

後來我就做了個測試，從兩個方面去測試，在頁面初始渲染1w條資料，react渲染耗時超過了1秒在1200毫秒左右，而原生使用拼接字串然後使用innerhtml進行新增到文件，耗時幾十毫秒在35毫秒左右；僅僅也就是乙個迴圈的耗時；

另外乙個測試是在上面的資料渲染完後，給每一項繫結單機事件，然後事件觸發後更改當前的標題內容，react耗時 300毫秒左右，如果我用原聲的去更改就是直接修改當元素的標題了，耗時可想而知了，基本可以忽略了吧。

當前react這個的耗時結果是可以進行優化的，然後我提出乙個子元件，然後在子元件上使用了shouldcomponentupdate 方法進行了優化處理，只在標題改變的時候才進行渲染子元件，測試後耗時有所提公升耗時為 250毫秒左右，提公升了60-80毫秒；

出現這樣的結果是為什麼呢？

首先react更新dom是通過運算元據改變的，然後進行vd的diff後在進行更新到頁面，而原生的操作是直接操作的節點，速度到底哪個快很明確了吧；

那react的使用到底解決了什麼問題呢？

react最直接的就是幫我們遮蔽了對dom的操作，讓我們用元件化和宣告的方式去編碼，讓我們的**更加的容易維護。而如果我們用原生**去操作dom，如果**不進行優化和處理那效能也很是問題，而且後期的維護的成本也是很大的，

專案慢慢發展變的很大，效能問題會逐步顯現，但是每個點都去優化又不是那麼現實。而react框架的特性是資料驅動檢視，底層已經對效能做了處理，在不需要我們進行手動處理的情況下依然可以給我們一種差不多的效能，是能被使用者接受的效能，當然我上面的測試是一種特例，

實際中也不會有一次渲染1w條資料的，框架解決的最大問題就是後期的維護的問題，同時也提供了過的去的效能，不然這麼多大廠也不會使用他了。

其實要學習react 如果對框架有更多的了解的話，可能後面的學習會順暢，很多謎團都會自然解開。