React Native中Button组件onPress两种绑定写法的区别及适用场景

核心差异 #

两种写法的本质差异集中在this指向绑定逻辑和函数实例创建规则两个维度，具体区别和适用场景如下：

写法1：<Button onPress={this.refreshData}> #

• 实现逻辑：直接将组件的refreshData方法引用传递给onPress属性，不会额外创建新的函数实例
• 注意事项：如果refreshData没有提前绑定组件实例的this指向，点击触发时this会指向undefined导致报错。提前绑定的常见方式有两种：
  • 在constructor中执行this.refreshData = this.refreshData.bind(this)
  • 用类属性箭头函数定义方法：refreshData = () => { // 逻辑 }
• 优势：组件重渲染时不会生成新的函数实例，如果Button是被React.memo包裹的优化组件，不会因为props变更触发不必要的重渲染，性能表现更好
• 适用场景：
  • 已经提前为refreshData绑定好了正确的this指向
  • 调用refreshData不需要传递自定义参数，仅需要使用onPress默认传递的事件对象即可
  • 列表、长页面等存在大量同类型按钮的性能敏感场景

写法2：<Button onPress={()=>this.refreshData()}> #

• 实现逻辑：每次组件重渲染时都会生成一个新的匿名箭头函数，onPress触发时先执行这个匿名函数，再在函数内部调用refreshData
• 特性：箭头函数的this继承自外层作用域，因此无论refreshData是否提前绑定this，都能正确指向当前组件实例，不会出现指向错误
• 劣势：每次渲染生成新的函数实例，如果Button是React.memo优化组件会触发无效重渲染，大量使用时会产生可感知的性能损耗
• 优势：写法灵活，可以非常方便的传递自定义参数，比如需要传递行id、业务参数时，直接写为onPress={() => this.refreshData(user.id)}即可，不需要额外做参数绑定
• 适用场景：
  • 需要给refreshData传递自定义业务参数的场景
  • 单页面按钮数量少、对性能损耗不敏感的普通业务场景，不需要额外写绑定逻辑更省事
  • 临时调试、快速验证逻辑的场景

补充注意 #

如果在FlatList等长列表组件的renderItem中需要传参调用方法，建议搭配useCallback缓存函数实例，避免大量重复创建函数导致列表滑动卡顿。

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