react ref如何使用

React Refs 的基本概念

Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常用于需要直接操作 DOM 的场景（如焦点控制、动画触发）或与第三方库集成。

创建 Ref

使用 React.createRef() 或 useRef Hook 创建 ref 对象：

• 类组件：

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div ref={this.myRef} />;
    }
  }

• 函数组件：

  import { useRef } from 'react';
  function MyComponent() {
    const myRef = useRef(null);
    return <div ref={myRef} />;
  }

访问 Ref 的值

通过 ref.current 获取 DOM 节点或组件实例：

function AutoFocusInput() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // 自动聚焦到输入框
  }, []);
  return <input ref={inputRef} />;
}

回调 Refs

通过函数形式动态设置 ref，适用于 ref 对象需要动态变更的场景：

function CallbackRefExample() {
  const setRef = (node) => {
    if (node) {
      node.focus();
    }
  };
  return <input ref={setRef} />;
}

Ref 转发（Forwarding Refs）

通过 React.forwardRef 将 ref 传递给子组件，常用于高阶组件或封装库：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="fancy">
    {props.children}
  </button>
));

function App() {
  const buttonRef = useRef(null);
  return <FancyButton ref={buttonRef}>Click Me</FancyButton>;
}

使用场景与注意事项

• 典型场景：

  

  • 管理焦点、文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库（如 D3.js）。

• 避免滥用：

  • 优先使用 React 的状态和 props 控制组件行为。
  • 避免在渲染期间修改 ref.current，可能导致意外行为。

• 函数组件限制：

  • 函数组件没有实例，除非使用 forwardRef 或 useImperativeHandle 暴露特定方法。

示例：结合 useImperativeHandle

通过 useImperativeHandle 自定义暴露给父组件的 ref 值：

const InputWithFocus = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
  }));
  return <input ref={inputRef} />;
});

function Parent() {
  const inputRef = useRef();
  return (
    <>
      <InputWithFocus ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}