React 19 ref 怎么直接当 prop 传不再需要 forwardRef？

Question

仓乃文 · Accepted Answer

React 19 中 ref 变成了普通 prop，函数组件可以直接从 props 解构 ref，不再需要 forwardRef 包裹。这简化了组件写法，减少了模板代码。 React 19 新写法： ```javascript // 直接从 props 解构 ref function Input({ ref, placeholder, onChange }) { return ; } // 使用 function App() { const inputRef = useRef(null); const handleFocus = () => inputRef.current.focus(); return ( <> ); } ``` 高阶组件传递 ref： ```javascript function withLog(WrappedComponent) { // React 19：ref 作为普通 prop 传递，不需要 forwardRef return function WithLog({ ref, ...props }) { useEffect(() => { console.log("mounted"); }, []); return ; }; } ``` 旧写法对比： ```javascript // React 18：需要 forwardRef const Input = React.forwardRef(function Input({ placeholder }, ref) { return ; }); // React 19：直接解构 ref function Input({ ref, placeholder }) { return ; } ``` 补充说明： - React 19 中 ref 是保留 prop 名，组件如果声明了 ref 参数就能接收 - 旧代码用 forwardRef 写的仍然兼容，React 会发出废弃警告 - 类组件的 ref 行为不变，仍然指向组件实例 - 配合 useImperativeHandle 可以暴露自定义方法而不是 DOM 节点 - 如果子组件没有声明 ref 参数，ref 不会出现在 props 中