使用React hook时父组件如何调用子组件中的方法

在一个项目中，经常会遇到在父组件中调动子组件中方法的情况。那么，当使用React hooks的时候，如何在父组件调用子组件方法呢？

React hook提供一个useImperativeHandle，它可以在使用 ref 时自定义暴露给父组件的实例值，它一般和forwardRef一起使用。

官方文档说明：https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle

举个例子

export const Example = forwardRef(function Example(props, ref) {
  useImperativeHandle(ref, () => ({
    foo() {
      console.log("foo");
    },
    bar() {
      console.log("bar");
    }
  }));
  return <div>hello world</div>;
});

在父组件就可以直接使用了

const TodoList = () => {
  const exampleRef = useRef();

  useEffect(() => {
    exampleRef.current.foo()
    exampleRef.current.bar()
  }, [])

  return (
    <>
      <Example ref={exampleRef} />
    </>
  );
};

虽然能达到最终的目的，React官方也不是很建议这种做法，所以，酌情使用吧。