React Refs: 解锁 DOM 和组件的强大功能

2023-05-10 17:09:40

揭秘 React Ref 的强大魅力：掌控 DOM 和组件实例的利器

在 React 的世界里，Ref 是一个至关重要的工具，它赋予我们访问 DOM 节点和组件实例的能力。通过 Ref，我们得以跨越组件的界限，直接操纵 DOM，实现元素获取、事件处理等一系列交互操作。

Ref 的三种使用方式

React 提供了三种使用 Ref 的方式，各有优势和适用场景：

1. 字符串 Ref：简单快捷

字符串 Ref 是最简单的方式，只需在元素中添加一个 ref 属性，即可获取该元素的 DOM 节点。

const myRef = React.createRef();

return <div ref={myRef}>Hello World!</div>;

2. 回调 Ref：灵活自如

回调 Ref 允许我们在函数组件中使用 Ref。在 ref 属性中传入一个函数，该函数将在组件挂载时被调用，并传递 DOM 节点或组件实例作为参数。

const MyComponent = () => {
  const ref = React.useRef();

  React.useEffect(() => {
    console.log(ref.current); // DOM 节点或组件实例
  }, []);

  return <div ref={ref}>Hello World!</div>;
};

3. ForwardRef：组件间传递 Ref

ForwardRef 是一种高级用法，用于在组件之间传递 Ref。它允许父组件访问子组件的 DOM 节点或组件实例。

const MyComponent = React.forwardRef((props, ref) => {
  // 将 ref 传递给子组件的 DOM 节点或组件实例
  return <div ref={ref}>Hello World!</div>;
});

剖析 ForwardRef 的源码

为了更深入理解 forwardRef，我们来看看它的源码：

const forwardRef = (render) => {
  return class extends React.Component {
    render() {
      const { forwardedRef, ...rest } = this.props;
      return render(rest, forwardedRef);
    }
  };
};

forwardRef 返回一个新的组件类，继承自 React.Component。在 render 方法中，它调用 render 函数，并将 props 和 forwardedRef 作为参数传递。