构造高性能树状结构（渲染、添加、修改、删除）

一、数据格式区别

1、数组对象形式

const treeData = [
 {    
  title:'0',
  key:'0',
  children[
   {    
    title:'0-0',
    key:'0-0',
    children:[
     {
      title:'0-0-0',
      key:'0-0-0',
     },
     {
      title:'0-0-1',
      key:'0-0-1'
     }
    ]
   }
  ]
 }
]

2、Map形式

const treeMapData = {
 root:{
  title:'0',
  childrenIdList:['0-0'],
  parentId:''
 },
 '0-0':{
  title:'0-0',
  childrenIdList:['0-0-0','0-0-1'],
  parentId:'0'
 },
 '0-0-0':{
  title:'0-0-0',
  childrenIdList:[],
  parentId:'0-0'
 },
 '0-0-1':{
  title:'0-0-1',
  childrenIdList:[],
  parentId:'0-0'
 }
}

二、渲染

拿到对应的item数据通过renderFn(item)来处理treeNode

1、数组对象形式

<ul>
 {treeData.map((item)=>{
   return <li>{renderFn(item)}</li>
 })}
</ul>

2、Map形式

<ul>
 {treeMapData['root'].childrenIdList.map((id)=>{
  const item = treeMapData[id]
  return <li>{renderFn(item)}</li>
 })}
</ul>

三、添加

* 在数组对象形式中我们需要递归遍历去找到父节点的方式去添加子节点，然后重新构造一个新的数组对象。

* Map形式中我们不需要递归遍历，结构也非常清晰。

treeMapData['0-0-2'] = {
 title:'0-0-2',
 childrenIdList:[],
 parentId:'0-0'
}


treeMapData['0-0'].childrenIdList.push('0-0-2')

const treeMapData = {
 root:{
  title:'0',
  childrenIdList:['0-0'],
  parentId:''
 },
 '0-0':{
  title:'0-0',
  childrenIdList:['0-0-0','0-0-1','0-0-2'],
  parentId:'0'
 },

 ...

 '0-0-2':{
  title:'0-0-2',
  childrenIdList:[],
  parentId:'0-0'
 }
}

四、修改

* 数组形式中 修改跟新增差不多 也是通过递归遍历找到对应的节点 进行修改节点数据，

* 在Map形式中 我们只需要拿到对应节点的id 直接进行修改。

treeMapData['0-0'].title = '0-0修改了'

const treeMapData = {
 root:{
  title:'0',
  childrenIdList:['0-0'],
  parentId:''
 },
 '0-0':{
  title:'0-0修改了',
  childrenIdList:['0-0-0','0-0-1','0-0-2'],
  parentId:'0'
 },

 ...
}

五、删除 

* 在数组对象形式中 我们需要删除一个节点的时候,还是很繁琐，先遍历再删除构造新的数组。

* 在Map形式中我们直接删除对应id的项，如果有父节点，我们可以在对应parentId项中的childrenIdList 然后移除对应的id。

const deleteItem = (id)=>{
 let pId = treeMapData[id].parentId
 if(pId){
  let newList = treeMapData[pId].childrenIdList.filter((item)=>item!=id)
  treeMapData[pId].childrenIdList = newList
 }    

 delete treeMapData[id]
}

deleteItem('0-0-1')

const treeMapData = {
 root:{
  title:'0',
  childrenIdList:['0-0'],
  parentId:''
 },
 '0-0':{
  title:'0-0修改了',
  childrenIdList:['0-0-0'],
  parentId:'0'
 },
 '0-0-0':{
  title:'0-0-0',
  childrenIdList:[],
  parentId:'0-0'
 },
}

总结

数组对象形式改成Map形式 结构清晰可以很轻易对数据进行处理，减少了递归遍历带来的性能消耗