《React ref大揭秘：入门到精通指南》

2023-08-05 08:53:20

深入解析 React Ref 的用法与原理，助你掌控组件与 DOM

React Ref 是一种至关重要的特性，它赋予你访问组件实例和底层 DOM 元素的能力，让你在 React 生态系统中拥有更多的灵活性。本文将深入浅出地探讨 React Ref 的基本用法和高级用法，揭开它的神秘面纱，让你成为操纵组件和 DOM 元素的大师。

基本用法

获取 DOM 元素

最基本的使用场景莫过于获取 DOM 元素了。通过 ref 属性，你可以将 ref 赋值给一个变量，然后在组件实例中使用 this.ref 来访问 DOM 元素。

import React, { useRef } from 'react';

const MyComponent = () => {
  const ref = useRef(null);

  return (
    <div ref={ref}>
      {/* ... */}
    </div>
  );
};

获取组件实例

在类组件中，你还可以使用 this.refs 来访问子组件实例。子组件需要实现 ref 属性来接收父组件传递的 ref。

import React, { Component } from 'react';

class ParentComponent extends Component {
  render() {
    return (
      <div>
        <ChildComponent ref={(ref) => this.childRef = ref} />
      </div>
    );
  }
}

class ChildComponent extends Component {
  render() {
    return (
      <div>
        {/* ... */}
      </div>
    );
  }
}

进阶用法

获取子组件实例（函数式组件）

除了类组件，函数式组件也可以获取子组件实例。使用 React.createRef() 创建一个 ref 对象，作为 prop 传递给子组件。在子组件中，使用 this.props.ref 来访问父组件传递的 ref。

import React, { createRef } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRef = createRef();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

const ChildComponent = (props) => {
  return (
    <div>
      {/* ... */}
    </div>
  );
};

实现跨组件通信

React Ref 还可以作为跨组件通信的桥梁。在父组件中创建 ref 对象并将其传递给子组件。在子组件中，使用 ref 对象来访问父组件的实例。

import React, { createRef } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRef = createRef();
  }

  handleChildClick = () => {
    console.log('Child component clicked!');
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} onClick={this.handleChildClick} />
      </div>
    );
  }
}

const ChildComponent = (props) => {
  return (
    <div onClick={props.onClick}>
      {/* ... */}
    </div>
  );
};

原理揭秘

React Ref 的底层实现依赖于特殊的 DOM 属性 ref。当您将 ref 赋值给一个变量时，React 会自动将该变量添加到组件实例的 this.refs 属性中。这样，您就可以在组件实例中访问DOM元素或子组件实例。

在 React 的虚拟 DOM 中，ref 属性是一个特殊的属性，它允许你从 JSX 元素中获取一个 DOM 元素或一个组件实例。当 ref 属性被赋值时，它会创建一个回调函数，并在组件挂载或更新时调用这个函数，并将指向 DOM 元素或组件实例的引用作为参数传递给这个回调函数。

在 React 的实现中，ref 属性最终会被转换为一个特殊的 DOM 属性，这个属性的名字以 "data-react-ref-" 为前缀，后面跟着一个唯一的字符串。当 React 将 JSX 元素转换为虚拟 DOM 时，它会将 ref 属性转换为这个特殊的 DOM 属性，并在组件挂载或更新时，通过这个特殊的 DOM 属性来访问 DOM 元素或组件实例。