資訊專欄INFORMATION COLUMN
摘要：獲取來判斷國際化環(huán)境是否為中文。完蛋，又回到原點(diǎn)，需要保持狀態(tài)不變又與需要變化的組件有交互關(guān)聯(lián)的還是要被影響。目前還沒有找到原因，探索中。。。
起因
結(jié)果初出茅廬的我一猛子扎進(jìn)React的海洋，掙扎的過程中可謂使勁渾身解數(shù)，只要是React文檔中有提到過的，無所不用其極。最后，在前輩的熏陶還有編寫項(xiàng)目和自我學(xué)習(xí)中，規(guī)范性也越來越強(qiáng)，思路也越來越清晰——狗刨終于進(jìn)化成自由泳。
這篇文章中呢，起因就是在實(shí)現(xiàn)一些需求的時(shí)候，通篇React語法中加入了古老的DOM讀寫，然后就被老大批評(píng)了。青少年最不缺的就是銳氣和鉆研精神，哈哈，沒錯(cuò)，寫這篇文章最大的原因就是——我不服~
為啥不讓我用DOM？DOM有什么不好？React很難實(shí)現(xiàn)的需求應(yīng)該怎么做？
過程 用DOM的場景沒錯(cuò)，結(jié)果就是——服。在經(jīng)歷許多代碼重構(gòu)和邏輯修改后，發(fā)現(xiàn)React中有個(gè)DOM從視覺上感覺就有些不爽，不加上注釋或者即使加上注釋都給人一種不知所謂的感覺，維護(hù)上也有很大難度，比如
if (this.tableIsOpen) { // 表格自展開 setTimeout(() => { const openClick = document.querySelectorAll(".testToggle"); for (let i = 0; i < openClick.length; i += 1) { openClick[i].click(); } }, 10); }當(dāng)然最主要的是性能，因?yàn)镽eact在DOM二次渲染時(shí)的效率會(huì)比原生DOM的效率高的多，所以會(huì)有更好的方式去解決。下面就來具體的說一下。
1、在已有組件的基礎(chǔ)上，待組件渲染完成后，調(diào)用其內(nèi)部的方法。比如uxcore-table實(shí)現(xiàn)二級(jí)表格自展開時(shí)，需要調(diào)用組件元素中綁定的toggleSubComp(rowData)。
2、DOM獲取document.body.className來判斷國際化環(huán)境是否為中文。
3、多個(gè)組件，一個(gè)組件的狀態(tài)需要保持不變，但是其他組件需要根據(jù)交互來改變狀態(tài)。例如
可優(yōu)化方案 1
首先說第三個(gè)場景，說到改變狀態(tài)當(dāng)然就是state和setState，那么順著這個(gè)思路走的話，好的，分割好每個(gè)組件，各個(gè)組件的方法最好不能有交叉。
然并卵,一旦各個(gè)組件之間有了交互上的關(guān)聯(lián)，狀態(tài)改變條件互相依賴，即使讓各種props穿插傳遞狀態(tài)條件,但是，props的變化對(duì)于需要接收它的組件，componentWillReceiveProps(nextprops)在父級(jí)有變化(setState)時(shí)，才會(huì)接收新的props。完蛋，又回到原點(diǎn)，需要保持狀態(tài)不變又與需要變化的組件有交互關(guān)聯(lián)的還是要被setState影響。
所以，用DOM吧。。。但是，用DOM修改元素，是很影響性能的，下個(gè)小結(jié)會(huì)說。其實(shí)這個(gè)思路其實(shí)并沒有錯(cuò)，這個(gè)時(shí)候就要用到react專門為一些特殊情況準(zhǔn)備的refs，官方文檔上說：ref添加到Compoennt上獲取的是Compoennt實(shí)例，添加到原生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.
這個(gè)意思，就是我在自己的class xxx extends React.Component的組件上加上refs中，獲取的是虛擬DOM節(jié)點(diǎn)(ReactElement)，那么，就好說了，再也不用亂搞一氣的props還有原生DOM的一堆改變樣式的操作，在組件內(nèi)部寫方法，然后根據(jù)父級(jí)狀態(tài)條件，利用this.refs.xxx.fn(status)調(diào)用即可。
23第二個(gè)場景，個(gè)人感覺并沒有影響到性能，畢竟React的組件在標(biāo)簽中，瀏覽器解析html的時(shí)候，在React的組件加載前，元素已經(jīng)存在，單純的查詢DOM不會(huì)導(dǎo)致頁面的重寫和回流。所以個(gè)人認(rèn)為，React中還是可以少量用一些無關(guān)痛癢的DOM(我會(huì)說我還是鐘愛原生DOM嗎)。
DOM影響React性能分析第一個(gè)場景，最開始舉的例子。用于componentDidMount中，哈哈，死循環(huán)——在展開二級(jí)表格時(shí)不斷的從新渲染繼而不斷調(diào)用該方法，那么用在componentDidUpdate中就可以了，但是為什么要用定時(shí)器呢，因?yàn)樵谠毓?jié)點(diǎn)全部渲染出來時(shí)，只會(huì)在最后一個(gè)元素執(zhí)行點(diǎn)擊事件，用refs也是一樣的。
目前還沒有找到原因，探索中。。。如果有大大知道，可以告訴我啊~不勝感激^ο^
總結(jié)對(duì)于性能的影響，很明顯了，就是多余的DOM計(jì)算。既然React用的虛擬DOM形式，再用DOM去修改，那么，瀏覽器再計(jì)算全部React的更改后，再去計(jì)算一遍原生DOM修改，這就非常尷尬了，React還不如不去用，也沒有節(jié)約多少時(shí)間。
再次整體用React中穿插DOM看著也不是很美觀。
在應(yīng)用一個(gè)框架的時(shí)候，那么，我們不但要理解它的思想，還要嚴(yán)格的執(zhí)行它，當(dāng)然這個(gè)思想必須是正確的，高效的。比如React的虛擬DOM，就要在虛擬DOM中操作。
如果代碼不遵循它的思想，那么就相當(dāng)于不承認(rèn)這個(gè)框架，這種沖突如果出現(xiàn)，要么重構(gòu)代碼，要么就摒棄這個(gè)框架。
以上是本人這個(gè)小前端的一點(diǎn)經(jīng)驗(yàn)和淺見，希望大家給予指正~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82422.html
摘要：不覺間，已悄然離去恍然后，正慢慢襲來。已完成一期內(nèi)容，只包含買家點(diǎn)餐功能，二期準(zhǔn)備做賣家及支付功能。經(jīng)過考慮和評(píng)估，我決定對(duì)這兩個(gè)選擇進(jìn)行一個(gè)折中。項(xiàng)目部署，及代理轉(zhuǎn)發(fā)等配置。發(fā)現(xiàn)最近，已經(jīng)對(duì)非技術(shù)類書籍少了很多興趣。 不覺間，2016已悄然離去；恍然后，2017正慢慢襲來。 又到了總結(jié)過去，展望未來的時(shí)候了，那就先總結(jié)16年的收獲和經(jīng)驗(yàn)教訓(xùn)，再展望17年對(duì)自己及行業(yè)的一些期望吧。 1...
摘要：不覺間，已悄然離去恍然后，正慢慢襲來。已完成一期內(nèi)容，只包含買家點(diǎn)餐功能，二期準(zhǔn)備做賣家及支付功能。經(jīng)過考慮和評(píng)估，我決定對(duì)這兩個(gè)選擇進(jìn)行一個(gè)折中。項(xiàng)目部署，及代理轉(zhuǎn)發(fā)等配置。發(fā)現(xiàn)最近，已經(jīng)對(duì)非技術(shù)類書籍少了很多興趣。 不覺間，2016已悄然離去；恍然后，2017正慢慢襲來。 又到了總結(jié)過去，展望未來的時(shí)候了，那就先總結(jié)16年的收獲和經(jīng)驗(yàn)教訓(xùn)，再展望17年對(duì)自己及行業(yè)的一些期望吧。 1...
摘要：場景為了更清晰的安排年前年后的工作和值班，現(xiàn)在要對(duì)過年期間人員請(qǐng)假的情況進(jìn)行統(tǒng)計(jì)，并且進(jìn)行一個(gè)簡單的管理。我們現(xiàn)在來訂閱一個(gè)名為的事件，用來表示表格中需要展示每條數(shù)據(jù)。 前言 React 導(dǎo)讀（一）React 導(dǎo)讀（二） 在之前 2 篇文章中中學(xué)習(xí)到了寫第一個(gè) Web 組件以及常用的生命周期函數(shù)的使用，這篇文章將繼續(xù)之前的目錄，開始新的知識(shí)點(diǎn)補(bǔ)充： [x] React 如何編寫 He...
摘要：但如果你想更加高效地使用來開發(fā)，成為大師，那下面我要傳授的這五招你一定得認(rèn)真學(xué)習(xí)一下了。雖然損失了一丟丟性能，但避免了無限的。所以我們需要設(shè)置，這些默認(rèn)行為將會(huì)被去掉以上兩點(diǎn)的優(yōu)化才能成功。陸續(xù)可能還會(huì)更新一些別的招數(shù)，敬請(qǐng)期待。 本文面向?qū)ο笫怯幸欢╒ue.js編程經(jīng)驗(yàn)的開發(fā)者。如果有人需要Vue.js入門系列的文章可以在評(píng)論區(qū)告訴我，有空就給你們寫。 對(duì)大部分人來說，掌握Vue.j...
閱讀 2836·2021-11-19 11:35
閱讀 2588·2021-11-02 14:40
閱讀 1409·2021-09-04 16:48
閱讀 3015·2019-08-30 15:55
閱讀 1769·2019-08-30 13:11
閱讀 1963·2019-08-29 11:12
閱讀 1097·2019-08-27 10:52
閱讀 3168·2019-08-26 18:36
