React 组件中的 bind(this)示例代码


Posted in Javascript onSeptember 16, 2018

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看。

请看如下的示例:

class App extends Component {
 constructor() {
  super();
  this.state = {
   isChecked: false
  };
 }
 render() {
  return (


   <div className="App">
    <label >
     check me:
     <input
      type="checkbox"
      checked={this.state.isChecked}
      onChange={this.toggleCheck}
     />
    </label>
   </div>
  );
 }

 toggleCheck() {
  this.setState(currentState => {
   return {
    isChecked: !currentState.isChecked
   };
  });
 }
}

页面上放了一个 checkbox 元素,点击之后切换其选中状态。这是很直观的一段代码,但并不会像你想的那样正常工作。

React 组件中的 bind(this)示例代码

事件处理器上下文丢失的报错

因为 checkbox 的 onChange 事件处理器中,找不到 React 组件的 setState 方法,这说明其执行时的上下文不是该组件,而是别的什么东西,具体我们来调试下。

React 组件中的 bind(this)示例代码

调试查看丢失上下文后 this 的值

出乎意料,是 undefined,这个方法在一个完全野生的环境下执行,没有任何上下文。

WHY

当然这并不是 React 的锅,这是 JavaScript 中 this 的工作原理。具体可参见 Chapter 2: this All Makes Sense Now! 来追溯其底层原因,简单来讲 this 的值取决于函数调用的方式。

默认的绑定

function display(){
 console.log(this)
}

display() // 严格模式下为全局 `window`,非严格模式下为 `undefined`

隐式绑定

通过对象来调用,该函数的上下文被隐式地指定为该对象。

var obj = {
 name: 'Nobody',
 display: function(){
  console.log(this.name);
  }
 };
 obj.display(); // Nobody. 里面取的是 obj 身上的 `name` 属性

但,如果把该对象上的方法赋值给其他变量,或通过参数传递的形式,再执行,那光景就又不一样了。

var obj = {
 name: "Nobody",
 display: function() {
  console.log(this.name);
 }
};
var name = "global!";
var outerDisplay = obj.display;
outerDisplay(); // global! 这里取到的 `name` 是全局中的内个

这里赋值给 outerDisplay 后再调用,等同于调用一个普通函数,而不是对象中的那个,所以此时 this 为全局对象,刚好全局里面有定义一个 name 变量。同样地,如果是严格模式下,因为此时 this 为 undefined,所以访问不到所谓的 undefiend.name,于是会抛错。

function invoker(fn) {
 fn();
}

setTimeout( obj.display, 1000 ); // global!
invoker(obj.display); // global!

这里 setTimeout 调用的时候,因为它的签名实际上是 setTimeout(fn,delay),所以,可以理解为将 obj.display 赋值给了它的入参 fn,实际上执行的是 fn 而不再是对象上的方法了。对于 invoker 函数也是一样的道理。

强制绑定

这个时候,bind 就成了那个拯救世界的英雄,任何时间我们都可以通过它来显式地指定函数的执行上下文。

var name = “global!”;
obj.display = obj.display.bind(obj); 
var outerDisplay = obj.display;
outerDisplay(); // Nobody

bind 将指定的上下文与函数绑定后返回一个新的函数,这个新函数再拿去赋值或传参什么的都不会对其上下文产生影响了,执行时始终是我们指定的那个。

现场还原

有了上面的背景,就可以还原文章开头的问题了,即事件处理器的上下文 丢失的问题。

JSX 中的 HTML 标签本质上对应 React 中创建该标签的一个函数。比如你写的 div 编译会其实是 React.createElement(‘div')。所以当你书写 <Input> 时其实是调用了 React.createElement 来创建一个 <Input> 标签。

React.createElement(
 type,
 [props],
 [...children]
)

标签上的属性会作为 props 参数传递给 createElement 函数。

<Input onChange={this.toggleCheck}> 表示将组件中的 toggleCheck 方法赋值给 createElement 的入参 props(props 是个对象,接收所有书写在标签上的属性,),实际调用的时候一如上面所说的,调用的已经不是组件中的 toggleCheck 方法了。

React.createElement(type, props){
 // 让我们创建一个 <type> 并在 <type> 的值发生变化的时候调用一下 `props.onChange`
 ...
 props.onChange() // 它已经不是原来的方法了,丢失了上下文
 ...
}

因为 ES6 的 Class 是在严格模式下执行的,所以事件处理器中如果使用了 this 那它就是 undefined。

所以你看到 React 官方的示例中,constructor 里有 bind(this) 的语句就不奇怪了,就是为了纠正这个事件处理器歪了的执行上下文。

constructor() {
  super();
  this.state = {
   isChecked: false
  };
+ this.toggleCheck = this.toggleCheck.bind(this);
 }

这样是能正常工作了,但是,这句代码的存在真的很别扭,因为,

•对于业务来说,毫无意义,徒增代码量
•很丑陋,每加一个处理器就要加一条这样的绑定
•冗余,这样重复的代码大量冗余在项目中,在搜索中混淆了原本的方法

避免的方式有很多,就看哪种最对味。下面来看看如何避免写这些绑定方法。

#0行内的绑定

最简单的可以在行内进行绑定操作,这样不用单独写一句出来。

<input
      type="checkbox"
      checked={this.state.isChecked}
-       onChange={this.toggleCheck}
+      onChange={this.toggleCheck.bind(this)}
   />

#1箭头函数

因为箭头函数不会创建新的作用域,其上下文是语义上的(lexically)上下文。所以在绑定事件处理器时,直接使用剪头函数是很方便的一种规避方法。

<input
      type="checkbox"
      checked={this.state.isChecked}
-       onChange={this.toggleCheck}
+      onChange={() => this.toggleCheck()}
     />

#2将类的方法改成属性

如果将这个处理器作为该组件的一个属性,这个属性作为事件的处理器以箭头函数的形式存在,执行的时候也是能正常获取到上下文的。

- toggleCheck() {
+ toggleCheck = () => {
  this.setState(currentState => {
   return {
    isChecked: !currentState.isChecked
   };
  });
 }

总结

React 组件中,其实跟 React 没多大关系,传递事件处理器,或方法作为回调时,其上下文会丢失。为了修复,我们需要显式地给这个方法绑定一下上下文。除了常用的在构造器中进行外,还可通过箭头函数,公有属性等方式来避免冗余的绑定语句。

Javascript 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JS交换变量的方法
Jan 21 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
微信小程序App生命周期详解
Jan 31 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 #Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 #Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 #Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 #Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 #Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 #Javascript
You might like
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php简单复制文件的方法
2016/05/09 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
python学习数据结构实例代码
2015/05/11 Python
Python守护进程用法实例分析
2015/06/04 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python list多级排序知识点总结
2019/10/23 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python中pyplot基础图标函数整理
2020/11/10 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
三分钟演讲稿事例
2014/03/03 职场文书
给校长的建议书200字
2014/05/16 职场文书
小学安全教育主题班会
2015/08/12 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android