前言
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 才可以实现该需求（如下代码是正确情况下）：
代码语言：javascript复制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 引用的方法来进行调用的情况如下：
img发现直接报错了，只能通过访问 useImperativeHandle 方法返回的内容来进行设置和调用。
