[OHIF-Viewers]医疗数字阅片-医学影像-REACT向事件处理程序传递参数-.bind-传递函数给组件
[OHIF-Viewers]医疗数字阅片-医学影像-REACT向事件处理程序传递参数-.bind-传递函数给组件
landv
发布于 2020-07-15 10:22:51
发布于 2020-07-15 10:22:51
文章被收录于专栏：landv
在 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 的方式，事件对象以及更多的参数将会被隐式的进行传递。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-07-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
