面试官：React事件绑定有哪些方法？区别？

时间：2023-03-22 12:42:40 科技观察

本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。1.什么是React事件绑定？在React应用程序中，事件名称以小驼峰格式编写。比如onclick需要改写为onClick。最简单的事件绑定如下：从上面可以看出，事件绑定的方法需要用{}包裹上面的代码没有问题，但是当你把处理函数的输出代码改成console.log(this)，点击按钮，你会发现控制台输出是undefined2.如何绑定为了解决上面这个正确输出的问题，常用的绑定方法有以下几种：在render方法中使用bind在构造函数中使用箭头函数进行绑定在定义阶段，使用箭头函数绑定在render方法中使用bind如果你使用类组件，在其中给一个组件/元素一个onClick属性，它现在会自动将它的this绑定到当前组件。这个问题的解决方法是在事件函数classAppextendsReact.Component{handleClick(){console.log('this>',this);}render(){return之后使用.bind(this)将this绑定到当前组件(test

)}}该方法会在组件每次渲染时重新进行绑定操作，影响性能。在render方法中使用箭头函数，通过ES6的上下文将this点绑定到当前组件。另外每次render都会生成一个新的方法，影响性能e=>this.handleClick(e)}>测试

)}}constructor中的bind在构造函数中预先绑定当前组件，可以避免重复绑定classAppextendsReact.Component{constructor(props){super(props);this.handleClick=this.handleClick.bind(this);}handleClick(){console.log('this>',this);}render(){return(test

)}}在定义阶段，使用了箭头函数绑定和上面一样，这样可以避免在render操作中重复绑定，实现也很简单，如下：classAppextendsReact.Component{constructor(props){super(props);}handleClick=()=>{console.log('this>',this);}render(){return(test