6.React 19 特性： ref 作为 prop 传递副本

用户9452

4月21日修改

在 React 19 中，ref 能够作为 prop 直接传递给函数组件，这是一个重要的更新，极大地优化了开发体验。在此之前，我们需要借助 forwardRef 这个高阶组件（HOC）来实现 ref 的转发，而现在这一过程变得更加直观和简洁。​

我们来深入探讨这一变化带来的具体优势。

告别 forwardRef 的繁琐

在 React 19 之前，如果想将 ref 附加到我们自己封装的函数组件上，直接在 props 中传递是行不通的。React 会在内部处理 ref，并不会将其作为普通的 prop 传递下去。为了解决这个问题，我们必须使用 React.forwardRef。​

旧有的方式：使用 forwardRef

让我们看一个熟悉的例子：创建一个自定义的 MyInput 组件，并希望父组件能获取其底层 input 元素的引用。​

代码块

import { forwardRef } from 'react';​
​
const MyInput = forwardRef((props, ref) => {​
  const { label, ...otherProps } = props;​
  return (​
    <label>​
      {label}​
      <input {...otherProps} ref={ref} />​
    </label>​
  );​
});​
​
// 使用​
function MyForm() {​
  const inputRef = useRef(null);​
​
  function handleFocus() {​
    inputRef.current.focus();​
  }​
​
  return (​
    <>​
      <MyInput ref={inputRef} label="Enter your name" />​
      <button onClick={handleFocus}>Focus the input</button>​
    </>​
  );​
}​

这种写法的核心问题在于：

1.
代码冗余：需要用 forwardRef 包裹整个组件。​

2.
心智负担：ref 是作为第二个参数传入的，这与常规的 props 对象分离，使得组件的签名不统一，增加了理解成本。​

3.
类型定义复杂：在 TypeScript 中，为使用了 forwardRef 的组件正确添加类型定义，往往需要处理复杂的泛型，例如 ForwardedRef 和 RefForwardingComponent。​
​

React 19 的新方式：ref 即 prop

随着 React 19 的到来，ref 终于成为了“一等公民”，可以像其他任何 prop 一样直接传递。上面的 MyInput 组件可以被大大简化。​

React 19 的方式：直接作为 prop 传递

6.React 19 特性： ref 作为 prop 传递 副本​

6.React 19 特性： ref 作为 prop 传递副本