React中JSX的ref属性传入箭头函数配合useRef可实现什么效果？

1. 传入箭头函数作为ref的功能 #

这种写法是React官方支持的回调Ref（Callback Ref），相比直接传ref常量，灵活性更高：

• 最直接的作用就是你例子里的场景：可以批量把多个DOM元素挂载到同一个ref对象的不同属性下，不需要为每个输入项单独声明一个useRef，表单字段多的时候能大幅减少冗余代码。
• 你还可以在回调里自定义元素挂载/卸载时的额外逻辑，比如元素挂载时自动聚焦、获取元素尺寸做布局计算、绑定自定义事件等，不需要额外写useEffect监听ref的变化。

2. 对应的运行机制 #

这是React处理ref的内置规则：

• 当组件挂载完成后，React会主动调用你传入的ref回调函数，入参就是对应的DOM元素（类组件的话是组件实例，函数组件需要配合forwardRef才能拿到实例）；当组件卸载时，会再次调用这个回调，入参为null，方便你做清理逻辑。
• 如果你用的是内联箭头函数的写法（就是你例子里的写法），组件每次重渲染的时候，React会先调用旧的回调传入null，再调用新的回调传入DOM元素；如果你的回调没有额外副作用，这个特性不会对业务逻辑产生影响。

3. 写法合理性说明 #

这种写法完全是合法的常规用法，不属于需要避免的写法，也符合React官方的设计规范，但要根据场景选择：

• 适合的场景：需要批量管理多个同类型DOM元素的ref（比如大量表单输入项、列表项），这种写法比单独声明几十个useRef简洁太多，运行效率也没有差异。
• 注意事项：
  • 如果你的回调里有额外的副作用逻辑（比如修改状态、发起请求），建议用useCallback包裹这个回调函数，避免组件重渲染时重复触发副作用。
  • 如果只是需要获取单个元素的ref，直接传ref常量的写法更简洁，没必要多写一层回调。
• 额外补充：如果你只是要拿表单的提交值，不需要操作DOM的话，其实不用依赖ref，可以直接在form的submit事件里用FormData实例拿所有字段值，或者用受控组件管理会更符合React的单向数据流设计。

内容的提问来源于stack exchange，提问作者bassman21