返回

React ref 从原理到应用

前端

<html>
  <head>
    
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>React ref 从原理到应用</h1>

    <h2>前言</h2>

    <p>
      提到 ref 或者 refs，如果你用过 React 16 以前的版本，第一印象都是用来访问 DOM 或者修改组件实例的，正如官网所介绍的这样：
    </p>

    <blockquote>
      React ref 属性是一个 ref 回调函数，回调函数接收单个参数：指向 DOM 元素或组件实例的 ref 对象。
    </blockquote>

    <p>
      然后到了 React 16.3 出现的 createRef，以便于创建可变的 ref，也就是人们俗称的"可变 ref"或"动态 ref"。
    </p>

    <h2>原理</h2>

    <p>
      在 React 16 以前的版本中，ref 是一个字符串，它指向组件实例或 DOM 元素。在 React 16.3 中，ref 是一个对象，它有一个 current 属性，指向组件实例或 DOM 元素。
    </p>

    <p>
      创建 ref 的方式也有所不同。在 React 16 以前的版本中，ref 是一个属性，它被传递给组件。在 React 16.3 中，ref 是一个函数，它被调用来创建 ref 对象。
    </p>

    <p>
      例如，以下是如何在 React 16 以前的版本中使用 ref：
    </p>

    <code>
      class MyComponent extends React.Component {
        render() {
          return <input ref="myInput" />;
        }
      }
    </code>

    <p>
      以下是如何在 React 16.3 中使用 ref：
    </p>

    <code>
      class MyComponent extends React.Component {
        myInputRef = React.createRef();

        render() {
          return <input ref={this.myInputRef} />;
        }
      }
    </code>

    <p>
      在 React 16.3 中，ref 对象的 current 属性指向组件实例或 DOM 元素。可以通过以下方式访问 ref 对象的 current 属性：
    </p>

    <code>
      const myInputRef = React.createRef();

      // 在组件挂载后，ref 对象的 current 属性指向 DOM 元素
      componentDidMount() {
        console.log(myInputRef.current); // DOM 元素
      }
    </code>

    <h2>应用</h2>

    <p>
      ref 可以用于各种场景，例如：
    </p>

    <ul>
      <li>访问 DOM 元素</li>
      <li>修改组件实例</li>
      <li>创建可变的 ref</li>
      <li>在组件之间传递数据</li>
    </ul>

    <p>
      以下是一些 ref 的具体应用场景：
    </p>

    <ul>
      <li>
        <strong>访问 DOM 元素：</strong>可以使用 ref 来访问 DOM 元素，然后对其进行操作。例如，以下是如何使用 ref 来获取输入框的值：
        <br>
        ```
          const myInputRef = React.createRef();

          // 在组件挂载后，ref 对象的 current 属性指向 DOM 元素
          componentDidMount() {
            const value = myInputRef.current.value;
          }
        ```
      </li>
      <li>
        <strong>修改组件实例：</strong>可以使用 ref 来修改组件实例。例如，以下是如何使用 ref 来设置组件实例的状态：
        <br>
        ```
          const myComponentRef = React.createRef();

          // 在组件挂载后，ref 对象的 current 属性指向组件实例
          componentDidMount() {
            myComponentRef.current.setState({ count: 1 });
          }
        ```
      </li>
      <li>
        <strong>创建可变的 ref：</strong>可以使用 ref 来创建可变的 ref。例如，以下是如何使用 ref 来创建可变的 ref，并将其传递给子组件：
        <br>
        ```
          const myRef = React.createRef();

          // 在组件挂载后，ref 对象的 current 属性指向组件实例
          componentDidMount() {
            this.props.childComponentRef(myRef);
          }
        ```
      </li>
      <li>
        <strong>在组件之间传递数据：</strong>可以使用 ref 来在组件之间传递数据。例如，以下是如何使用 ref 来将数据从父组件传递给子组件：
        <br>
        ```
          // 父组件
          const myRef = React.createRef();

          // 在组件挂载后，ref 对象的 current 属性指向组件实例
          componentDidMount() {
            this.props.childComponentRef(myRef);
          }

          // 子组件
          const myComponentRef = React.createRef();

          // 在组件挂载后，ref 对象的 current 属性指向组件实例
          componentDidMount() {
            const data = myComponentRef.current.getData();
          }
        ```
      </li>
    </ul>

    <h2>总结</h2>

    <p>
      ref 是 React 中一个非常有用的工具，它可以用于各种场景。通过理解 ref 的原理和应用，我们可以更好地利用 ref 来构建复杂的 React 应用程序。
    </p>
  </body>
</html>