Antd 中Modal嵌套Transfer state 闪烁问题

1.背景介绍

今天在用Antd的时候遇到一个问题。
界面设计是这样的，在Modal里面嵌套了一个Transfer穿梭，咱们知道左边的数据就是dataSource，右边的数据就是targetKeys。问题出现在写onChange的时候，每次进行targetKeys的操作整个Modal都会闪烁一下。

2.问题分析

其实小白如我也能想到，问题应该出现在了State更新后触发了整个页面的重新渲染。
然后我在某度上找到了某个大佬的文章，所要把visiable对应的state集成到Modal的组件内部。感觉疑惑，试了一下并不是这个原因。
那很明显了，问题就是出在数据的state中，我的数据state定义在整个Modal组件外面，当State刷新时也触发了Modal的刷新，导致Modal闪烁一下。
所以我的解决方案是：
①把数据的State放到我们的Modal组件内部。
②把数据操作接口暴露出来给父组件调用。

3.解决步骤

①把数据的State放到我们的Modal组件内部
这没啥问题，大家都懂，就是把useState放到封装组件的内部就是了。

②把数据操作接口暴露出来给父组件调用
这步我想和antd设计的一样，通过ref来调用子组件的方法。
参考了日月之行大佬的文章，需要用到useImperativeHandle这个hook，
日月之行大佬：

https://juejin.cn/post/6854573209644171277

userImpreativeHandle这个hook的介绍 - _Boboy大佬

https://blog.csdn.net/weixin_43720095/article/details/104967478

总结起来两个要点：
1.构造函数需要用React.forwardRef这个方法，他的第二个参数是ref。
2.在useImperativeHandle里面写需要暴露的接口函数。

    useImperativeHandle(ref, () => ({
      setTarget : (value) => {
        setInTarget(value)
      },
        getTarget: () => {
          return inTarget
        }
    }

在调用的时候复制ref给我们封装的类。

后记

其实问题解决很简单吧，对于我这种JS基础不扎实的小白来说找资料还是挺麻烦的，回头可能还得系统复习一下JS和React，我是在家加班的llsxily，你可以叫我橘子。