React中的Refs和forwardRef的源码解读

2023-12-23 17:51:37

Refs和forwardRef：React 中管理 DOM 元素和组件实例的利器

在 React 世界中，Refs 和 forwardRef 扮演着举足轻重的角色，赋予开发者掌控 DOM 元素和组件实例的能力。这两个特性携手合作，为组件间的信息传递和对原生 DOM 的直接访问提供了便利。

深入了解 Refs

Refs（即引用）是 React 提供的一种机制，可供开发者访问组件对应的 DOM 节点或组件实例。它们是 React 中与原生 DOM 交互的重要桥梁。Refs 有两种主要类型：

1. 字符串 Refs：

这种简单的形式使用字符串标识符来引用 DOM 元素或组件实例。用法如下：

class MyComponent extends React.Component {
  render() {
    return <div ref="myRef" />;
  }
}

const myRef = this.refs.myRef; // 获取 DOM 节点或组件实例

2. 回调 Refs：

回调 Refs 提供了更大的灵活性。它允许开发者在组件挂载或更新时指定一个函数。

class MyComponent extends React.Component {
  render() {
    return <div ref={ref => this.myRef = ref} />;
  }
}

const myRef = this.myRef; // 获取 DOM 节点或组件实例

forwardRef：传递父组件的 Ref

forwardRef 是一种特殊的 React 组件，它允许开发者将父组件的 Ref 传递给子组件。这种能力在组件嵌套场景中至关重要，使父组件能够访问子组件的 DOM 元素或组件实例。

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

const ParentComponent = () => {
  const myRef = React.createRef();

  return <MyComponent ref={myRef} />;
};

const myRef = this.myRef.current; // 获取 DOM 节点或组件实例

源码一探究竟

Refs 和 forwardRef 的源码位于 React 库的 react-dom 包中。Refs 的源码主要包含 createRef() 和 getReactDOMComponentForRef() 两个函数，分别用于创建 Ref 对象和获取 DOM 元素或组件实例。

forwardRef 的源码较为复杂，涉及 forwardRef() 和 useImperativeHandle() 两个函数。forwardRef() 用于创建一个新的 forwardRef 组件，而 useImperativeHandle() 用于将父组件的 Ref 传递给子组件。