在 React 中，forwardRef 和 useImperativeHandle 是两个高级 API，用于处理组件之间的引用传递和方法暴露。本文将详细介绍这两个方法的使用场景、工作原理以及如何在实际项目中应用它们。
计算
安全
数据库
网络和加速
企业服务
forwardRef？forwardRef 是 React 提供的一个高阶函数，用于将 ref 从父组件传递到子组件。通常情况下，React 组件不会自动将 ref 传递给子组件，因为 ref 是一个特殊的属性，它不会像普通的 props 那样自动传递。forwardRef 的作用就是解决这个问题。
forwardRef 的基本用法forwardRef 接受一个渲染函数作为参数，这个渲染函数接收两个参数：props 和 ref。通过 forwardRef，我们可以将 ref 传递给子组件的某个 DOM 元素或组件实例。
import React, { forwardRef } from 'react';
const MyComponent = forwardRef((props, ref) => {
return <div ref={ref}>Hello, World!</div>;
});
export default MyComponent;
在上面的例子中，MyComponent 组件通过 forwardRef 将 ref 传递给了内部的 div 元素。这样，父组件就可以通过 ref 访问到这个 div 元素。
forwardRef 的使用场景forwardRef 的主要使用场景包括：
forwardRef 将 ref 传递给子组件。ref 传递给库中的某个组件或 DOM 元素，这时可以使用 forwardRef。ref 传递给被包裹的组件，可以使用 forwardRef。useImperativeHandle？useImperativeHandle 是 React 提供的一个 Hook，用于自定义暴露给父组件的实例值。通常情况下，父组件通过 ref 访问子组件的实例时，只能访问到子组件的 DOM 元素或组件实例。useImperativeHandle 允许子组件自定义暴露给父组件的实例值，从而控制父组件可以访问哪些方法和属性。
useImperativeHandle 的基本用法useImperativeHandle 接收三个参数：
ref：父组件传递过来的 ref。createHandle：一个函数，返回一个对象，这个对象将作为子组件暴露给父组件的实例值。deps：依赖数组，当依赖发生变化时，createHandle 函数会重新执行。import React, { useRef, useImperativeHandle, forwardRef } from 'react';
const MyComponent = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
},
getValue: () => {
return inputRef.current.value;
}
}));
return <input ref={inputRef} type="text" />;
});
export default MyComponent;
在上面的例子中，MyComponent 组件通过 useImperativeHandle 暴露了两个方法给父组件：focus 和 getValue。父组件可以通过 ref 调用这两个方法。
useImperativeHandle 的使用场景useImperativeHandle 的主要使用场景包括：
useImperativeHandle。useImperativeHandle，子组件可以控制父组件可以访问哪些方法和属性，从而避免父组件直接操作子组件的内部状态或 DOM 元素。useImperativeHandle 将这些逻辑封装成方法。forwardRef 和 useImperativeHandle 的结合使用forwardRef 和 useImperativeHandle 通常结合使用，以实现更复杂的组件交互。通过 forwardRef，父组件可以将 ref 传递给子组件，而通过 useImperativeHandle，子组件可以自定义暴露给父组件的实例值。
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
const MyComponent = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
},
getValue: () => {
return inputRef.current.value;
}
}));
return <input ref={inputRef} type="text" />;
});
const ParentComponent = () => {
const myComponentRef = useRef();
const handleFocus = () => {
myComponentRef.current.focus();
};
const handleGetValue = () => {
const value = myComponentRef.current.getValue();
console.log('Input value:', value);
};
return (
<div>
<MyComponent ref={myComponentRef} />
<button onClick={handleFocus}>Focus Input</button>
<button onClick={handleGetValue}>Get Value</button>
</div>
);
};
export default ParentComponent;
在上面的例子中，ParentComponent 通过 ref 访问 MyComponent 的实例，并调用 focus 和 getValue 方法。MyComponent 通过 useImperativeHandle 暴露了这两个方法。
forwardRef 和 useImperativeHandle，父组件可以更灵活地与子组件进行交互，而不仅仅局限于访问 DOM 元素。useImperativeHandle，子组件可以将需要暴露的方法集中在一个地方，从而使代码结构更加清晰。在实际项目中，forwardRef 和 useImperativeHandle 可以用于多种场景，例如表单验证、动画控制、第三方库封装等。
在表单验证场景中，父组件可能需要访问子组件的输入值或触发子组件的验证逻辑。通过 forwardRef 和 useImperativeHandle，子组件可以暴露 getValue 和 validate 方法给父组件。
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
const InputField = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
getValue: () => {
return inputRef.current.value;
},
validate: () => {
const value = inputRef.current.value;
if (!value) {
return 'This field is required';
}
return null;
}
}));
return <input ref={inputRef} type="text" />;
});
const Form = () => {
const inputRef = useRef();
const handleSubmit = () => {
const error = inputRef.current.validate();
if (error) {
console.error(error);
} else {
const value = inputRef.current.getValue();
console.log('Form submitted with value:', value);
}
};
return (
<div>
<InputField ref={inputRef} />
<button onClick={handleSubmit}>Submit</button>
</div>
);
};
export default Form;
在上面的例子中，InputField 组件通过 useImperativeHandle 暴露了 getValue 和 validate 方法，父组件 Form 可以通过 ref 调用这些方法进行表单验证。
在动画控制场景中，父组件可能需要控制子组件的动画播放或暂停。通过 forwardRef 和 useImperativeHandle，子组件可以暴露 play 和 pause 方法给父组件。
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
const Animation = forwardRef((props, ref) => {
const animationRef = useRef();
useImperativeHandle(ref, () => ({
play: () => {
animationRef.current.play();
},
pause: () => {
animationRef.current.pause();
}
}));
return (
<div ref={animationRef} style={{ width: '100px', height: '100px', backgroundColor: 'red' }}>
Animation
</div>
);
});
const AnimationController = () => {
const animationRef = useRef();
const handlePlay = () => {
animationRef.current.play();
};
const handlePause = () => {
animationRef.current.pause();
};
return (
<div>
<Animation ref={animationRef} />
<button onClick={handlePlay}>Play</button>
<button onClick={handlePause}>Pause</button>
</div>
);
};
export default AnimationController;
在上面的例子中，Animation 组件通过 useImperativeHandle 暴露了 play 和 pause 方法，父组件 AnimationController 可以通过 ref 调用这些方法控制动画的播放和暂停。
在封装第三方库时，可能需要将 ref 传递给库中的某个组件或 DOM 元素。通过 forwardRef 和 useImperativeHandle，可以更好地控制 ref 的传递和暴露。
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import SomeThirdPartyLibrary from 'some-third-party-library';
const WrappedThirdPartyLibrary = forwardRef((props, ref) => {
const libraryRef = useRef();
useImperativeHandle(ref, () => ({
doSomething: () => {
libraryRef.current.doSomething();
}
}));
return <SomeThirdPartyLibrary ref={libraryRef} {...props} />;
});
const App = () => {
const libraryRef = useRef();
const handleDoSomething = () => {
libraryRef.current.doSomething();
};
return (
<div>
<WrappedThirdPartyLibrary ref={libraryRef} />
<button onClick={handleDoSomething}>Do Something</button>
</div>
);
};
export default App;
在上面的例子中，WrappedThirdPartyLibrary 组件通过 forwardRef 将 ref 传递给第三方库 SomeThirdPartyLibrary，并通过 useImperativeHandle 暴露了 doSomething 方法给父组件 App。
forwardRef 和 useImperativeHandle 是 React 中用于处理组件之间引用传递和方法暴露的高级 API。通过 forwardRef，父组件可以将 ref 传递给子组件，而通过 useImperativeHandle，子组件可以自定义暴露给父组件的实例值。这两个方法结合使用，可以实现更灵活的组件交互、更好的封装性和更清晰的代码结构。
在实际项目中，forwardRef 和 useImperativeHandle 可以用于表单验证、动画控制、第三方库封装等多种场景。掌握这两个方法的使用，可以帮助开发者更好地处理复杂的组件交互和逻辑封装。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7211805251216670777
