React.cloneElement与ref中的useImperativeHandle

React.cloneElement克隆子组件，展示和关闭弹窗的按钮可以放在子组件，减少耦合 可以参考文章juejin.cn/post/721328… ref中的useImperativeHandle 用于写子组件的时候使用，常用方法

useImperativeHandle(ref, () => {
    return {
        show: (data: any) => {
          setVisible(true)
          setData({ ...data })
        },
        hide: () => {
          setVisible(false)
        },
      }
})

也是关闭和显示弹窗，但是关闭显示的暴露给了父组件， 父组件调用的时候可以传参供子组件使用，比如某个方法，数据 父组件声明：

const subRef = useRef<any>(null)

父组件调用：

subRef?.current?.hide()

父组件调用并且传参给子组件：

subRef?.current?.show({data1, function1})

两者有什么区别呢？一个区别就是 React.cloneElement展示和隐藏逻辑写在组件内部，而ref中的useImperativeHandle则通过useRef把方法的执行、对象值的更改写在外部，那ref中的useImperativeHandle耦合更强了，那是不是就没有用处了，实际上在联系紧密的父子组件仍可以使用。同时如果参数或者方法写在父组件逻辑更好，那么ref中的useImperativeHandle这种方法反而是最优选择。嘎嘎就这样了