偷懶不可取：React中DOM

Godtoy 發(fā)布于2019-08-20 15:41 / 2599人閱讀

摘要：獲取來判斷國際化環(huán)境是否為中文。完蛋，又回到原點，需要保持狀態(tài)不變又與需要變化的組件有交互關(guān)聯(lián)的還是要被影響。目前還沒有找到原因，探索中。。。

起因

初出茅廬的我一猛子扎進React的海洋，掙扎的過程中可謂使勁渾身解數(shù)，只要是React文檔中有提到過的，無所不用其極。最后，在前輩的熏陶還有編寫項目和自我學(xué)習(xí)中，規(guī)范性也越來越強，思路也越來越清晰——狗刨終于進化成自由泳。
這篇文章中呢，起因就是在實現(xiàn)一些需求的時候，通篇React語法中加入了古老的DOM讀寫，然后就被老大批評了。青少年最不缺的就是銳氣和鉆研精神，哈哈，沒錯，寫這篇文章最大的原因就是——我不服~
為啥不讓我用DOM？DOM有什么不好？React很難實現(xiàn)的需求應(yīng)該怎么做？

結(jié)果

沒錯，結(jié)果就是——服。在經(jīng)歷許多代碼重構(gòu)和邏輯修改后，發(fā)現(xiàn)React中有個DOM從視覺上感覺就有些不爽，不加上注釋或者即使加上注釋都給人一種不知所謂的感覺，維護上也有很大難度，比如
if (this.tableIsOpen) { // 表格自展開
  setTimeout(() => {
    const openClick = document.querySelectorAll(".testToggle");
    for (let i = 0; i < openClick.length; i += 1) {
      openClick[i].click();
    }
  }, 10);
}

當然最主要的是性能，因為React在DOM二次渲染時的效率會比原生DOM的效率高的多，所以會有更好的方式去解決。下面就來具體的說一下。

過程 用DOM的場景

1、在已有組件的基礎(chǔ)上，待組件渲染完成后，調(diào)用其內(nèi)部的方法。比如uxcore-table實現(xiàn)二級表格自展開時，需要調(diào)用組件元素中綁定的toggleSubComp(rowData)。
2、DOM獲取document.body.className來判斷國際化環(huán)境是否為中文。
3、多個組件，一個組件的狀態(tài)需要保持不變，但是其他組件需要根據(jù)交互來改變狀態(tài)。例如

可優(yōu)化方案 1

首先說第三個場景，說到改變狀態(tài)當然就是state和setState，那么順著這個思路走的話，好的，分割好每個組件，各個組件的方法最好不能有交叉。
然并卵,一旦各個組件之間有了交互上的關(guān)聯(lián)，狀態(tài)改變條件互相依賴，即使讓各種props穿插傳遞狀態(tài)條件,但是，props的變化對于需要接收它的組件，componentWillReceiveProps(nextprops)在父級有變化(setState)時，才會接收新的props。完蛋，又回到原點，需要保持狀態(tài)不變又與需要變化的組件有交互關(guān)聯(lián)的還是要被setState影響。
所以，用DOM吧。。。但是，用DOM修改元素，是很影響性能的，下個小結(jié)會說。其實這個思路其實并沒有錯，這個時候就要用到react專門為一些特殊情況準備的refs，官方文檔上說：ref添加到Compoennt上獲取的是Compoennt實例，添加到原生HTML上獲取的是DOM

When attaching a ref to a DOM component like , you get the DOM node back; when attaching a ref to a composite component like , you"ll get the React class instance. In the latter case, you can call methods on that component if any are exposed in its class definition.

這個意思，就是我在自己的class xxx extends React.Component的組件上加上refs中，獲取的是虛擬DOM節(jié)點(ReactElement)，那么，就好說了，再也不用亂搞一氣的props還有原生DOM的一堆改變樣式的操作，在組件內(nèi)部寫方法，然后根據(jù)父級狀態(tài)條件，利用this.refs.xxx.fn(status)調(diào)用即可。

第二個場景，個人感覺并沒有影響到性能，畢竟React的組件在標簽中，瀏覽器解析html的時候，在React的組件加載前，元素已經(jīng)存在，單純的查詢DOM不會導(dǎo)致頁面的重寫和回流。所以個人認為，React中還是可以少量用一些無關(guān)痛癢的DOM(我會說我還是鐘愛原生DOM嗎)。

第一個場景，最開始舉的例子。用于componentDidMount中，哈哈，死循環(huán)——在展開二級表格時不斷的從新渲染繼而不斷調(diào)用該方法，那么用在componentDidUpdate中就可以了，但是為什么要用定時器呢，因為在元素節(jié)點全部渲染出來時，只會在最后一個元素執(zhí)行點擊事件，用refs也是一樣的。
目前還沒有找到原因，探索中。。。如果有大大知道，可以告訴我啊~不勝感激^ο^

DOM影響React性能分析

對于性能的影響，很明顯了，就是多余的DOM計算。既然React用的虛擬DOM形式，再用DOM去修改，那么，瀏覽器再計算全部React的更改后，再去計算一遍原生DOM修改，這就非常尷尬了，React還不如不去用，也沒有節(jié)約多少時間。
再次整體用React中穿插DOM看著也不是很美觀。

總結(jié)

在應(yīng)用一個框架的時候，那么，我們不但要理解它的思想，還要嚴格的執(zhí)行它，當然這個思想必須是正確的，高效的。比如React的虛擬DOM，就要在虛擬DOM中操作。
如果代碼不遵循它的思想，那么就相當于不承認這個框架，這種沖突如果出現(xiàn)，要么重構(gòu)代碼，要么就摒棄這個框架。
以上是本人這個小前端的一點經(jīng)驗和淺見，希望大家給予指正~