react子组件传递方法给父组件?

Question

我网上搜了一下关于react父组件获取子组件的方法，一般都是用使用forwardRef和useImperativeHandle这两个hooks。
我不明白之处在于:在子组件抛出的时候，直接把方法一起抛出可以吗？是有什么缺点吗？为什么还专门发明这两个hooks来获取子组件内容？
例如：

import { useState，useEffect } from "react";

export default function Msg(parentsProps){
  const [msg, setMsg] = useState("");
  useEffect(()=>{
    setMsg(msg=>msg+parentsProps);
  },[parentsProps])
  
  let context=(
  <>
    <div>{{msg}}</div>
  </>)
  return [context,setMsg];
}

如果父组件需要setMsg的话，父组件直接解构就好了。

Answer 1

关于题主提到的

如果父组件需要setMsg的话，父组件直接解构就好了。

这种属于设计的问题，可以看官方教程在第一次讲ref的时候就提到的 勿过度使用 Refs

个人认为专门写两个hook抛出对应方法其实利于后续的代码提示

另外一个点我觉得应该是函数组件是没有实例的，这与Class组件不同，所以需要这样去做。参考 将函数组件转换成 class 组件