使用函数时组件的时候，ref转发是必须要了解的概念
// 实现 ref 的转发
const FancyInput = React.forwardRef((props, ref) => (
<div>
<input ref={ref} type="text" />
<div>我是自定义的函数式组件</div>
</div>
));
const App = () => {
const ref = useRef();
return (
<div>
<FancyInput ref={ref} />
<button onClick={() => {ref.current.focus()}}>
调用input的focus方法
</button>
</div>
)
}
ReactDOM.render(<App />, root);
如上，简介明了的解释了ref转发的概念。
但是，上面的 ref 透传的方式有什么问题呢
站在
FancyInput组件的角度，FancyInput组件在中间层，父组件App越过了自己，直接获取了自己的子组件input的ref，子组件的DOM直接暴露给了父组件input组件的所有方法都直接暴露给App，App组件可以进行任意的操作，某些情况的不可控我们只是希望
App可以操作的input的focus方法，并不希望它随意操作其他方法
useImperativeHandle 就是来解决这个问题的：
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
// 这里可以加自己的逻辑哦
inputRef.current.focus();
}
}));
return (
<div>
<input ref={inputRef} type="text" />
<div>我是自定义的函数式组件</div>
</div>
)
});
const App = props => {
const fancyInputRef = useRef();
return (
<div>
<FancyInput ref={fancyInputRef} />
<button onClick={() => {fancyInputRef.current.focus()}}>
调用FancyInput组件的 focus方法
</button>
</div>
)
}
ReactDOM.render(<App />, root);
使用 useImperativeHandle 后，FancyInput有自己的 ref，通过 React.forwardRef 将父组件的 ref 透传过来，通过 useImperativeHandle 方法来暴露指定的方法给父组件调用，完美的解决了上面的问题。你还可以自己在 input 的 focus 方法上加一些自己的逻辑或者副作用，是不是有点钩子的意味了。
注意： useImperativeHandle 和 React.forwardRef 必须是配合使用的。
