React中forwardRef()的作用？

---

前言

react中forwardRef()的基本使用,这里我只是列举了我自己开发时使用的方法，也可以使用该hook来获取dom节点的转发，来操作dom(本文就不详细说，就简单介绍了通过这个hook来调用各个独立组件的方法)

---

一、forwardRef( )有啥用？

在React中，forwardRef 是一个非常有用的高阶组件（HOC），它允许你将 ref 自动地通过组件传递给子组件。这在你需要直接访问 DOM 节点或组件实例时特别有用

二、使用步骤

这个通常和useRef()来配合使用，下面我们来使用forwardRef() 来实现函数式组件中获取实例来调用组件中的方法。（尤其是在使用函数组件时，因为函数组件没有实例，且默认情况下不接收 refs。）

1.不分模块组件调用

代码如下（示例）：

import { useImperativeHandle } from "react";
import { useRef, forwardRef } from "react";//子组件Son
const Son = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({// 暴露的方法sayHello() {console.log("我被父组件调用了");},}));return <div>son</div>;
});// 父组件App
function App() {const appRef = useRef(null);const handleClick = () => {appRef.current.sayHello();};return (<><Son ref={appRef} /><button onClick={handleClick}>我想调用子组件中的方法</button></>);
}export default App;

2.分模块组件调用

代码如下（示例）：App组件的代码

import { useRef, forwardRef } from "react";//引入子组件Son
import Son from "./pages/Son";
// 父组件App
function App() {// 创建ref对象const appRef = useRef(null);// 触发Son组件中的sayHello()方法const handleClick = () => {appRef.current.sayHello();};return (<>// 绑定ref<Son ref={appRef} /><button onClick={handleClick}>我想调用子组件中的方法</button></>);
}export default App;

代码如下（示例）：Son组件的代码（useImperativeHandle 使用了这个hook来暴露方法）

import { forwardRef } from "react";
import { useImperativeHandle } from "react";
// eslint-disable-next-line react/display-name
const Son = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({// 暴露的方法sayHello() {console.log("我被父组件调用了");},}));return <div>son</div>;
});export default Son;

---

总结

其实还有很多传值调用的方法，比如使用状态管理工具、Context、父传子，子传父，根据自己需求来做就可以，只是我本人学习心得，如果有啥建议欢迎讨论。