React中的ref详解：用法、场景和注意事项

2024-02-17 15:06:46

在React开发中，我们经常需要直接操作DOM元素或者获取组件实例。这时，ref 属性就派上用场了。它就像一座桥梁，连接着React组件和底层的DOM世界，为我们提供了强大的操控能力。

ref 的创建之路

在函数式组件中，我们可以借助 useRef 钩子来创建 ref：

const myRef = useRef(null);

useRef 返回一个可变的对象，其 current 属性初始值为 null。我们可以将需要引用的DOM元素或组件实例赋值给 current。

而在类组件中，则可以使用 createRef 静态方法：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  // ...
}

这样，this.myRef 就成为了一个 ref 对象，同样可以通过 current 属性访问其引用的元素或组件实例。

ref 的连接之道

创建好 ref 后，我们需要将它与目标元素或组件连接起来。这可以通过在JSX中设置 ref 属性来实现：

<button ref={myRef}>点击我</button>
<MyComponent ref={this.myRef} />

这样，当组件渲染完成后，myRef.current 就会指向对应的按钮元素或 MyComponent 组件实例。

ref 的应用场景

ref 的应用场景非常广泛，例如：

直接操作DOM元素： 我们可以通过 ref 获取DOM元素，然后直接修改其样式、属性，或者调用其方法。例如，我们可以通过 ref 获取一个输入框元素，然后手动设置它的焦点：

const inputRef = useRef(null);

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

return (
  <div>
    <input type="text" ref={inputRef} />
    <button onClick={focusInput}>聚焦输入框</button>
  </div>
);

获取组件实例： 对于类组件，我们可以通过 ref 获取其组件实例，然后调用实例方法或者访问实例属性。例如，我们可以通过 ref 获取一个自定义组件实例，然后调用它的 start 方法：

const myComponentRef = useRef(null);

const startComponent = () => {
  myComponentRef.current.start();
};

return (
  <div>
    <MyComponent ref={myComponentRef} />
    <button onClick={startComponent}>启动组件</button>
  </div>
);

集成第三方库： 一些第三方库需要直接操作DOM元素，这时我们可以使用 ref 将DOM元素传递给第三方库。

ref 的转发技巧

有时候，我们需要将 ref 从父组件传递到子组件。这时，我们可以使用 React.forwardRef 来实现 ref 的转发。

例如，我们有一个自定义按钮组件 MyButton，它需要接收一个 ref，以便父组件可以访问按钮的DOM元素：

const MyButton = React.forwardRef((props, ref) => {
  return <button {...props} ref={ref} />;
});

然后，父组件就可以像这样使用 MyButton 组件，并将 ref 转发给它：

const buttonRef = useRef(null);

return (
  <div>
    <MyButton ref={buttonRef} onClick={() => console.log('按钮被点击了')}>
      点击我
    </MyButton>
  </div>
);

ref 的注意事项

在使用 ref 的时候，需要注意以下几点：

避免过度使用 ref： 过度使用 ref 会降低代码的可读性和可维护性，并且可能导致性能问题。尽量使用 React 的状态管理机制和事件机制来处理组件之间的交互。
使用稳定的 ref： 使用 useRef 或 createRef 创建的 ref 在整个组件生命周期中都是稳定的，即使组件重新渲染，ref 的值也不会改变。
注意 useEffect 钩子： 如果在 useEffect 钩子中使用 ref 的值，请确保将 ref 添加到依赖项数组中，以便在 ref 的值发生变化时重新执行 useEffect 钩子。