一次性清除“知乎”所有DIV

迈不过友情╰ 2022-11-26 07:43 159阅读 0赞

学习本文的前置知识：

*  `React`每次更新都会从`rootFiber`（根`Fiber`节点）向下深度优先遍历
 *  `JSX`在编译时会变为`React.createElement`，在组件`render`时会调用该方法。

30秒速答：

知乎首页是`React`写的，我们可以覆写`React.createElement`方法，在运行时将所有`div`节点渲染为`React.Fragment`。

这样就能清除所有`div`。

让我们来愉快的改造`知乎`吧。

# 拿到React对象 #

这时候遇到了第一个问题：`知乎`没把`React`暴露到全局（废话，当然不会），怎么获取`React`对象呢？

![format_png][]

好在当我们使用`React Dev Tools`时，`Dev Tools`会向页面注入全局变量`__REACT_DEVTOOLS_GLOBAL_HOOK__`。

这个变量是连接`React`与`Dev Tools`的桥梁。

![format_png 1][]

其中`renderers`属性指页面使用的`渲染器`。

`React`源码架构划分为`调度器 - 协调器 - 渲染器`。

对于不同的宿主环境，使用不同的`渲染器`。

*  对于`web`，使用`ReactDOM渲染器`
 *  对于`客户端`，使用`React-Native渲染器`

在`renderers`属性中，我们发现一个方法`findFiberByHostInstance`：

![format_png 2][]

方法名居然出现了`Fiber`字样。

`Fiber节点`是`React`的最小可调度单元，可以理解为`虚拟DOM节点`。

那`findFiberByHostInstance`方法所在文件一定有`React`相关定义。我们右键跳转到定义函数的文件，

![format_png 3][]

在文件内搜`.createElement`

![format_png 4][]

果然让我们找到了。打上断点，刷新页面试试

![format_png 5][]

果然进来了，事情越发有趣了。

看看`o.a`包含的属性，`Children`、`createElement`......

看来这就是`React`对象了。

![format_png 6][]

我们将来之不易的`React`对象保存在`window`，顺便把`React.createElement`也保存一份。

![format_png 7][]

现在放开断点，`window.React`已经指向知乎首页内部使用的React啦。

![format_png 8][]

# 修改React.createElement #

`React.createElement`方法第一个参数为`type`。

在源码中，我们找到`React.Fragment`对应的`type`。

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');
      // ...
    }

接下来，修改全局变量，将所有`div`变为`Fragment`。

React.createElement = (type, ...args) => {
        if (type === 'div') {
            type = Symbol.for('react.fragment');
        }
        // originCreateElement是原始React.createElement
        return originCreateElement(type, ...args);
    }

让我们滚动页面，触发随便啥组件的`setState`。

接下来，就是见证奇迹的时刻。。。

![format_png 9][]

`div`都消失啦，终于恢复了往日的清爽界面（大误）

理论上我们可以用这个方法将任何`React`应用改造成任何样子。

真是，太无聊了......

[format_png]: /images/20221124/f5c31ea2321841218a0bb9cc39903555.png
[format_png 1]: /images/20221124/c81f37e4d8fa42e6be0d6ae5b090ecc9.png
[format_png 2]: /images/20221124/183195e8313947cf8932f3d7ca3afb11.png
[format_png 3]: /images/20221124/0071e7855b5e4e75a6936ac482f9f153.png
[format_png 4]: /images/20221124/9cb4397bc93146409ba6abd01ca296e2.png
[format_png 5]: /images/20221124/fa15be2fd98f4040abd1a7e5993b167b.png
[format_png 6]: /images/20221124/bb07e486ff834509aa402243c01a881b.png
[format_png 7]: /images/20221124/d6081c9af96b40e5810fa25db234ce86.png
[format_png 8]: /images/20221124/6c6248f424e14b76b22f915d2efde5a5.png
[format_png 9]: /images/20221124/94830f31e93d4b3cabbc02a3bd233595.png