react hooks useImperativeHandle

在vue中组件上挂载ref可以拿到组件中的所有值和方法；
在react中可以传递一个ref，子组件通过useImperativeHandle处理这个ref添加一些函数通过闭包访问外部值，这样外部就可以通过这个useRef声明的变量.current访问子组件中的useImperativeHandle添加的方法，然后通过方法通过闭包访问子组件所有的值和方法，说的繁琐，see code：

import React, { useState, useRef, useImperativeHandle } from "react";
function App() {
  const toolbarRef = useRef(null);
  return (
    <div>
      <Toolbar cRef={toolbarRef} />
      <button
        onClick={() => {
          toolbarRef.current.sayHi();
          console.log(toolbarRef.current);
        }}
      >
        click
      </button>
    </div>
  );
}
function Toolbar(props) {
  const [name, setName] = useState("lisa");
  useImperativeHandle(props.cRef, () => ({
    sayHi: () => {
      console.log("hi" + name);
    },
  }));
  function sayHello() {
    console.log("hello");
  }
  return <div>-</div>;
}
export default App;

https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle