之前同事問了一個問題，我父組件如何調用子組件里面的方法，當時第一想到的就是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調用函數式子組件當中的方法了。
如果子組件不想全部暴露方法的話，那么可以使用useImperativeHandle來自定義暴露給父組件的實例值，這個通常和forwardRef一起使用
參考鏈接 https://juejin.cn/post/6844903982725349390