[react] 请说说什么是useImperativeHandle？

// useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
// useImperativeHandle 应当与 forwardRef 一起使用：

import React, { useImperativeHandle, forwardRef } from 'react'
import { useEffect } from 'react';
import { useRef } from 'react';
function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return (<input ref={inputRef} />);
}
FancyInput = forwardRef(FancyInput);

const useImperativeHandleHook = () => {
  const ref = useRef()

  useEffect(() => {
    console.log(ref)
    ref.current.focus()
  })

  return (
    <FancyInput ref={ref}/>
  )
}

export default useImperativeHandleHook

 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论











主目录

与歌谣一起通关前端面试题