之前同事问了一个问题，我父组件如何嗲用子组件里面的方法，当时第一想到的就是callback，因为这个也是项目中常用的一种方式。尤其是现在使用hooks，callback的方式比之前类组件的方式要友好了很多。但是紧接着来了一句还有其他的方式么。顿时就蒙蔽了。这时候只想到了之前学vue的时候使用过的一种方式bus.$emit的方式进行对外暴露当前组件中的函数等信息。还有就是ref。但是我再使用react的当中基本没用ref所以就没提这个方案。但是同事问如果用ref解决的话要怎么搞。我后面想了想没有给出具体答案。然后去查找了一下资料。
ref：
1，在类组件中是可以直接使用的，如果ref的对象是个子组件，那么会获取到改子组件的事例，这样就可以直接调用子组件的一些函数。
2，如果ref对象是原生html元素，那么就是直接当成id使用，只用获取到改原生元素的dom节点
3，是不能直接在函数式组件中使用的，因为函数式组件是没有实例的
如果我非要在函数式组价中使用的话，那么需要使用useRef钩子来创建ref对象
useRef：
const FocusInput11 = (props) =>{
const refContainer = useRef();
React.useEffect(() => {
refContainer.current.focus();
});
return <input type="text" ref={refContainer} />;
}
这个只是在组件内使用，但是如果我要是给子组件是函数式组件传递ref的时候那么就会有问题，这个时候就需要使用forwardRef来进行ref分发，
forwardRef：
const FocusInput = forwardRef((props, ref) => <input type="text" ref={ref} />);
<FocusInput ref={this.ref} />
这样的话，就可以通过ref调用函数式子组件当中的方法了。
参考链接 https://juejin.cn/post/6844903982725349390