React.forwardRef 的应用场景及源码解析

巧用 React.forwardRef，解锁函数组件的 ref 潜力

在 React 应用中，ref（引用）是获取组件实例和访问 DOM 元素的重要途径。然而，在函数组件中，由于其无状态特性，使用 ref 一直是个难题。幸运的是，React.forwardRef 横空出世，为函数组件赋予了使用 ref 的能力，让我们轻松驾驭 DOM 元素。

React.forwardRef 的妙用

React.forwardRef 作为高阶组件 (HOC)，发挥着承前启后的作用。它将一个函数组件包装成一个新组件，赋予其使用 ref 的能力，仿佛为函数组件植入了与类组件相同的 ref 机制。

React.forwardRef 的应用场景十分广泛：

• 表单元素： 在表单元素上使用 ref，可以轻松获取其 DOM 节点，实现表单值的获取、焦点控制等操作。
• 地图组件： 为地图组件添加 ref，可以访问其 DOM 节点，以便在地图上移动、缩放等。
• 其他组件： 对于任何需要访问组件实例或 DOM 元素的场景，React.forwardRef 都能派上用场。

React.forwardRef 的实现原理

React.forwardRef 的实现机制并不复杂，其源码如下：

export function forwardRef<T, P = {}>(
  render: RenderFunction<T, P>,
) {
  const ref = createRef<T | null>();
  const forwardRefRenderFunction = (props, ref) => {
    const element = render(props, ref);
    return {...element, ref};
  };
  forwardRefRenderFunction.displayName = render.displayName || render.name;
  return forwardRefRenderFunction;
}

React.forwardRef 内部首先创建一个 ref，然后将渲染函数包装成一个新的渲染函数 forwardRefRenderFunction。这个新函数接收两个参数：props 和 ref。在新函数中，调用原始的渲染函数进行组件渲染，并将渲染出的组件元素和 ref 一起返回。

React.forwardRef 的使用指南

使用 React.forwardRef 非常简单，下面是一个示例：

const MyComponent = React.forwardRef((props, ref) => {
  // 获取 DOM 节点
  const node = useRef();

  // 将 ref 传递给 DOM 节点
  return <div ref={ref} />;
});

export default MyComponent;

在这个示例中，我们创建了一个名为 MyComponent 的函数组件，并使用 React.forwardRef 进行包装。在组件内部，我们创建了一个 ref，并将其传递给 DOM 节点。这样，我们就可以在父组件中使用 MyComponent，并通过 ref 访问其 DOM 节点。

总结

React.forwardRef 为函数组件带来了强大的 ref 能力，让它们能够与 DOM 元素交互，执行更多高级操作。无论是在处理表单元素、控制地图组件，还是与其他组件进行交互，React.forwardRef 都能轻松实现。

常见问题解答

1. React.forwardRef 和 useImperativeHandle 有什么区别？

React.forwardRef 主要用于在函数组件中使用 ref，而 useImperativeHandle 则用于在类组件中公开自定义的 ref 接口。

2. React.forwardRef 可以在生命周期钩子中使用吗？

不可以，React.forwardRef 只在渲染阶段使用。

3. React.forwardRef 的性能影响是什么？

React.forwardRef 本身不会对组件的性能造成影响，但需要注意包装后的组件在渲染时需要额外分配内存。

4. 如何在 TypeScript 中使用 React.forwardRef？

在 TypeScript 中，可以使用泛型来指定函数组件的类型，如下所示：

const MyComponent = React.forwardRef<HTMLDivElement, Props>(
  (props, ref) => {
    return <div ref={ref} {...props} />;
  }
);

5. React.forwardRef 可以与其他 HOC 结合使用吗？

是的，React.forwardRef 可以与其他 HOC 结合使用，例如 withState 或 withHandlers。