深入剖析 Ref 的本质，揭开组件与实例的秘密之门

前端

2023-10-09 17:11:39

导言

在 React 的组件世界中，ref 扮演着举足轻重的角色，它允许你接触到组件实例，解锁更强大的交互和操控能力。为了透彻理解 ref 的本质，我们踏上了一段探险之旅，深入 React 的源码，揭开其运作机制的神秘面纱。

React 中的 ref

在 React 的组件类中，存在一个名为 refs 的属性，它是每个组件固有的特性。当一个组件被实例化时，它的 ref 属性会指向该组件实例，提供了一个与组件进行交互的途径。

获取组件实例

获取组件实例可以通过在组件上使用 ref 属性来实现，有两种方式：

回调函数：

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

字符串：

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

使用回调函数时，它会在组件挂载后立即调用，传入组件实例。而使用字符串时，React 会自动在组件上创建一个具有该字符串名称的属性，指向组件实例。

ref 的用途

理解了如何获取组件实例后，接下来探讨 ref 的应用场景：

直接操作组件：
可以通过组件实例直接调用方法或访问属性，从而实现对组件的操控。
与外部交互：
ref 可以让组件与外部环境进行交互，例如与 Redux store 或第三方库。
性能优化：
ref 可以帮助避免不必要的重新渲染，提高组件性能。

用例示例

聚焦输入框：

class MyComponent extends React.Component {
  componentDidMount() {
    this.inputRef.current.focus();
  }

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

访问 Redux store：

class MyComponent extends React.Component {
  componentDidMount() {
    const store = this.props.store;
    this.myStoreInstance.dispatch({ type: 'MY_ACTION' });
  }

  render() {
    return <div ref={(instance) => { this.myStoreInstance = instance; }} />;
  }
}