酷炫网站推荐,安卓app上架费用,加强普法网站和普法网络集群建设,网站界面设计的流程这篇文章主要介绍了详解react关于事件绑定this的四种方式#xff0c;写的十分的全面细致#xff0c;具有一定的参考价值#xff0c;对此有需要的朋友可以参考学习下。如有不足之处#xff0c;欢迎批评指正。 在react组件中#xff0c;每个方法的上下文都会指向该组件的实例… 这篇文章主要介绍了详解react关于事件绑定this的四种方式写的十分的全面细致具有一定的参考价值对此有需要的朋友可以参考学习下。如有不足之处欢迎批评指正。 在react组件中每个方法的上下文都会指向该组件的实例即自动绑定this为当前组件,而且react还会对这种引用进行缓存以达到cpu和内存的最大化。在使用了es6 class或者纯函数时这种自动绑定就不复存在了我们需要手动实现this的绑定 React事件绑定类似于DOM事件绑定区别如下 1.React事件的用驼峰法命名DOM事件事件命名是小写2.通过jsx传递一个函数作为event handler而不是一个字符串。3.React事件不能通过返回false来阻止默认事件需要显式调用preventDefault() 如下实例a href# onclickconsole.log(The link was clicked.); return false
Click me
/aclass ActionLink extends React.Component {
constructor(props) {
super(props);
}handleClick(e) {
e.preventDefault();
console.log(The link was clicked.);
}//欢迎加入前端全栈开发交流圈一起学习交流864305860render() {
return (
a href# onClick{this.handleClick.bind(this)}Click Me.../a
);
}}
复制代码ps:React组件类的方法没有默认绑定this到组件实例需要手动绑定。 以下是几种绑定的方法: bind方法 直接绑定是bindthis来绑定但是这样带来的问题是每一次渲染是都会重新绑定一次bind class Home extends React.Component { constructor(props) {super(props);this.state {};//欢迎加入前端全栈开发交流圈一起学习交流864305860} del(){console.log(del)} render() {return (div classNamehomespan onClick{this.del.bind(this)}/span/div);}
}
复制代码构造函数内绑定 在构造函数 constructor 内绑定this好处是仅需要绑定一次避免每次渲染时都要重新绑定函数在别处复用时也无需再次绑定 class Home extends React.Component { constructor(props) {super(props);this.state { };//欢迎加入前端全栈开发交流圈一起学习交流864305860this.delthis.del.bind(this)} del(){console.log(del)} render() {return (div classNamehomespan onClick{this.del}/span/div);}
}
复制代码::不能传参 如果不传参数使用双冒号也是可以 class Home extends React.Component { constructor(props) {super(props);this.state { };//欢迎加入前端全栈开发交流圈一起学习交流864305860} del(){console.log(del)} render() {return (div classNamehomespan onClick{::this.del}/span/div);}
}
复制代码箭头函数绑定 箭头函数不仅是函数的语法糖它还自动绑定了定义此函数作用域的this因为我们不需要再对它们进行bind方法 class Home extends React.Component {constructor(props) {super(props);this.state { }; //欢迎加入前端全栈开发交流圈一起学习交流864305860} del(){console.log(del)}render() {return (div classNamehomespan onClick{this.del}/span/div);}
}
复制代码以上几种方法都可以实现this绑定使用那种各自的习惯希望对大家的学习有所帮助 结语 感谢您的观看如有不足之处欢迎批评指正。 本次给大家推荐一个免费的学习群里面概括移动应用网站开发csshtmlwebpackvue node angular以及面试资源等。 对web开发技术感兴趣的同学欢迎加入Q群864305860不管你是小白还是大牛我都欢迎还有大牛整理的一套高效率学习路线和教程与您免费分享同时每天更新视频资料。 最后祝大家早日学有所成拿到满意offer快速升职加薪走上人生巅峰。 转载于:https://juejin.im/post/5c150b36f265da61524d4979
