React绑定事件的四种方法

今天给大家分享一下react绑定事件的四种方法，也许会有不准确的地方，欢迎指点出来，大家一起进步~

首先要先了解，在js中class的方法默认不会绑定this，默认情况下是undefined，所以就需要我们手动的去绑定this，这样才能在回调函数中使用到this。

第一种方法：在构造器中绑定this（这也是官方推荐的方法）

export default class Test extends Component {constructor(props){super(props)this.handleClick = this.handleClick.bind(this)}handleClick(){console.log('点击了',this)}render(){return (<div onClick={ this.handleClick }>click btn</div>)}
}

优点就是这种方法只会生成一个方法实例，并且绑定一次以后可以多次使用。

第二种方法：属性初始化器语法(class fields)绑定回调函数

export default class Test extends Component {handleClick=()=>{console.log('点击了',this)}render(){return (<div onClick={ this.handleClick }>click btn</div>)}
}

这种方法的好处就不用说了，首先在代码上就精简了很多。但是官方文档中说这个是"实验性"的语法，所以还是需要babel转义的。不过Create React App默认是启用这种语法的，所以还是可以放心使用的。

第三种方法：在调用的时候绑定this

export default class Test extends Component {handleClick(){console.log('点击了',this)}render(){return (<div onClick={ this.handleClick.bind(this) }>click btn</div>)}
}

第四种方法：使用箭头函数绑定this

export default class Test extends Component {handleClick(){console.log('点击了',this)}render(){return (<div onClick={ ()=> this.handleClick() }>click btn</div>)}
}

第二、三、四种方法的好处就是在不需要state的时候，不用额外的多写一个constructor构造函数。

但是第三、四种方法的问题在于每次渲染这个组件的时候，都会创建不同的回调函数，这样会对性能产生影响，而且如果和子组件通讯时作为props传入子组件，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为新的属性在传递。

所以如果考虑性能问题的话，还是应该避免第三种和第四种的写法。官方推荐的还是第一种和第二种方法来绑定this。

React绑定事件的四种方法相关推荐

svg鼠标响应事件的四种方法(其中两种可支持火狐)
svg鼠标响应事件的四种方法鼠标响应事件的四种方法,以click事件为例. Mouse Events - SMIL <?xml version="1.0" encoding ...
js 绑定事件的几种方法 addEventListener（）
看代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title> ...
plupload上传插件绑定事件的两种方法
在经受一天的磨难之后终于找到处理事件方法: 先引用: <script src="js/plupload.full.min.js" type="text/javasc ...
javascript中为某个对象（控件）绑定事件的几种方法
今天学习了javascirpt的一些基础知识,有关事件绑定的一些方法: 1.<input type="button" οnclick="clickHandler() ...
jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
【js】绑定事件的两种方法
方法一: 为需要绑定事件的标签添加一个属性onclick 代码实现: <input type="button" value="测试按钮" onclick= ...
原生js绑定事件的三种方法
// 绑定事件// 行内绑定// 选择元素绑定事件// 事件监听有三个参数('什么事件','函数','true或false')true(事件捕获) false(事件冒泡)document.query ...
js绑定事件的三种方法
1.行内绑定 <style>div {width: 400px;height: 200px;background-color: antiquewhite;}</style> & ...
【js】js绑定事件的三种方法
1.行内绑定 <style>div {width: 400px;height: 200px;background-color: antiquewhite;}</style> & ...

React绑定事件的四种方法

React绑定事件的四种方法相关推荐

最新文章

热门文章