圈选组件优化

圈选组件时一个多层嵌套的 Form 组件，主要功能就是通过选择标签去圈选用户，可以选择用户属性、标签、操作符和不同类型标签的操作框，还有更深的一层维度选择，相互之间都可以联动。

这是我来搜车做的第一件事，那时候我还没使用过 React，然后他们美其名曰重构完这个你就精通 React 了。

开始一般就不说了，就勉强的实现了功能。

因为深层次，所以对于每个向下传递的 props 都需要进行不断的测试，避免多次重复渲染，其中使用的 Form 自己的 shouldUpdate，useMemo，useCallback，来减少值变动导致的冗余渲染。

在最深层次的 props 传递，则是使用了 useContext 传值。

另外在新建副本的时候，会遇到用户圈选了很多同样的标签的情况，会重复的请求相同的接口，这里我统一在最上层定义了一个 cache 对象，保存已请求过的数据。另外，在新建分群的时候，考虑到可能新建完标签过来，使用缓存会导致没有最新的数据，这里就不使用缓存。

在新建的时候会遇到频繁更新 DOM 的情况, 使用的 useLayouEffct Hooks。

后来在学习中也发现了类似 React Query、useSWR 的库也有这样的缓存思想。