react hooks-理解useImperativeHandle

1、正常情况下 ref 是不能挂在到函数组件上的,因为函数组件没有实例,但是 useImperativeHandle 为我们提供了一个类似实例的东西。
2、useImperativeHandle 的第 2 个参数,是一个函数,函数所返回的对象的内容挂载到父组件的ref.current 上
3、函数组件使用ref需要跟forwardRef搭配使用,不然会报错
4、实例

  1. 首先在父组件中给子组件定义ref
const childRef = useRef(null)
  1. 子组件使用forWardRef定义
const GrandSon = forwardRef((props, ref) => {
  // 你可以在这使用 Hook
  console.log('props====',props);
  const divRef = useRef(null)
  const a = 'vvv'
  const aa=() => {
    console.log('aa');
  }
  useImperativeHandle(ref, () => {
    return {
      aa,
      a,
      divRef
    }
  })
  return 
我是孙子组件
; })

5、总结
通过useImperativeHandle父组件可以拿到函数子组件的暴露特定的操作

你可能感兴趣的:(react hooks-理解useImperativeHandle)