前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[OHIF-Viewers]医疗数字阅片-医学影像-REACT向事件处理程序传递参数-.bind-传递函数给组件

[OHIF-Viewers]医疗数字阅片-医学影像-REACT向事件处理程序传递参数-.bind-传递函数给组件

作者头像
landv
发布2020-07-15 10:22:51
8570
发布2020-07-15 10:22:51
举报
文章被收录于专栏:landv

在 Render 中的绑定

代码语言:javascript
复制
class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}

注意: 在 render 方法中使用 Function.prototype.bind 会在每次组件渲染时创建一个新的函数,可能会影响性能(参见下文)。

在 Render 中使用箭头函数

代码语言:javascript
复制
class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

注意: 在 render 方法中使用箭头函数也会在每次组件渲染时创建一个新的函数,这会破坏基于恒等比较的性能优化。

可以在 render 方法中使用箭头函数吗?

一般来说是可以的,并且使用箭头函数是向回调函数传递参数的最简单的办法。

但是如果遇到了性能问题,一定要进行优化!

向事件处理程序传递参数

在循环中,通常我们会为事件处理函数传递额外的参数。例如,若 id 是你要删除那一行的 ID,以下两种方式都可以向事件处理函数传递参数:

代码语言:javascript
复制
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的,分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下,React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-07-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在 Render 中的绑定
  • 在 Render 中使用箭头函数
  • 可以在 render 方法中使用箭头函数吗?
  • 向事件处理程序传递参数
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档