前言
useImperativeHandle 是 React 中的一个 Hooks，它通常与 forwardRef 一起使用，用于控制在函数组件内部暴露给父组件的 ref 对象的内容和方法。这个 Hook 允许您更精细地控制子组件的 API，使其更易于使用。
useImperativeHandle Hook 概述
- useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值
暴露给父组件的实例值 这个是什么意思呢大致意思就是说，你想把当前组件的什么内容给父组件，可以实现一个权限的效果：
import React, {useRef, forwardRef} from 'react'; function Home(props, appRef) { return ( <div> <p>Home</p> <input ref={appRef} type="text" placeholder={'请输入内容'}/> </div> ) } const ForwardHome = forwardRef(Home); function App() { const appRef = useRef(); function btnClick() { appRef.current.focus(); appRef.current.value = 'yangbuyiya'; } return ( <div> <ForwardHome ref={appRef}/> <button onClick={() => { btnClick() }}>获取 </button> </div> ) } export default App;
如上代码呢，就是在 App 组件当中调用了 ForwardHome 然后获取了 ForwardHome 组件当中的 input，然后在让 input 聚焦焦点，然后又设置了 input 的 value 值。
如果这个时候，你只想让他进行聚焦，不想让他设置值，这个时候就需要借助 useImperativeHandle 才可以实现该需求（如下代码是正确情况下）：
import React, {useRef, forwardRef, useImperativeHandle} from 'react'; function Home(props, appRef) { const inputRef = useRef(); useImperativeHandle(appRef, () => { return { myFocus: () => { inputRef.current.focus(); } } }); return ( <div> <p>Home</p> <input ref={inputRef} type="text" placeholder={'请输入内容'}/> </div> ) } const ForwardHome = forwardRef(Home); function App() { const appRef = useRef(); function btnClick() { appRef.current.myFocus(); } return ( <div> <ForwardHome ref={appRef}/> <button onClick={() => { btnClick() }}>获取 </button> </div> ) } export default App;
不正确的情况就是还是使用 ref 引用的方法来进行调用的情况如下：
发现直接报错了，只能通过访问 useImperativeHandle 方法返回的内容来进行设置和调用。
