React事件绑定几种方法测试

前提

es6写法的类方法默认没有绑定this，不手动绑定this值为undefined。

因此讨论以下几种绑定方式。

一、构造函数constructor中用bind绑定

class App extends Component {constructor (props) {super(props)this.state = {t: 't'}// this.bind1 = this.bind1.bind(this) 无参写法this.bind1 = this.bind1.bind(this, this.state.t)}// 无参写法 // bind1 () {//   console.log('bind1', this)// }bind1 (t, event) {console.log('bind1', this, t, event)}render () {return (<div><button onClick={this.bind1}>打印1</button></div>)}
}

二、在调用的时候使用bind绑定this

 bind2 (t, event) {console.log('bind2', this, t, event)}render () {return (<div><button onClick={this.bind2.bind(this, this.state.t)}>打印2</button></div>)}
// 无参写法同第一种

三、在调用的时候使用箭头函数绑定this

bind3 (t, event) {console.log('bind3', this, t, event)}render () {return (<div>// <button onClick={() => this.bind3()}>打印3</button> 无参写法<button onClick={(event) => this.bind3(this.state.t, event)}>打印3</button></div>)}

四、使用属性初始化器语法绑定this

  bind4 = () =>{console.log('bind4', this)}render () {return (<div><button onClick={this.bind4}>打印4</button>// 带参需要使用第三种方法包一层箭头函数</div>)}

附加::方法（不能带参，stage 0草案中提供了一个便捷的方案——双冒号语法）

  bind5(){console.log('bind5', this)}render() {return (<div><button onClick={::this.bind5}></button></div>)}

方法一优缺点

优点：

只会生成一个方法实例；
并且绑定一次之后如果多次用到这个方法也不需要再绑定。

缺点：

即使不用到state，也需要添加类构造函数来绑定this，代码量多；
添加参数要在构造函数中bind时指定，不在render中。

方法二、三优缺点

优点：

写法比较简单，当组件中没有state的时候就不需要添加类构造函数来绑定this。

缺点：

每一次调用的时候都会生成一个新的方法实例，因此对性能有影响；
当这个函数作为属性值传入低阶组件的时候，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为的新的属性传递。

方法四优缺点

优点：

创建方法就绑定this，不需要在类构造函数中绑定，调用的时候不需要再作绑定；
结合了方法一、二、三的优点。

缺点：

带参就会和方法三相同，这样代码量就会比方法三多了。

总结

方法一是官方推荐的绑定方式，也是性能最好的方式。

方法二和方法三会有性能影响，并且当方法作为属性传递给子组件的时候会引起重新渲染问题。

方法四和附加方法不做评论。

大家根据是否需要传参和具体情况选择适合自己的方法就好。

谢谢阅读。

更多专业前端知识，请上【猿2048】www.mk2048.com

React事件绑定几种方法测试相关推荐

js中事件绑定3种方法以及事件委托
###事件绑定首先,我先来介绍我们平时绑定事件的三种方法. 1.嵌入dom <button onclick="open()">按钮</button>< ...
React绑定事件的四种方法
今天给大家分享一下react绑定事件的四种方法,也许会有不准确的地方,欢迎指点出来,大家一起进步~ 首先要先了解,在js中class的方法默认不会绑定this,默认情况下是undefined,所以就需 ...
在html中搜索按钮事件,html中button绑定点击事件的几种方法介绍
HTML中为button绑定事件的方式有三种. 例如以下标签: submit 一.使用jquery进行绑定$('#btn_submit').click(function(){ }); 二.使用原生js ...
javascript中为某个对象（控件）绑定事件的几种方法
今天学习了javascirpt的一些基础知识,有关事件绑定的一些方法: 1.<input type="button" οnclick="clickHandler() ...
js 绑定事件的几种方法 addEventListener（）
看代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title> ...
svg鼠标响应事件的四种方法(其中两种可支持火狐)
svg鼠标响应事件的四种方法鼠标响应事件的四种方法,以click事件为例. Mouse Events - SMIL <?xml version="1.0" encoding ...
模拟键盘鼠标事件有两种方法
实现一个鼠标或者键盘模拟器,可以完成很多功能,比如做一个简单的游戏外挂^_^.通常,模拟键盘鼠标事件有两种方法: 1.keybd_event, mouse_event 2.SendMessage, P ...
js循环添加事件的两种方法
js循环添加事件的两种方法选择下拉列表中的一个li将文本传到框中问题:写此二级菜单时用到的方法不好,对此进行优化原始js代码: <script>// 思路:1.点击下拉框a时,ul中 ...
jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...

React事件绑定几种方法测试

前提

一、构造函数constructor中用bind绑定

二、在调用的时候使用bind绑定this

三、在调用的时候使用箭头函数绑定this

四、使用属性初始化器语法绑定this

附加::方法（不能带参，stage 0草案中提供了一个便捷的方案——双冒号语法）

方法一优缺点

方法二、三优缺点

方法四优缺点

总结

React事件绑定几种方法测试相关推荐

最新文章

热门文章