React中引入Ref的常见方式及{}、()与无括号的区别解析

问题解答 #

一、箭头函数中大括号、小括号和无括号的区别 #

箭头函数的括号使用直接关联着函数体的逻辑和返回值，具体差异如下：

• 无括号：当函数体只有一行表达式时可以省略括号，这行表达式的结果会自动成为函数的返回值。比如const double = num => num * 2，直接返回num*2的结果。如果这行是赋值语句（比如你的示例写法），它会执行赋值操作，同时返回赋值的结果（也就是被赋值的那个值）。
• 小括号：同样用于单行表达式场景，最常见的用途是当你需要直接返回一个对象字面量时——如果不用小括号包裹，{ key: value }会被解析成函数体的代码块，而非返回的对象，比如const getUser = () => ({ name: 'Bob' })。在你的示例里，n => (this.loadMoreBtn = n)只是用小括号强调了这是一个返回的表达式，和无括号的单行写法效果几乎一致，属于风格上的选择。
• 大括号：当函数体需要包含多行代码时，必须用大括号包裹。此时如果需要返回值，必须显式写出return语句；如果没有return，函数默认返回undefined。比如const calculate = (a, b) => { const sum = a + b; return sum * 2; }，而像n => {this.loadMoreBtn = n}这种写法，只执行了赋值操作，没有返回值，最终函数返回undefined。

二、React中引入Ref的常见方式及代码示例分析 #

React里常用的Ref引入方式主要有这几种：

• 字符串Ref（已废弃）：早期写法是ref="loadMoreBtn"，通过this.refs.loadMoreBtn获取元素，但这种方式存在潜在的性能和安全问题，React官方已经不推荐使用了。
• 回调Ref：就是你示例中用到的方式，通过一个函数接收DOM元素或组件实例，把它挂载到类组件的实例上（比如this.loadMoreBtn = n），这是比较灵活的一种写法。
• React.createRef()（React 16.3+）：在类组件的构造函数里创建Ref：this.buttonRef = React.createRef()，然后在元素上绑定ref={this.buttonRef}，获取元素时用this.buttonRef.current。
• useRef Hook（函数组件）：在函数组件中使用const buttonRef = useRef(null)，绑定方式同样是ref={buttonRef}，获取元素用buttonRef.current。

再看你给出的三行回调Ref代码，它们的核心功能是一致的，区别只来自箭头函数的括号使用：

• Line 1: buttonRef={n => {this.loadMoreBtn = n}}
  用大括号包裹函数体，执行了this.loadMoreBtn = n的赋值，但因为没有显式return，这个回调函数的返回值是undefined。不过React的回调Ref只关心你有没有在函数里完成元素的挂载，返回值不影响绑定效果，所以这行代码能正常把按钮元素存到this.loadMoreBtn上。
• Line 2: buttonRef={n => (this.loadMoreBtn = n)}
  小括号包裹的是单行赋值表达式，箭头函数会自动返回这个表达式的结果（也就是按钮元素n）。和Line 1的唯一区别就是返回值不同，功能上完全等价，这种写法更多是为了代码可读性，或者是习惯了用小括号包裹返回表达式的写法。
• Line 3: buttonRef={n => this.loadMoreBtn = n}
  无括号的单行表达式写法，箭头函数自动返回赋值的结果（也就是n）。这行和Line 2功能完全一样，只是写法更简洁。

简单总结：这三行代码在功能上没有区别，都能正确完成Ref绑定，差异仅在于箭头函数的返回值和书写风格。如果你的回调逻辑只有一行赋值，Line 3最简洁；如果未来可能扩展多行逻辑，Line 1的大括号写法更方便后续修改。

内容的提问来源于stack exchange，提问作者Thong Yi Xuen