Hooks-useImperativeHandle+forwardRef

使用 ref 时，可用useImperativeHandle 自定义暴露给父组件的实例值，这比命令式使用 ref 更好。

语法

useImperativeHandle(ref, createHandle, [deps]);

1. ref：需要被赋值的 ref 对象。
2. createHandle：createHandle 函数的返回值作为 ref.current 的值。
3. [deps]：依赖数组，依赖发生变化会重新执行 createHandle 函数。

因为函数式组件没有实例，所以无法使用ref获取到子组件实例。
这时候可以通过React.forwardRef包裹子组件，将ref传递下去，子组件通过第二个参数可接收到ref。

父组件：

import React, { useEffect, useState, useRef } from 'react';

const Parent = () => {
  const whiteLinkRef = useRef(null);

  const handleRemoveLink = () => {
    console.log('whiteLinkRef.current: ', whiteLinkRef.current);
    // 调用子组件暴露的方法
    whiteLinkRef.current.handleSetChecked(false);
    whiteLinkRef.current.handleSetHref('');
  };

  return <WhiteLink ref={whiteLinkRef} visible={showWhiteLink} />;
};
export default Parent;

子组件：
通过第二个参数接收ref

import React, { useEffect, useState, useImperativeHandle } from 'react';

const Child = (props, ref) => {
  // 自定义暴露组件内部的方法
  // 需要配合forwardRef使用
  useImperativeHandle(ref, () => ({
    handleSetChecked,
    handleSetHref,
  }));

  return <div>...</div>;
};

export default React.forwardRef(Child);