者：卡頌

轉發(fā)鏈接：https://mp.weixin.qq.com/s/ICjOlJL-fUGRb2S_xqBT7Q

是個無聊的問題嗎當提出這個問題時，我的第一反應是——我還真是無聊 ?♂?

轉念一想，em～，好像事情沒有這么簡單如果直接選擇所有div再遍歷刪除的話，div的子孫節(jié)點也被刪除了。有什么辦法能在保留整棵DOM樹層級關系的前提下，只刪除div節(jié)點呢？我陷入了沉思。。。。。

知乎是React寫的，React用JSX來表示頁面層次結構，JSX在編譯時會被babel轉換為React.createElement。在代碼運行時，React獲取的其實是React.createElement()的返回值。辦法來了！

我們只需要覆寫一下React.createElement方法，當遇到type==='div'，我們將type修改為React.Fragment，即我們把所有div節(jié)點都變成Fragment，那不就能在保持樹的層級關系的同時去掉div了？讓我們開始吧??！如何拿到React對象這時候遇到了第一個問題：知乎沒把React暴露到全局（廢話，當然不會 ），怎么獲取React對象呢？

好在當我們使用React Dev Tools時，Dev Tools會向頁面注入全局變量__REACT_DEVTOOLS_GLOBAL_HOOK__，這個變量會成為鏈接React與Dev Tools的橋梁。

其中的renderers屬性指頁面使用的渲染器，在網(wǎng)頁端就是我們熟悉的React-DOM（在客戶端當然就是React-Native啦）我們發(fā)現(xiàn)一個方法findFiberByHostInstance

方法名居然出現(xiàn)了Fiber字樣??！

我們知道，F(xiàn)iber是React的最小可調(diào)度單元（別問為什么，問就是安利我寫的React源碼揭秘系列）那findFiberByHostInstance方法所在文件一定有React相關定義。我們右鍵跳轉到定義函數(shù)的文件，

在文件內(nèi)搜.createElement

果然讓我們找到了。打上斷點，刷新頁面試試～

果然進來了，事情越發(fā)有趣了看看o.a是什么，em～～一個對象，內(nèi)部有Children、createElement。。。。。。看來這就是React對象了

趕忙把來之不易的React對象保存在全局，順便把React.createElement也保存一份。

現(xiàn)在放開斷點，window.React已經(jīng)指向知乎首頁內(nèi)部使用的React啦。

修改React.createElement方法我們知道，React.createElement方法第一個參數(shù)為type（別問為什么，問又是一波安利React源碼揭秘系列），我們再到React文檔中找來React.Fragment的定義。

if (typeof Symbol==='function' && Symbol.for) {
  const symbolFor=Symbol.for;
  REACT_ELEMENT_TYPE=symbolFor('react.element');
  REACT_PORTAL_TYPE=symbolFor('react.portal');
  REACT_FRAGMENT_TYPE=symbolFor('react.fragment');
  REACT_STRICT_MODE_TYPE=symbolFor('react.strict_mode');
  REACT_PROFILER_TYPE=symbolFor('react.profiler');
  REACT_PROVIDER_TYPE=symbolFor('react.provider');
  // ...
}

接下來，修改全局變量

React.createElement=(type, ...args)=> {
    if (type==='div') {
        type=Symbol.for('react.fragment');
    }
    // originCreateElement才是正經(jīng)的React.createElement
    return originCreateElement(type, ...args);
}

讓我們康康此時的頁面結構

ok～～～ 滿屏的div套div（嫌棄臉），接著我們輕輕的點一下關注按鈕，觸發(fā)隨便啥組件的setState。接下來，就是見證奇跡的時刻。。。

除了根節(jié)點，其他div都消失了，終于恢復了往日的清爽界面（大誤）

總結通過這篇無聊的文章，我們認識到：

1. React每次觸發(fā)setState更新，都會重新遍歷整棵Fiber樹。（否則也不會點擊一個按鈕整個頁面的div都消失）
2. React.createElement的深度應用。
3. 知乎真是有太多div了

PS：如果你用Chrome將被壓縮后的代碼formatted后打上斷點，刷新頁面進入斷點后瀏覽器卡死，不要懷疑，這是Chrome的bug，截止版本 81.0.4044.138（正式版本） （64 位）還未修復，建議使用chrome開發(fā)者版本 Chrome Canary

作者姓名：卡頌

轉發(fā)鏈接：https://juejin.im/post/5ecb2af0