何时在 React 18 中使用“useImperativeHandle”和“forwardRefs”

有时，你必须拿出大枪

image of title by author

这篇文章是续 https://betterprogramming.pub/react-v18-demystifying-useref-forwardref-and-useimperativehandle-feec2fc5b2f6 我们在哪里看到了 refs 是什么以及它们是如何运作的。借助从上一篇文章中获得的知识，让我们深入了解一些更复杂的理解，它可以在具有大量组件嵌套和一些真正基于 DOM 的需求的实际项目中派上用场。

前向参考

什么是没有问题的解决方案，对吧？所以，让我们定义一个常规裁判无法完成工作的情况。如果我们有一个父组件想要引用子组件中定义的元素之一并修改焦点状态怎么办？让我们创建一个这样的例子。

The parent component controls the focus of the button defined in the child component.

如上所示，父组件控制子组件按钮的焦点。它并不像将父级中定义的 ref 作为道具传递给子级那么简单。在我们的例子中， ref 是一个特殊属性，定义在要更改焦点的确切 HTML 元素上，而不是子组件包装器，因为它只是一个函数。

我们可以通过将子组件包装成一个 前向引用 React 提供的函数，它将处理这个委托。这个函数应该传输发送的 props 并允许组件上有一个额外的 props，即我们的“ref”。这是代码：

How to use forwardRef in React?

使用命令式句柄

好吧，看起来，我们在上一节中取得的成就对于即使是复杂的情况也足够了。不过，有时您可能会想在组件内定义自定义 ref 功能，该功能将暴露给使用它的组件。让我们尝试创建一个需要这种细粒度控制的情况。

默认情况下，输入的焦点颜色是 蓝色的 但是假设我们的忍者应该得到一个超临界的上忍级别任务，那么输入字段应该集中在 红色的 反而。

The parent component can control which colour the child’s input focuses on.

为了说明使用 使用命令式句柄 在这种情况下，让我们脱离常识，构建两个通过 ref 绑定到输入组件的自定义方法。这一次，我们将有两个自定义方法，而不是默认的焦点方法 焦点红色（） 和 焦点蓝（） .

我们仍然需要使用 前向引用 将 ref 传递给子组件，但在子组件内部，我们将在 使用命令式句柄 钩。代码如下所示：

We are adding custom methods to the ref using useImperativeHandle.

需要注意的重要一点是，在上面的代码中，我们并没有像以前那样扩展默认可用的方法，而是创建了一组全新的方法。所以 _默认焦点（）_ 方法不再可供我们使用，调用它会给我们带来甜蜜的错误。

The focus method is not available when using the imperative handle.

结论

总结一下，我将重复我在上一篇文章中所说的：在进行基于虚拟 dom 的开发时，不应该使用对 DOM 本身的引用，因为您在真实 DOM 中所做的更改不会正确地转移到 vDOM设置，这会导致意外的反应。

我选择了 重点 作为本文的中心主题，因为它是需要召唤裁判时的主要需求之一。 React 提到了一组有限的 refs 用例，你可以在这里看到： https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs .

**想要连接？** 领英：[ https://www.linkedin.com/in/sameerkumar1612](https://www.linkedin.com/in/sameerkumar1612/)


版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/33144/34551308