React组件方法中为什么要绑定this

React组件方法中为什么要绑定this

如果你尝试使用过React进行前端开发,一定见过下面这样的代码:

//假想定义一个ToggleButton开关组件
class ToggleButton extends React.Component{
    constructor(props){
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleClick(){
        this.setState(prevState => ({
            isToggleOn: !preveState.isToggleOn
        }));
    }
    handleChange(){
        console.log(this.state.isToggleOn);
    }
    render(){
        return(
           <button onClick={this.handleClick} onChange={this.handleChange}>
                {this.state.isToggleOn ? ‘ON‘:‘OFF‘}
            </button>
        )
    }
}

构造方法中为什么要给所有的实例方法绑定this呢?

1. 代码执行的细节

上例仅仅是一个组件类的定义,当在其他组件中调用或是使用ReactDOM.render( )方法将其渲染到界面上时会生成一个组件的实例,因为组件是可以复用的,面向对象的编程方式非常适合它的定位。根据this指向的基本规则就可以知道,这里的this最终会指向组件的实例。

组件实例生成的时候,构造器constructor会被执行,此处着重分析一下下面这行代码:

this.handleClick = this.handleClick.bind(this);

此时的this指向新生成的实例,那么赋值语句右侧的表达式先查找this.handleClick( )这个方法,由对象的属性查找机制(沿原型链由近及远查找)可知此处会查找到原型方法this.handleClick( ),接着执行bind(this),此处的this指向新生成的实例,所以赋值语句右侧的表达式计算完成后,会生成一个指定了this的新方法,接着执行赋值操作,将新生成的函数赋值给实例的handleClick属性,由对象的赋值机制可知,此处的handleClick会直接作为实例属性生成。总结一下,上面的语句做了一件这样的事情:

把原型方法handleClick( )改变为实例方法handleClick( ),并且强制指定这个方法中的this指向当前的实例。

2. ES5的写法中为什么不用bind(this)?

ES5的写法是指使用React.createClass( )方法来定义组件,React在V16以上的新版本中已经移除了这个API,你可以通过阅读更早版本的源代码看到这个方法的细节。

  //旧版本`react`中`createClass`方法片段
  if (this.__reactAutoBindMap) {
        this._bindAutoBindMethods();
  }

在老版本的React中,createClass()的定义中可以看到上面的代码,抛开其他复杂的逻辑,从方法名就可以看出这是一个自动绑定的方法,实际上在这个方法中所完成的,就是对组件中自定义方法的this强制绑定,感兴趣的读者可以自行翻看源码了解细节。

3. 绑定this的必要性

在组件上绑定事件监听器,是为了响应用户的交互动作,特定的交互动作触发事件时,监听函数中往往都需要操作组件某个状态的值,进而对用户的点击行为提供响应反馈,对开发者来说,这个函数触发的时候,就需要能够拿到这个组件专属的状态合集(例如在上面的开关组件ToggleButton例子中,它的内部状态属性state.isToggleOn的值就标记了这个按钮应该显示ON或者OFF),所以此处强制绑定监听器函数的this指向当前实例的也很容易理解。

React构造方法中的bind会将响应函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件的实例。

4. 如果不绑定this

如果类定义中没有绑定this的指向,当用户的点击动作触发this.handleClick( )这个方法时,实际上执行的是原型方法,可这样看起来并没有什么影响,如果当前组件的构造器中初始化了state这个属性,那么原型方法执行时,this.state会直接获取实例的state属性,如果构造其中没有初始化state这个属性(比如React中的UI组件),说明组件没有自身状态,此时即使调用原型方法似乎也没什么影响。

事实上的确是这样,这里的bind(this)所希望提前规避的,就是著名的this指针丢失的问题

例如使用解构赋值的方式获取某个属性方法时,就会造成引用转换丢失this的问题:

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

上例中解构赋值获取到的handleClick这个方法在执行时就会报错,Class的内部是强制运行在严格模式下的,此处的this在赋值中丢失了原有的指向,在运行时指向了undefined,而undefined是没有属性的。

另一个存在的限制,是没有绑定this的响应函数在异步运行时可能会出问题,当它作为回调函数被传入一个异步执行的方法时,同样会因为丢失了this的指向而引发错误。

如果没有强制指定组件实例方法的this,在将来的使用中就无法安心使用引用转换作为回调函数传递这样的方式,对于后续使用和协作开发而言都是不方便的。

5. 小结

this的使用非常灵活,但这种灵活性也带来了很多混乱。这里的bind(this)是为了改进javascript语言级的缺陷,并不是只有React中才需要这样做,这个问题是伴随着面向对象编程而产生的,在使用javascript进行插件和框架的开发时,这个问题的影响会更加明显。之所以说它是一个语言级的缺陷,是因为Java中对于this在同样场景下的指向更符合正常思维逻辑,而javascript中如果不显示绑定,就会出现语言运行结果和方法的命名表意不一致的情况。

关于this更详尽的分析,可以参考笔者的博文《javascript基础修炼系列-What‘s this》上下篇(链接地址)。

参考

[1]《ES6-Class基本语法》https://www.cnblogs.com/ChenChunChang/p/8296350.html

原文地址:http://blog.51cto.com/13869008/2147770

时间: 2024-10-24 21:51:31

React组件方法中为什么要绑定this的相关文章

【react】react组件销毁中清理异步操作和取消请求

1.问题bug 1 ( Fetch不能中断的话 那如何在组件移除之前 移除掉这个异步请求? ) React中,因为异步操作的关系,组件销毁后调用了setState(),报警告,怎么解决? 我在componetWillMount中访问了接口返回数据后,调用了setState,访问的时候按了后退,导致还没收到响应就销毁了组件 ,但是fetch请求没被结束掉,之后 收到响应就调用了setState(),发出警告.请问这种情况该怎么处理?在unmount中结束fetch吗?但fetch怎么结束呢?官方文

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

React 中双项绑定

React 中双项绑定,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React--表单双项绑定</title> <scr

规避 React 组件中的 bind(this)

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &

关于react组件中的constructor和super

正片 export default class Child extends React.Component { constructor(props) { super(props); // ... } // ... } 简单来说,react 中通过继承的方式定义 class 组件时,可以缺省 constructor 构造函数,由 ES6 的继承规则得知,不管子类写不写 constructor,在 new 实例的过程都会给补上 constructor. 但是如果需要定义实例的 state 状态时,则

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

ASP.NET 中DataGrid item 绑定方法

<Columns> <asp:TemplateColumn HeaderImageUrl="../../Images/delete.GIF"> <HeaderStyle Wrap="False" Width="20px"></HeaderStyle> <ItemTemplate> <asp:CheckBox runat="server" ID="cbx

jq load()方法中加载文件中元素事件绑定失效的问题

1.load()方法: $(selector).load(URL,data,callback): selector:页面中需要加载外部文件的DOM节点: URL:外部文件地址: data:请求一同发送的查询字符串集合: callback:load()方法完成后所执行的函数: 2.问题:被加载页面中的JavaScript代码失效,这是因为load加载的外部文件会把Script部分删除掉. 解决:使用load方法中的回调函数加载绑定事件: 原文地址:https://www.cnblogs.com/n

vue 和 react 组件间通信方法对比

vue 和 react 组件间通信方法对比 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).this.$refs.this.$children props 子组件 => 父组件 自定义事件($emit.$on)(推荐).this.$parent 回调函数(推荐) 非父子组件(兄弟组件.跨级组件) bus 高阶组件(推荐).自定义事件.context 原文地址:https://www.cnblogs.com/cag2050/p/9054840.html