掌握 React 中的 useImperativeHandle（使用 TypeScript）
来源：dev.to
时间：2024-09-09 13:21:58 424浏览 收藏
本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《掌握 React 中的 useImperativeHandle（使用 TypeScript）》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~
使用 typescript 构建 react 应用程序时，开发人员经常遇到需要创建具有高级功能的自定义、可重用组件的场景。本文将探讨两个强大的概念：用于对引用管理进行细粒度控制的 useimperativehandle 挂钩，以及创建表单验证和模态组件等自定义组件。
我们将深入探讨：
- useimperativehandle 钩子：它的作用、何时使用它以及它如何允许您自定义父组件可以访问的 ref 值。
- 创建表单验证组件：使用 typescript 构建可重用组件进行表单验证的实际示例。
- 实现模态组件：另一个示例展示如何使用 typescript 创建交互式且可重用的模态。
这些示例将帮助初学者了解如何利用 typescript 构建交互式和可重用的组件，同时探索引用管理等高级概念。读完本文后，您将为在 react 应用程序中创建强大的自定义组件奠定坚实的基础。
什么是 useimperativehandle？
useimperativehandle 是 react 中的一个钩子，允许您自定义父组件可以访问的 ref 对象。当您想要向父组件公开自定义 api，而不是公开组件的内部实现细节时，这非常有用。
何时以及为何应该使用它
在大多数情况下，useref 提供了足够的功能来访问 dom 元素或组件实例。但是，当您需要更多控制时，useimperativehandle 就会介入，提供一种仅向父组件公开您选择的方法或状态的方法。这可以确保您的组件保持模块化、封装性并且更易于维护。该钩子还允许更好的抽象，这意味着您可以在应用程序中以最少的重复重复使用组件。
示例 1 - 拨动开关组件
此示例演示了如何使用 typescript 创建切换开关组件。组件使用 useimperativehandle 向父组件公开自定义 api，允许父组件控制开关状态。
- 用例：创建可由父组件控制的自定义切换开关组件。
- 实施：
- 定义组件并使用 useimperativehandle 公开自定义 api。
- 在父组件中创建一个 ref 并将其传递给 toggleswitch 组件。
- 使用ref调用自定义api并控制开关状态。
import react, { forwardref, `useimperativehandle`, usestate } from "react";
interface toggleref {
toggle: () => void;
getstate: () => boolean;
}
type toggleswitchprops = {
initialstate?: boolean;
};
const toggleswitch = forwardref<toggleref, toggleswitchprops>((props, ref) => {
const [istoggled, setistoggled] = usestate(props.initialstate ?? false);
`useimperativehandle`(ref, () => ({
toggle: () => setistoggled(!istoggled),
getstate: () => istoggled,
}));
return (
<motion.button
onclick={() => setistoggled(!istoggled)}
classname="flex items-center justify-start w-12 h-6 p-1 overflow-hidden bg-gray-300 rounded-full"
animate={{
backgroundcolor: istoggled ? "#4caf50" : "#f44336",
}}
transition={{ duration: 0.3 }}
>
<motion.div
classname="flex items-center justify-center w-5 h-5 bg-white rounded-full"
animate={{
x: istoggled ? "100%" : "0%",
}}
transition={{ type: "spring", stiffness: 700, damping: 100 }}
></motion.div>
</motion.button>
);
});
function example() {
const toggleref = useref<toggleref>(null);
return (
<div classname="flex flex-col items-center justify-center h-screen gap-4">
<section classname="flex flex-row items-center justify-center w-full py-4 border border-gray-200 rounded-md gap-x-4">
<toggleswitch ref={toggleref} />
<button
onclick={() => toggleref.current?.toggle()}
classname="px-4 py-2 text-white bg-blue-500 rounded-md"
>
toggle switch
</button>
</section>
</div>
);
}
示例 2 - 手风琴组件
此示例演示了如何使用 typescript 创建手风琴组件。该组件使用 useimperativehandle 向父组件公开自定义 api，允许父组件控制折叠状态。
- 用例：创建可由父组件控制的自定义手风琴组件。
- 实施：
- 定义组件并使用 useimperativehandle 公开自定义 api。
- 在父组件中创建一个 ref 并将其传递给 accordion 组件。
- 使用ref调用自定义api并控制accordion状态。
interface AccordionRef {
expand: () => void;
collapse: () => void;
isExpanded: () => boolean;
toggle: () => void;
}
type AccordionProps = {
initialState?: boolean;
title: string;
content: ReactNode;
};
const Accordion = forwardRef<AccordionRef, AccordionProps>((props, ref) => {
const [expanded, setExpanded] = useState(props.initialState ?? false);
`useImperativeHandle`(ref, () => ({
expand: () => setExpanded(true),
collapse: () => setExpanded(false),
isExpanded: () => expanded,
toggle: () => setExpanded((prev) => !prev),
}));
const handleToggle = () => {
setExpanded((prev) => !prev);
};
return (
<div className="overflow-hidden border border-gray-200 rounded-md w-ful">
<motion.button
className="w-full px-4 py-2 text-left bg-gray-100 hover:bg-gray-200"
onClick={handleToggle}
initial={false}
animate={{ backgroundColor: expanded ? "#e5e7eb" : "#f3f4f6" }}
>
{props.title}
</motion.button>
<AnimatePresence initial={false}>
{expanded && (
<motion.div
initial="collapsed"
animate="expanded"
exit="collapsed"
variants={{
expanded: { opacity: 1, height: "auto" },
collapsed: { opacity: 0, height: 0 },
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
>
<div className="p-4 bg-white">{props.content}</div>
</motion.div>
)}
</AnimatePresence>
</div>
);
});
function Example() {
const accordionRef = useRef<AccordionRef>(null);
return (
<div className="flex flex-col items-center justify-center h-screen gap-4">
<main className="w-full px-4">
<Accordion
ref={accordionRef}
title="Click to expand"
content="This is the accordion content. It can contain any text or elements."
/>
</main>
<button
onClick={() => {
accordionRef.current?.expand();
}}
className="px-4 py-2 text-white bg-blue-500 rounded-md disabled:bg-gray-500"
>
Expand Accordion
</button>
<button
onClick={() => accordionRef.current?.collapse()}
className="px-4 py-2 text-white bg-blue-500 rounded-md"
>
Collapse Accordion
</button>
<button
onClick={() => accordionRef.current?.toggle()}
className="px-4 py-2 text-white bg-blue-500 rounded-md"
>
Toggle Accordion
</button>
</div>
);
}
使用 useimperativehandle 的优点
useimperativehandle 提供了一些关键的好处，特别是在构建可重用和交互式组件时：
封装
通过使用 useimperativehandle，您可以隐藏组件的内部实现细节，并仅公开您希望父级与之交互的方法。这可以确保您的组件保持其内部逻辑，而不受外部因素的影响，使其更加健壮。细粒度控制
它使您可以对 ref 对象进行细粒度控制。您无需公开整个组件实例或 dom 节点，而是可以决定哪些方法或值可用。当使用表单、切换或模态等复杂组件时，这一点至关重要。提高可重用性
通过抽象某些逻辑并控制向父级公开的内容，您的组件可以变得更加可重用。例如，表单验证组件或使用 useimperativehandle 构建的模式可以轻松地在具有不同配置的应用程序的多个部分中重用。清除父组件的 api
您可以为父组件创建一个干净、定义良好的 api，而不是提供对整个组件的直接访问。这会减少错误并提高组件行为的可预测性。typescript 中更好的类型安全
借助 typescript，useimperativehandle 变得更加强大。您可以定义父级可以使用的确切方法和属性，从而提高类型安全性并确保开发人员在使用组件时遵循预期的 api。
结论
useimperativehandle 是一个强大的钩子，允许您自定义父组件可以访问的 ref 对象。当您想要向父组件公开自定义 api，而不是公开组件的内部实现细节时，这非常有用。
通过使用useimperativehandle，您可以创建更灵活、更强大的自定义组件，这些组件可以轻松地被父组件重用和自定义。
资源
- react 文档 - useimperativehandle
- react 文档 -forwardref
- react 文档 - useref
- typescript 文档
理论要掌握，实操不能落！以上关于《掌握 React 中的 useImperativeHandle（使用 TypeScript）》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
155 收藏
-
437 收藏
-
306 收藏
-
102 收藏
-
192 收藏
-
336 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 507次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 484次学习