React虚拟DOM具体实现——利用节点json描述还原dom结构

Posted 2020-09-05 勤劳的小叶酱

　　前两天，帮朋友解决一个问题：

　　　ajax请求得到的数据，是一个对象数组，每个对象中，具有三个属性，parentId，id，name，然后根据这个数据生成对应的结构。

　　刚好最近在看React，并且了解到其中的虚拟DOM，其实，就是利用json数据来代替DOM结构表示，然后利用这个json数据，渲染出DOM树，总体添加到页面中。下面，我就通过介绍我如何实现上面实际问题的思路，一边完成实际需求，一边实现React中虚拟DOM渲染成DOM的原理。

　　模拟数据结构如下：

 1 var allJson = [{
 2     \'id\': \'1\',
 3     \'name\': \'我是1 我是根节点..我的长度是..\'
 4 }, {
 5     \'id\': \'2\',
 6     \'parentId\': \'1\',
 7     \'name\': \'我是2 我的父级是1..我的长度是..\'
 8 }, {
 9     \'id\': \'3\',
10     \'parentId\': \'2\',
11     \'name\': \'我是3 我的父级是2...我的长度是..\'
12 }, {
13     \'id\': \'8\',
14     \'parentId\': \'4\',
15     \'name\': \'我是8 我的父级是4..我的长度是..\'
16 }, {
17     \'id\': \'4\',
18     \'parentId\': \'2\',
19     \'name\': \'我是4 我的父级是2..我的长度是..\'
20 }, {
21     \'id\': \'5\',
22     \'parentId\': \'3\',
23     \'name\': \'我是5 我的父级是3..我的长度是..\'
24 }, {
25     \'id\': \'6\',
26     \'parentId\': \'1\',
27     \'name\': \'我是6 我的父级是1..我的长度是..\'
28 }, {
29     \'id\': \'7\',
30     \'parentId\': \'4\',
31     \'name\': \'我是7 我的父级是4..我的长度是..\'
32 }];

方法一：直接将数据添加到页面中

　　1）创建一个数组childRoot，用于存放已经添加到DOM树中的对象。(其中每一个元素，都可能有子节点)，创建数组cloneAllJson，用于存放原始数据复制。

　　2）利用根节点没有parentId，便利所有节点，找到根节点，并将该节点对象从cloneAllJson数组对象中移除（减少重复遍历）。

　　3）循环childRoot数组，在数组剩下的节点对象中，根据parentId找到childRoot数组中的当前第一个元素的所有的子节点，每找到一个，直接添加到DOM树中，并添加到childRoot数组中，且从cloneAllJson数组中移除找到的子节点。添加完所有子节点后，移除childRoot的第一个元素。如此循环，直到childRoot数组长度为零。

代码如下：

 1 // 模拟数据
 2 var allJson = [{
 3     \'id\': \'1\',
 4     \'name\': \'我是1 我是根节点..我的长度是..\'
 5 }, {
 6     \'id\': \'2\',
 7     \'parentId\': \'1\',
 8     \'name\': \'我是2 我的父级是1..我的长度是..\'
 9 }, {
10     \'id\': \'3\',
11     \'parentId\': \'2\',
12     \'name\': \'我是3 我的父级是2...我的长度是..\'
13 }, {
14     \'id\': \'8\',
15     \'parentId\': \'4\',
16     \'name\': \'我是8 我的父级是4..我的长度是..\'
17 }, {
18     \'id\': \'4\',
19     \'parentId\': \'2\',
20     \'name\': \'我是4 我的父级是2..我的长度是..\'
21 }, {
22     \'id\': \'5\',
23     \'parentId\': \'3\',
24     \'name\': \'我是5 我的父级是3..我的长度是..\'
25 }, {
26     \'id\': \'6\',
27     \'parentId\': \'1\',
28     \'name\': \'我是6 我的父级是1..我的长度是..\'
29 }, {
30     \'id\': \'7\',
31     \'parentId\': \'4\',
32     \'name\': \'我是7 我的父级是4..我的长度是..\'
33 }, ];
34 
35 /* 复制数据 */
36 var cloneAllJson = allJson.concat();
37 
38 /* 找到根节点ID 并画出根节点到页面 */
39 /* 定义一个数组用来装每次新生成的次级父节点 */
40 var childRoot = [];
41 /* 遍历所有的接节点，查找根节点 */
42 for (var i = 0; i < allJson.length; i++) {
43     /* 如果不存在父节点字段 则为根节点 */
44     if (allJson[i].parentId == undefined) {
45         /* 赋值根节点ID */
46         rootId = allJson[i].id;
47         /* 将根节点添加到childRoot数组中，然后在复制的数组中删除这个根节点 */
48         childRoot.push(allJson[i]);
49         cloneAllJson.splice(i, 1);
50         /* 画出根节点 */
51         var div = document.createElement(\'div\');
52         div.id = allJson[i].id;
53         div.appendChild(document.createTextNode(allJson[i].name));
54         document.getElementById(\'rootId\').appendChild(div);
55     }
56 }
57 
58 
59 /*方法一：每次找到父节点的所有子节点，添加到dom树上，
60  *    并添加到childRoot数组中，从clone数组中剔除，（减少重复遍历）
61  *    直到childRoot数组中长度为0    
62  *    可以解决，json数组中，父节点在子节点后面的问题
63  */
64 while (childRoot.length) {
65     /* 遍历cloneAllJson数组，找到childRoot第一个元素的所有子节点，并直接添加到页面上*/
66     for (var i = 0; i < cloneAllJson.length; i++) {
67         if (cloneAllJson[i].parentId == childRoot[0].id) {
68             /* 画出一级子节点 */
69             var div = document.createElement(\'div\');
70             div.id = cloneAllJson[i].id;
71             div.appendChild(document.createTextNode(cloneAllJson[i].name));
72             /* 直接添加到页面上 */
73             document.getElementById(childRoot[0].id).appendChild(div);
74             /* 将该节点添加到childRoot中，之后遍历添加其子节点 */
75             childRoot.push(cloneAllJson[i]);
76             /* 将该节点从cloneAllJson数组中删除，并将索引向后减1 */
77             cloneAllJson.splice(i, 1);
78             i--;
79         }
80     }
81     /* 从childRoot数组中移除第一个元素（已经将其所有孩子添加到页面中） */
82     childRoot.shift();
83 }

最终生成dom结构如下图显示：

　　其中rootId，是我们自己添加外节点。

　　其实，在这个过程中，我强调了，每次找到节点，直接添加到页面上，在添加之前，都是先根据id查找父节点，其实，DOM操作性能很差，一般都是尽量减少DOM操作。在这里，我们就可以利用React中虚拟DOM渲染到页面上的方法了。

方法二：使用React虚拟DOM渲染方法

　　其实主要思想还是方法一的思想，唯一不同，就是我们不是直接把节点对象添加到页面结构中，而是，给其父节点添加一个childObjs属性（用于存放所有子节点对象的数组）中。然后再利用递归，将所有节点渲染到页面上。其中，我们只进行了一次DOM查找操作，即最终调用render函数时。

代码如下：

  1 /* 模拟数据 */
  2 var allJson = [{
  3     \'id\': \'1\',
  4     \'name\': \'我是1 我是根节点..我的长度是..\'
  5 }, {
  6     \'id\': \'2\',
  7     \'parentId\': \'1\',
  8     \'name\': \'我是2 我的父级是1..我的长度是..\'
  9 }, {
 10     \'id\': \'3\',
 11     \'parentId\': \'2\',
 12     \'name\': \'我是3 我的父级是2...我的长度是..\'
 13 }, {
 14     \'id\': \'8\',
 15     \'parentId\': \'4\',
 16     \'name\': \'我是8 我的父级是4..我的长度是..\'
 17 }, {
 18     \'id\': \'4\',
 19     \'parentId\': \'2\',
 20     \'name\': \'我是4 我的父级是2..我的长度是..\'
 21 }, {
 22     \'id\': \'5\',
 23     \'parentId\': \'3\',
 24     \'name\': \'我是5 我的父级是3..我的长度是..\'
 25 }, {
 26     \'id\': \'6\',
 27     \'parentId\': \'1\',
 28     \'name\': \'我是6 我的父级是1..我的长度是..\'
 29 }, {
 30     \'id\': \'7\',
 31     \'parentId\': \'4\',
 32     \'name\': \'我是7 我的父级是4..我的长度是..\'
 33 }];
 34 
 35 /* 数据复制 */
 36 var cloneAllJson = allJson.concat();
 37 
 38 /* 根节点对象 */
 39 var root = {};
 40 /* 定义一个数组用来装每次新生成的父节点 */
 41 var childRoot = [];
 42 
 43 /* 查找根节点，并记录根节点,并将该节点从数组中剔除 */
 44 cloneAllJson.forEach(function(node, index) {
 45     /* 不存在parentId，就是根节点root */
 46     if (!node.parentId) {
 47         /* 引入深度，方便后期控制样式 */
 48         node.deep = 1;
 49         root = node;
 50         childRoot.push(root);
 51         cloneAllJson.splice(index, 1);
 52     }
 53 });
 54 
 55 /* 给所有childRoot节点中childObj中添加其子节点 */
 56 while (childRoot.length) {
 57     let parent = childRoot[0];
 58     for (let j = 0; j < cloneAllJson.length; ++j) {
 59         let node = cloneAllJson[j];
 60         if (node.parentId == parent.id) {
 61             node.deep = parent.deep + 1;
 62             /* 引入childObjs，用于存放所有子节点对象的数组 */
 63             if (!parent.childObjs) {
 64                 parent.childObjs = [];
 65 
 66             }
 67             parent.childObjs.push(node);
 68             childRoot.push(node);
 69             cloneAllJson.splice(j--, 1);
 70         }
 71     }
 72     childRoot.shift();
 73 }
 74 
 75 console.log(root);
 76 
 77 /* 渲染函数 */
 78 function render(node, root) {
 79     var elem;
 80     /* 如果节点存在子节点对象，创建该节点，并递归调用渲染函数，将其渲染为该节点的子元素 */
 81     /* 否则：直接渲染该节点*/
 82     if (node.childObjs) {
 83         var elem = createNode(node);
 84         node.childObjs.forEach(function(item) {
 85             render(item, elem);
 86         });
 87     } else {
 88         var elem = createNode(node);
 89     }
 90     /* 添加到页面中的节点上 */
 91     root.appendChild(elem);
 92 })
 93 
 94 // 创建节点工厂函数
 95 function createNode(node) {
 96     var div = document.createElement(\'div\');
 97     div.style.paddingLeft = 20 + \'px\';
 98     div.style.fontSize = 16 - node.deep + \'px\';
 99     div.appendChild(document.createTextNode(node.name));
100     return div;
101 }

最终显示结果截图：

　　其实准确的说，我一共写了四种实现方法，但是这两种，是其中最好简单的两种，希望大家批评指正。

　　

github上函数地址：https://github.com/DiligentYe/my-frame/blob/master/json-to-dom.js