阅读 1322

前端工程师彻底征服树结构组件的秘籍

前言

树形组件的需求,很多人遇到都觉得头疼、逻辑复杂,除了展示之外,还要有增删该查的逻辑。一般树形组件具有多个层级,如果当前层级有下一个层级,会有像children、list等属性,数据结构一般就是

const tree = [
    {
        name: 'a',
        id: 1,
    },
    {
        name: 'b',
        id: 2,
        children: [
            {
                name: 'c',
                id: 3
            }
        ]
    },
]
复制代码

界面大概就是这种:

这里先给出下文数据源:

const data = [{"name":"广东","id":1,"children":[{"name":"深圳","id":2,"children":[{"name":"南山区","id":3},{"name":"福田区","id":4},{"name":"宝安区","id":5}]},{"name":"广州","id":6,"children":[{"name":"天河区","id":7},{"name":"番禺区","id":8},{"name":"海珠区","id":9}]}]}]
复制代码

递归渲染与记录节点信息

递归就是最常规的方式了,以antd的tree组件为例,大家都会这样做:

// 放在react的class组件里面
renderTree = (data = []) => {
  return data.map(item => (
    <TreeNode title={item.name}>
      {renderTree(item.children)}
    </TreeNode>
  ))
}

  render() {
    return (
      <React.Fragment>
        <Tree defaultExpandAll={true} selectable={false}>
          <TreeNode
            title="root"
          >
            {this.renderTree(this.state.data)}
          </TreeNode>
        </Tree>
      </React.Fragment>
    );
  }
复制代码

先把名字作为节点title,然后如果有子节点,就用同样的方法渲染子节点。

组件已经好了,如果我们要点击,我们怎么知道哪个层级的哪个节点被点了呢?是不是会写一个搜索算法,传入当前节点id,然后回溯去记录路径展示出来?这虽然可以做到,但显然是不优雅的,我们只需要牺牲空间换时间的方法就可以大大优化这个过程,即是在遍历的过程中把节点信息带到下一个递归函数里面去

renderTree = (data = [], info = { path: '', id: '' }) => {
    return data.map(item => (
      <TreeNode title={
        <Button onClick={() => console.log(`${info.path}/${item.name}`)}>{item.name}</Button>
      }>
        {this.renderTree(item.children, { path: `${info.path}/${item.name}`, id: `${info.id}/${item.id}` })}
      </TreeNode>
    ));
}
复制代码

现在,我们点击哪一个,就打印当前节点路径了

增删改查操作

如果遇到了增删改查,基于前面的条件,我们记录了要用到的信息,所以可以借助这些信息进行增删改查。

点击查看一般的增删改查规则
  • 增:需要知道父节点id(父.push)
  • 删:需要知道父节点id和当前节点id(父.splice(子))
  • 改:需要知道父节点id和当前节点id(父.子 = newVal)
  • 查:需要知道父节点id((父) => 父.所有子)

后台一般是id,对前端一般是key

我们删掉刚刚的按钮,把id去掉(因为我们现在仅仅用前端测试,只用key即可,如果需要传到后台,则需要遵守上面的规则传id),然后用同样的方法记录每一层的key

renderTree = (data = [], info = { path: '', key: '' }) => {
    return data.map((item, index) => (
      <TreeNode title={
        <React.Fragment>
          {item.name}
          <Button onClick={() => { console.log(`${info.key}.${index}`.slice(1)) }}>新增节点</Button>
        </React.Fragment>
      }>
        {this.renderTree(item.children, { path: `${info.path}/${item.name}`, key: `${info.key}.${index}` })}
      </TreeNode>
    ));
}
复制代码

此时,我们点击天河区,打印出来的是0.1.0,也就是我们所点的是data[0].children[1].children[0],要给data[0].children[1].children[0]的children push一个新元素。所以我们还要写一个类似lodash.get的方法:

function get(target, keysStr) {
    const keys = keysStr.split('.')
    let res = target[keys.shift()]
    while (res && keys.length) {
        res = res.children[keys.shift()]
    }
    return res
}
复制代码

Button里面的onclik方法改一下:

  <Button onClick={() => {
    const currentKeyPath = `${info.key}.${index}`.slice(1)
    this.setState(({ data }) => {
      const current = get(data, currentKeyPath) // 拿到当前节点
      // 给children属性追加一个新节点
      ;(current.children || (current.children = [])).push({ name: '新增的节点' })
      return data
    })
  }}>新增节点</Button>
复制代码

新增了一个奇奇怪怪的节点,恨不得马上改名删除了,删除需要知道父节点key和当前节点key,我们还是继续在title那里加一个按钮:

  <Button onClick={() => {
    const currentKeyPath = `${info.key}`.slice(1) // 父节点key路径
    this.setState(({ data }) => {
      const current = get(data, currentKeyPath)
      current.children.splice(index, 1) // 删除当前节点第index个元素
      return data
    })
  }}>删除节点</Button>
复制代码

我们新增的了节点后,首先就是把系统默认名字改掉,改和删都是差不多的,但是改需要维护一个输入框来填写新节点名字。常规的方法是另外控制一个Modal组件,这个Modal里面有一个Input。点击确定即可修改。为了更好的体验,我通常是直接行内修改。先写一个Edit组件,这个组件正常情况下是一个按钮,点击了变成一个Input,失去焦点的时候修改完成

function Edit(props) {
  const [value, setValue] = React.useState(props.value)
  const [isEdit, setIsEdit] = React.useState(false)
  const handleChange = React.useCallback((e) => {
    setValue(e.target.value)
  }, [setValue])
  const handleBlur = React.useCallback((e) => {
    const current = get(props.target, props.currentKeyPath)
    current.name = value // 给当前节点的name赋值
    props.setState(current) // 上层的setstate方法
    setIsEdit(false)
  }, [setValue, value])
  return (
    isEdit ?
    <Input
      autoFocus={true}
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
    /> :
    <Button onClick={() => setIsEdit(true)}>修改节点</Button>
  )
}
复制代码

有了Edit组件,我们在title的元素里面加上Edit组件:

  <Edit
    target={this.state.data}
    value={item.value}
    currentKeyPath={`${info.key}.${index}`.slice(1)}
    setState={(state) => this.setState(state)}
  />
复制代码
点击查看以上全部代码
import { Input, Tree, Button } from 'antd';
import * as React from 'react';

const { TreeNode } = Tree;

function get(target, keysStr) {
  const keys = keysStr.split('.')
  let res = target[keys.shift()]
  while (res && keys.length) {
    res = res.children[keys.shift()]
  }
  return res
}

function Edit(props) {
  const [value, setValue] = React.useState(props.value)
  const [isEdit, setIsEdit] = React.useState(false)
  const handleChange = React.useCallback((e) => {
    setValue(e.target.value)
  }, [setValue])
  const handleBlur = React.useCallback((e) => {
    const currnet = get(props.target, props.currentKeyPath)
    console.log(props.target,  currnet, props.currentKeyPath)
    currnet.name = value
    props.setState(currnet)
    setIsEdit(false)
  }, [setValue, value])
  return (
    isEdit ?
    <Input
      autoFocus={true}
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
    /> :
    <Button onClick={() => setIsEdit(true)}>修改节点</Button>
  )
}

const data = [
  { name: '广东', id: 1, children: [
    { name: '深圳', id: 2, children: [
      { name: '南山区', id: 3 },
      { name: '福田区', id: 4 },
      { name: '宝安区', id: 5 },
    ] },
    {
      name: '广州',
      id: 6,
      children: [
        { name: '天河区', id: 7 },
        { name: '番禺区', id: 8 },
        { name: '海珠区', id: 9 },
      ]
    }
  ] }
];

export default class Test extends React.Component {
  state = {
    data,
  };
  render() {
    return (
      <React.Fragment>
        <Tree defaultExpandAll={true} selectable={false}>
          <TreeNode
            title="root"
          >
            {this.renderTree(this.state.data)}
          </TreeNode>
        </Tree>
      </React.Fragment>
    );
  }

 renderTree = (data = [], info = { path: '', key: '' }) => {
    return data.map((item, index) => (
      <TreeNode title={
        <React.Fragment>
          {item.name}
          <Button onClick={() => {
            const currentKeyPath = `${info.key}.${index}`.slice(1)
            this.setState(({ data }) => {
              const current = get(data, currentKeyPath)
              ;(current.children || (current.children = [])).push({ name: '新增的节点' })
              return data
            })
          }}>新增节点</Button>
          <Button onClick={() => {
            const currentKeyPath = `${info.key}`.slice(1)
            this.setState(({ data }) => {
              const current = get(data, currentKeyPath)
              current.children.splice(index, 1)
              return data
            })
          }}>删除节点</Button>
          <Edit
            target={this.state.data}
            value={item.value}
            currentKeyPath={`${info.key}.${index}`.slice(1)}
            setState={(state) => this.setState(state)}
          />
        </React.Fragment>
      }>
        {this.renderTree(item.children, { path: `${info.path}/${item.name}`, key: `${info.key}.${index}` })}
      </TreeNode>
    ));
  }
}
复制代码

搜索

不一定所有的场景都是空间换时间,只要不是频繁操作树结构的,只需要少量的搜索即可。树搜索就两种,广度优先搜索(bfs)、深度优先搜索(dfs)

栈和队列

栈的规律是,先进后出;队列的规律是,先进先出,在数组上的表现就是:

  • 栈:arr.push(item);arr.pop()
  • 队列:arr.push(item);arr.shift()

bfs是基于队列实现,dfs是基于栈(递归也算是栈的一种体现)实现

对于文章最前面那个结构

数据源
const data = [
  { name: '广东', id: 1, children: [
    { name: '深圳', id: 2, children: [
      { name: '南山区', id: 3 },
      { name: '福田区', id: 4 },
      { name: '宝安区', id: 5 },
    ] },
    {
      name: '广州',
      id: 6,
      children: [
        { name: '天河区', id: 7 },
        { name: '番禺区', id: 8 },
        { name: '海珠区', id: 9 },
      ]
    }
  ] }
];
复制代码

使用bfs遍历的顺序(下文假设全是从左到右遍历顺序)是:广东、深圳、广州、南山区、福田区、宝安区、天河区、番禺区、海珠区;使用dfs的顺序是:广东、深圳、南山区、福田区、宝安区、广州、天河区、番禺区、海珠区

bfs

以搜索"福田区"为例

function bfs(target, name) {
  const quene = [...target]
  do {
    const current = quene.shift() // 取出队列第一个元素
    current.isTravel = true // 标记为遍历过
    if (current.children) {
      quene.push(...current.children) // 子元追加到队列后面
    }
    if (current.name === name) {
      return current
    }
  } while(quene.length)
  return undefined
}
复制代码

再把renderTree方法里面的操作取掉,加上遍历过标红逻辑,再加上bfs的逻辑:

componentDidMount() {
  bfs(this.state.data, '福田区')
  this.forceUpdate()
}

renderTree = (data = [], info = { path: '', key: '' }) => {
    return data.map((item, index) => (
      <TreeNode title={
        <React.Fragment>
          <span style={{ color: item.isTravel ? '#f00' : '#000' }}>{item.name}</span>
        </React.Fragment>
      }>
        {this.renderTree(item.children, { path: `${info.path}/${item.name}`, key: `${info.key}.${index}` })}
      </TreeNode>
    ));
  }
复制代码

遍历过程是:

这种情况可以满足的场景:父节点全部disabled,只能对和当前等级的节点进行操作

dfs

以搜索"福田区"为例。基于前面的bfs,可以很容易过渡到基于循环实现的dfs

function dfs(target, name) {
  const quene = [...target]
  do {
    const current = quene.pop() // 改成pop,取最后一个,后入先出
    current.isTravel = true
    if (current.children) {
      quene.push(...[...current.children].reverse()) // 保证从左到右遍历
    }
    if (current.name === name) {
      return current
    }
  } while(quene.length)
  return undefined
}

// 基于递归实现
function dfs(target = [], name) {
  return target.find(x => {
    x.isTravel = true
    const isFind = x.name === name
    return isFind ? x : dfs(x.children, name)
  })
}
复制代码

遍历过程是:

这种方案满足的场景是:只能操作该节点的归属路径,比如只能操作广东和深圳两个节点其他节点disabled

自上而下dfs和自下而上dfs

先提一下,二叉树前中后序遍历,在代码上的差别就在于处理语句放在哪个位置:

function tree(node) {
    if (node) {
        console.log('前序遍历')
        tree(node.left)
        console.log('中序遍历')
        tree(node.right)
        console.log('后序遍历')
    }
}
复制代码

对于dfs,也是有同样的道理,我们先把上面的改一下。以搜索"福田区"为例

function dfs(target = [], name) {
  return target.find(x => {
    x.isTravel = true
    const isFind = x.name === name
    console.log('自上而下', x)
    const ret = isFind ? x : dfs(x.children, name)
    return ret
  })
}
// => 广东、深圳、南山区、福田区

// 自下而上
function dfs(target = [], name) {
  return target.find(x => {
    x.isTravel = true
    const isFind = x.name === name
    const ret = isFind ? x : dfs(x.children, name)
    console.log('自下而上', x)
    return ret
  })
}
// => 南山区、福田区、深圳、广东
复制代码

大部分场景不需要讲究哪种dfs遍历方式。如果这个数据结构有很多省,我们想快速找到广东省的时候,使用自上而下更容易;如果这个数据结构市下面有很多区,想快速找到属于哪个市则使用自下而上更容易

总结

  • 遇到树结构组件,我们先使用递归渲染
  • 递归遍历的同时,记录下当前节点信息到节点里面,把当前节点信息带到下一个递归函数的参数里面去,供后续的curd操作使用
  • 如果递归渲染的时候,不提前记录节点信息到节点里面,某些后续的特殊操作就需要使用bfs或者dfs
  • 最后在遍历同时记录信息不记录信息后面使用dfs、bfs之间权衡哪个方案更优
  • 如果使用dfs,还可以考虑一下自上而下dfs还是自下而上dfs哪个更优

只要我们按照这样的套路,如果再来树结构相关需求,那么,来一个秒一个,毫无压力

关注公众号《不一样的前端》,以不一样的视角学习前端,快速成长,一起把玩最新的技术、探索各种黑科技

关注下面的标签,发现更多相似文章
评论