函数式组件 ref 的解决方案

对于 React 中需要强制修改子组件的情况，React 提供了 Refs 这种解决办法，使得我们可以操作底层 DOM 元素或者自定的 class 组件实例。除此之外，文档（v17.0.1）对函数式组件另有描述:

不能在函数式组件上使用ref属性，因为他们没有实例。

在函数式组件和 Hooks 大面积普及的现在，这个特性没有完全对标 class 组件，令人难以置信。经过一阵探索，发现确实是有对应的解决方案的：

useImperativeHandle

结合 React.forward ， useImperativeHandle 文档 应该就能明白是如何使用的。

简而言之就是可以在函数式组件上使用 ref，通过useImperativeHandle这个hook可以指定暴露给父组件的值和函数。

案例：

修改子组件Counter中的值， 达到重置count的目的：

export default function App() {
  return (
    <div>
      <button>reset</butt