前言
侧边树形目录能够易与用户操作，大大改善用户使用体验。在接口管理平台中同样有该需求，发现网上与此相关的资源不是很丰富，记录一下实现过程与遇到的问题。
注：本文的实现并非纯原生，树形目录的基底使用了react-arborist库，只是因为官网文档并不完善，没有详细写出如何将组件状态从受控转为非受控，故以该文记录。
演示效果
主要功能
增
删
改
其他功能
请求后端接口使用防抖
存储使用的数据结构
这里的想法来源于最近看的React fiber中使用的双缓存
刷新/关闭页面之前发送请求
由于使用了防抖优化，在页面关闭或刷新时，如果没有到达触发防抖的时间窗口而目录又进行了更改，通常情况下放在防抖中的后端请求将不会被发送。显然，这种情况是必须避免的。
一开始有想过在组件卸载时进行处理，由于React的 useEffect的执行需要保证所有组件 useEffect的 销毁函数必须都执行完后才能执行任意一个组件的 useEffect的 回调函数，理论上
最后选择使用的解决方法是 fetch 的 keep-alive 属性。在一些有数据埋点需求的项目中似乎也会使用到。使用方法很简单，在调用update的API时加上 keepalive: true 即可。因为我本身项目就是使用的fetch发送请求所以不需要过多处理，如果是用Ajax据说异步可能会被cancel，而同步又被谷歌禁止了，所以一般都采用 Beacon API 或其底层也就是fetch来完成该需求。
实际上仍然存在部分浏览器可能会出问题，参考文章
所以能和后端协商心跳包也许是更好的方案。
离线缓存
在进行update请求前对当前网络状况进行判断，若网络状况差则将内容存入indexDB。
当然也要加上进入页面时判断是否存在内容，存在则发送update请求并在回调成功后将其清除。