深入探究 React 的 ref

2023-09-10 13:56:24

ref 简介

在 React 中，ref 是一种用于在组件之间建立关系的强大工具。它允许您在组件中访问子组件的实例、DOM 元素，甚至可以跨组件传递数据。通过使用 ref，您可以实现各种功能，例如表单验证、动画效果、以及与外部库的集成。

ref 的用法

访问子组件

要访问子组件，您需要在父组件中使用 ref 属性。ref 属性是一个回调函数，当子组件创建时，React 会将子组件的实例作为参数传递给该函数。

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

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

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>子组件</h1>
      </div>
    );
  }
}

在上面的示例中，ParentComponent 中的 childRef 属性是一个 ref，当 ChildComponent 创建时，React 会将 ChildComponent 的实例作为参数传递给 childRef 函数。这样，ParentComponent 就可以通过 this.childRef.current 访问 ChildComponent 的实例。

操纵 DOM 元素

除了访问子组件，ref 还允许您直接操纵 DOM 元素。要做到这一点，您需要在组件中使用 useRef hook。useRef hook 返回一个可变的 ref 对象，您可以使用它来存储 DOM 元素的引用。

const MyComponent = () => {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

在上面的示例中，useRef hook 返回了一个可变的 ref 对象 inputRef，您可以使用它来存储 input 元素的引用。当您点击按钮时，focusInput 函数将调用 inputRef.current.focus() 方法来使 input 元素获得焦点。

在组件之间传递数据

ref 还可以在组件之间传递数据。要做到这一点，您需要在父组件中使用 forwardRef。forwardRef 是一个 React 高阶组件，它允许您将 ref 从父组件传递给子组件。

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

const ParentComponent = () => {
  const inputRef = useRef();

  return (
    <div>
      <MyComponent ref={inputRef} />
    </div>
  );
};

在上面的示例中，MyComponent 是一个高阶组件，它接受一个 ref 参数。当 ParentComponent 创建 MyComponent 时，它将 inputRef 作为 ref 参数传递给 MyComponent。这样，MyComponent 就可以通过 props.ref 访问 input 元素的引用。

实用技巧和最佳实践

使用 ref 来优化性能

ref 可以帮助您优化组件的性能。例如，如果您有一个组件只在特定情况下需要渲染，您可以使用 ref 来延迟渲染该组件，直到它真正需要被渲染为止。

const MyComponent = React.forwardRef((props, ref) => {
  const [showComponent, setShowComponent] = useState(false);

  useEffect(() => {
    if (showComponent) {
      // 渲染组件
    }
  }, [showComponent]);

  return (
    <div>
      <button onClick={() => setShowComponent(true)}>Show Component</button>
    </div>
  );
});

const ParentComponent = () => {
  const componentRef = useRef();

  return (
    <div>
      <MyComponent ref={componentRef} />
    </div>
  );
};

在上面的示例中，MyComponent 组件只有在 showComponent 为 true 时才会被渲染。这可以帮助您优化组件的性能，因为该组件只有在需要时才会被渲染。

使用 ref 来调试组件

ref 可以帮助您调试组件。例如，如果您想查看组件的实际 DOM 结构，您可以使用 ref 来访问组件的 DOM 元素，然后使用浏览器的开发工具来查看该元素。

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

const ParentComponent = () => {
  const componentRef = useRef();

  return (
    <div>
      <MyComponent ref={componentRef} />
    </div>
  );
};