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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
js微信分享实现代码
Oct 11 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 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
IStream与TStream之间的相互转换
2008/08/01 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
带你了解python装饰器
2017/06/15 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python tkinter三种布局实例详解
2020/01/06 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
密封类可以有虚函数吗
2014/08/11 面试题
党员个人公开承诺书
2014/08/29 职场文书
写给父母的感谢信
2015/01/22 职场文书
师德师风个人总结
2015/02/06 职场文书
护士求职自荐信
2015/03/25 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python