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

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

在 Render 中的绑定

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 中使用箭头函数

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

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

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

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

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

向事件处理程序传递参数

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

<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 的方式,事件对象以及更多的参数将会被隐式的进行传递。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C# 实现登录并跳转界面

    landv
  • [OHIF-Viewers]医疗数字阅片-医学影像-事件总线管理器

    commandsManager管理整个系统的命令 和 回调函数, 现有的头部所有按钮命令都是通过commandsManager分发的;

    landv
  • [linux][c/c++]代码片段02

     gcc `pkg-config --cflags gtk+-3.0` -o example-1 example-1.c `pkg-config --libs ...

    landv
  • “互联网+”催生行业云发展

    【IT168 云计算】随着云计算服务的大规模落地,企业级用户对于云服务的需求出现多样化的发展态势。从底层架构的角度切入,公有云、私有云、混合云都在用户的基础设施...

    企鹅号小编
  • JavaScript 函数节流和函数去抖应用场景辨析

    函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 m...

    吴裕超
  • java mybatis3 forea

    最近在用mybatis3做项目,需要很多的批量操作,所以就写了一些Demo,同时分享给大家,希望对您有用。

    py3study
  • 最近三年四大顶会深度推荐系统上的18篇论文

    今年RecSys 2019上出现的一篇极具批判性的论文《Are We Really Making Much Progress? A Worrying Analy...

    石晓文
  • 让你的Python代码拥有类型提示

    Python是一种动态类型语言,这意味着我们在编写代码的时候更为自由,但是与此同时IDE无法向静态类型语言那样分析代码,及时给我们相应的提示。为了解决这个问题,...

    乐百川
  • IoT设备的自我测试

    东西坏了,事情也出了差错。 简单的说就是 XX发生了。 不管用什么词,事实上我们都生活在一个不完美的世界里。 在嵌入式系统中,有很多失败的可能。 在简单的系统中...

    半吊子全栈工匠
  • 分布式系统的那些事儿(四) - MQ时代的通信

    之前在讲RPC通信的各种好处,特别好用,但是RPC并不是万能的,也并不是适用于各种场景的,因为他是同步的;现如今很多场景下的调用都是异步的,系统A调用B后,并不...

    风间影月

扫码关注云+社区

领取腾讯云代金券