脚本宝典收集整理的这篇文章主要介绍了react-bind-once 了解一下?,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
react-bind-once
react-bind-once是一个将JSX事件句柄的this自动绑定到组件实例的工具
你还在构造函数里一一手动绑定吗?
试试react-bind-once
GitHub
npm
安装
$ npm install react-bind-once --save
使用
import React, { Component } from 'react';
import bindOnce from 'react-bind-once';
class App extends Component {
constructor(props) {
super(props);
bindOnce(this);
}
handleClick() {
console.log('clicked');
}
render() {
return (
<button onClick={this.handleClick}>Click</button>
);
}
}
export default App;
背景
绑定到JSX上的事件句柄,最终会变成事件监听的回调,而回调是指向全局作用域的
而我们需要事件句柄指向组件实例,因为里面可能会访问组件实例的属性
使JSX事件句柄的this指向组件实例的方式有四种:
在JSX里面直接绑定this
这样的问题是每次触发事件都要重新绑定一次
handleClick() {
console.log('clicked');
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>Click</button>
);
}
包裹一层箭头函数
箭头函数没有this,会保留上级上下文,所以会指向组件实例
这样的问题是每次触发事件都会创建一个箭头函数
handleClick() {
console.log('clicked');
}
render() {
return (
<button onClick={() => this.handleClick()}>Click</button>
);
}
在构造函数里手动绑定,这是React官方推荐的方式
但是每一个事件句柄都要在构造函数手动绑定,很麻烦
而且这样做的后果就是方法会同时存在于实例和原型上
等号右边的this.handleClick
是从原型上获得的
但是等号左边,程序会以为你想赋值给实例
所以实例上有一份该方法,原型上也有一份该方法
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('clicked');
}
render() {
return (
<button onClick={this.handleClick}>Click</button>
);
}
方法直接写在实例上
这种方式兼具性能和优雅
但是也有问题,每次实例化都会在实例上复制一份,违背了继承的规范
而且必须要写成箭头函数,如果写成普通函数,this仍然指向undefined
handleClick = () => {
console.log('clicked');
}
render() {
return (
<button onClick={this.handleClick}>Click</button>
);
}
利益
使用react-bind-once
会自动帮你把在????原型????上的方法绑定this到组件实例
只需要在constructor
上执行一次bindOnce(this)
即可,就像它的名字描述的一样
有些方法不是事件句柄不也自动绑定了么?
是的,对于这样一个足够简单的工具,配置项完全是多余的
性能最优,足够简单
License
以上是脚本宝典为你收集整理的react-bind-once 了解一下?全部内容,希望文章能够帮你解决react-bind-once 了解一下?所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。