React事件绑定的几种方式对比
发布时间:2020-12-15 06:48:08 所属栏目:百科 来源:网络整理
导读:React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。 通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种: 1. 在构造函数中使用bind绑定this class Button extends React.Component {constr
React事件绑定由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。 1. 在构造函数中使用bind绑定thisclass Button extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log('this is:',this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } } 2. 在调用的时候使用bind绑定thisclass Button extends React.Component { handleClick(){ console.log('this is:',this); } render() { return ( <button onClick={this.handleClick.bind(this)}> Click me </button> ); } } 3. 在调用的时候使用箭头函数绑定thisclass Button extends React.Component { handleClick(){ console.log('this is:',this); } render() { return ( <button onClick={()=>this.handleClick()}> Click me </button> ); } } 4. 使用属性初始化器语法绑定this(实验性)class Button extends React.Component { handleClick=()=>{ console.log('this is:',this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } } 比较方式2和方式3都是在调用的时候再绑定this。
方式1在类构造函数中绑定this,调用的时候不需要再绑定
方式4:利用属性初始化语法,将方法初始化为箭头函数,因此在创建函数的时候就绑定了this。 总结方式1是官方推荐的绑定方式,也是性能最好的方式。方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式4目前属于实验性语法,但是是最好的绑定方式,需要结合bable转译 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Reactor Pattern and Non-blocking IO
- Swift学习笔记(十九)——Swift数组
- C操作符“&”和“ – >”的优先级
- postgresql – 与没有函数包装器的查询相比,SQL函数非常慢
- 混合开发(Hybrid App)之 Ionic【一】-- 认识Ionic,搭建开发
- GB50174-2008 电子信息系统机房设计规范
- c# – 在asp.net图表控件中使用datetime x轴的datapoints
- clojure – 在leiningen REPL中显示加载的依赖项
- Webpack打包React报错Unexcepted token <
- c# – Try / Catch无法捕获