实现的思路：
1、设计组件时，实现的思路是由数据驱动，数据结构是嵌套结构。
2、面板用数组selectedArr进行渲染，面板最多有三层，第一层为提供的数据源的第一层数据，第二层第三层为点击节点对应的子节点的数据。
3、每次点击时将点击的节点信息放入selectedArr数组合适的位置并触发更新。
遇到的问题：
1、阻断了数据流
设计时想着数据驱动，用数组渲染面板，那么数组第一位就应该是传入的数据源，然后想着用useMemo，当数组发生变化的时候执行渲染，然而在调试的时候，不会触发执行渲染，然后就为了使数组变化时，强制渲染，无奈把数组设计成组件内部的状态，整个组件就变成了非受控的组件，同时也就造成了将props的数据复制到了state，阻断了数据流，
2、点击数组时，不停的拷贝数组
3、在数据map返回ul列表时，没有为ul列表指定key
4、设计数据源的时候，本着极简的原则省略了value，只保留了label，会造成label改变时
5、在map循环渲染li时，为每个li绑定事件并为绑定事件传该li对应的信息，传参使用了bind方法
遗留的问题：
1、react官网中指出了，绑定事件的方法 ：
1、bind方法
2、箭头函数
3、在构造器中绑定
4、使用class fields语法
其中推荐方法3、4。 当回调函数作为prop传入子组件时，组件可能会进行额外的重新渲染，使用方法34可避免这类性能问题。
react也指出了为事件处理函数传参的方法
1、通过箭头函数
2、通过bind传参
两者的区别： 通过箭头函数，事件对象必须显示得传递，bind方式可以隐式传递。
一直没有理解需要传参的时候如何绑定事件处理方法
2、review代码的时候指出了数据结构设计成平级的更容易在代码中体现出数据驱动，但是用户在设计这种数据结构时显然没有嵌套数据结构方便，那么如果数据结构是嵌套的，如何通过不转换数据结构更好得实现数据驱动的效果呢？