突破常规，揭秘 React 中 ref 的妙用

2023-12-17 15:37:35

React 中的 ref：深入解析

在 React 开发中，ref（引用）是一个强大的工具，可以让你控制 DOM 元素。本文将深入探讨 React 中的 ref，包括它的原理、用法、注意事项和实际应用。

什么是 ref？

React ref 允许你访问和操作 DOM 节点，提供了一个桥梁，将 React 组件与底层 HTML 元素连接起来。它是一个特殊的属性，当你为一个元素设置 ref 时，React 会创建一个 ref 对象，并将该元素的 DOM 节点赋值给该对象。

为什么需要 ref？

虽然 React 提供了丰富的 API 来管理状态和 props，但在某些情况下，访问 DOM 元素仍然是必要的。以下是 ref 的一些常见用途：

与 DOM 元素交互，如获取尺寸、位置或滚动位置
访问 DOM 元素的属性或方法，如 value 或 focus()
创建自定义组件，扩展 React 的原生功能

如何使用 ref？

有两种方法可以为一个元素设置 ref：

1. 字符串 ref

字符串 ref 是最简单的方法。为 ref 属性指定一个字符串值，React 会自动创建并赋值一个 ref 对象。

const MyComponent = () => {
  return <div ref="myRef">Hello, world!</div>;
};

2. 回调 ref

回调 ref 提供了更多的灵活性。传递一个函数作为 ref 值，当 React 创建 ref 对象时，它会将该函数作为参数传递给该对象。

const MyComponent = () => {
  return <div ref={ref => { this.myRef = ref; }}>Hello, world!</div>;
};

ref 的注意事项

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

ref 不是一个标准的 React API，可能会在未来的版本中发生变化。
谨慎使用 ref，因为它们可能会影响性能。
避免在子组件中使用 ref，因为它会导致父组件重新渲染。

ref 的妙用

ref 的应用场景广泛，包括：

1. 自定义滚动条

创建一个带有滚动条的组件，使用 ref 来跟踪滚动位置。

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

  useEffect(() => {
    const element = ref.current;
    element.addEventListener('scroll', () => {
      console.log(element.scrollTop);
    });
  }, []);

  return <div ref={ref}>Hello, world!</div>;
};

2. 拖放功能

实现拖放功能，使用 ref 来获取元素的 DOM 节点。

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

  useEffect(() => {
    const element = ref.current;
    element.addEventListener('dragstart', () => {
      console.log('Drag started!');
    });
  }, []);

  return <div ref={ref}>Hello, world!</div>;
};

3. 表单验证

使用 ref 来访问表单元素，进行表单验证。

const MyComponent = () => {
  const usernameRef = useRef();
  const passwordRef = useRef();

  const handleSubmit = () => {
    const username = usernameRef.current.value;
    const password = passwordRef.current.value;
    // 验证表单
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={usernameRef} />
      <input type="password" ref={passwordRef} />
      <button type="submit">Login</button>
    </form>
  );
};