组件构建利器：Ref转发与ForwardRef

前端

2024-01-18 20:21:42

浅析Ref转发和ForwardRef，构建可复用的组件库

前言

在React中，Refs是一种用于获取组件实例或DOM元素的引用。传统的Ref使用可能会导致组件嵌套过深，难以维护，尤其是在构建可复用的组件库时。Ref转发和forwardRef为我们提供了更优雅的方式来处理组件实例的引用传递。

Ref 转发

Ref转发是一种将ref自动传递到子组件的技巧，无需手动传递props。这对于某些组件，尤其是可重用的组件库非常有用。使用Ref转发，我们可以轻松地在父组件中使用ref，而无需在子组件中显式地传递ref。

Ref转发的实现

Ref转发可以使用两种方法实现：

使用React.forwardRef。
使用React.createRef和useImperativeHandle。

使用React.forwardRef实现Ref转发

import React, { forwardRef } from 'react';

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

export default MyComponent;

使用React.createRef和useImperativeHandle实现Ref转发

import React, { createRef, useImperativeHandle } from 'react';

const MyComponent = () => {
  const ref = createRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      ref.current.focus();
    },
  }));

  return <div ref={ref} />;
};

export default MyComponent;

ForwardRef

forwardRef是一个React Hook，它允许我们在函数组件中使用ref。这在需要访问DOM元素或组件实例时非常有用，例如，当我们需要在子组件中控制焦点时。

ForwardRef的使用

import React, { forwardRef } from 'react';

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

export default MyComponent;

在父组件中，我们可以使用useRef来获取MyComponent的ref：

import React, { useRef } from 'react';

const ParentComponent = () => {
  const ref = useRef();

  return (
    <div>
      <MyComponent ref={ref} />
      <button onClick={() => { ref.current.focus(); }}>Focus</button>
    </div>
  );
};

export default ParentComponent;