React 中的 forwardRef 的理解及用法

官方文档：Refs 转发

语法

React.forwardRef(render);

上面的代码中，forwardRef 函数接收一个名为 render 的函数(也可以将 render 方法理解成一个函数组件)，返回值是 react 组件；

const render = (props, ref) => {
	return <></>;
}

上面的代码中，render 函数接收 2 个参数，第一个参数为 props(父组件传递的参数对象)，第二个参数为 ref (React.createRef());

---

综上所述，就组合成了我们就常见到的写法：

const Button = React.forwardRef((props, ref) {
	return <></>;
});

一个完整的简单例子

感觉还是很模糊，举一个例子：

import React from "react";

const App = (props) => {
  const btnRef = React.createRef();			// 1
  React.useEffect(() => {
    console.log(btnRef);					// 5
  }, [btnRef]);
  return (
    <Button ref={btnRef}>一个按钮</Button>	// 2
  );
}

const Button = React.forwardRef((props, ref) => {	// 3
  return (
    <button
      ref={ref}								// 4
    >
      {props.children}
    </button>
  );
});

export default App;

上面代码中，实现了在 App 组件中，返回了一个 Button 组件；以下是详细步骤：

1. 创建了一个 ref；
2. 将第一步创建的 ref 挂载到 Button 组件上；
3. 将第二步传入 Button 组件的 ref 作为参数传递进来；
4. 将 ref 挂载到 button DOM 节点上；
5. 画面渲染完成后，控制台打印 btnRef;

总结

值得注意的是：

1. 当 ref 属性用于 HTML 元素时，接收底层 DOM 元素作为其 current 属性;
2. 当 ref 属性用于自定义 class 组件时，ref 接收组件的挂载实例作为其 current 属性;
3. 不能在函数组件上使用 ref 属性，因为他们没有实例;

此时再来理解一下官方的定义:

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。