react-bind-once 了解一下？

zhangke3016 发布于2019-08-22 17:22 / 1167人阅读

摘要：是一个将事件句柄的自动绑定到组件实例的工具你还在构造函数里一一手动绑定吗试试安装使用背景绑定到上的事件句柄，最终会变成事件监听的回调，而回调是指向全局作用域的而我们需要事件句柄指向组件实例，因为里面可能会访问组件实例

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 (
            
        );
    }
}

export default App;

背景

绑定到JSX上的事件句柄，最终会变成事件监听的回调，而回调是指向全局作用域的

而我们需要事件句柄指向组件实例，因为里面可能会访问组件实例的属性

使JSX事件句柄的this指向组件实例的方式有四种：

在JSX里面直接绑定this

这样的问题是每次触发事件都要重新绑定一次

handleClick() {
    console.log("clicked");
}

render() {
    return (
        
    );
}

包裹一层箭头函数

箭头函数没有this，会保留上级上下文，所以会指向组件实例

这样的问题是每次触发事件都会创建一个箭头函数

handleClick() {
    console.log("clicked");
}

render() {
    return (
        
    );
}

在构造函数里手动绑定，这是React官方推荐的方式

但是每一个事件句柄都要在构造函数手动绑定，很麻烦

而且这样做的后果就是方法会同时存在于实例和原型上

等号右边的this.handleClick是从原型上获得的

但是等号左边，程序会以为你想赋值给实例

所以实例上有一份该方法，原型上也有一份该方法

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    console.log("clicked");
}

render() {
    return (
        
    );
}

方法直接写在实例上

这种方式兼具性能和优雅

但是也有问题，每次实例化都会在实例上复制一份，违背了继承的规范

而且必须要写成箭头函数，如果写成普通函数，this仍然指向undefined

handleClick = () => {
    console.log("clicked");
}

render() {
    return (
        
    );
}

利益

使用react-bind-once会自动帮你把在

私有云混合云闪一下介绍一下整理一下测试一下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95111.html

面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

ACb0y 2019-08-21 11:49 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

wawor4827 2019-08-05 11:50 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

wuyumin 2019-08-29 13:07 评论0 收藏0
2018年腾讯前端一面总结（面向2019届学生）

摘要：前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性，也有在等待电话的时候的心情的忐忑。背景我是一名大三学生，大一...

Kosmos 2019-08-22 15:17 评论0 收藏0
一个JAVA渣渣的校招成长记，附BAT美团网易等20家面经总结

摘要：作者重庆森林链接来源牛客网整个三月份通过牛客网和网友分享的经验学到了很多东西，现在反馈一下我的面试经历，希望对同学们有帮助。个人情况大三本方向渣硕，经过实验室学长内推，于三月底完成面试。校招是实力和运气的结合，缺一不可。欢迎关注我的微信公众号：Java面试通关手册（坚持原创，分享美文，分享各种Java学习资源，面试题，以及企业级Java实战项目回复关键字免费领取）：showImg(h...

mozillazg 2019-08-15 15:15 评论0 收藏0