react-bind-once 了解一下？

zhangke3016 發布于2019-08-22 17:22 / 1289人閱讀

摘要：是一個將事件句柄的自動綁定到組件實例的工具你還在構造函數里一一手動綁定嗎試試安裝使用背景綁定到上的事件句柄，最終會變成事件監聽的回調，而回調是指向全局作用域的而我們需要事件句柄指向組件實例，因為里面可能會訪問組件實例

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會自動幫你把在

GPU云服務器云服務器閃一下介紹一下整理一下測試一下

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95111.html

面試分享：一年經驗初探阿里巴巴前端社招

摘要：三輪技術面上一輪發揮感覺沒前兩輪發揮好，所以還是有點不自信的，沒想到第三天后，就來電話了，通知我去阿里園區面試。一般阿里社招都是招3-5年的P6+高級工程師，當初自己一年經驗也沒有想過有這個面試機會。雖然沒想著換工作，但是經常關注一些招聘網站的信息，某一天，在某boss上有個人找我，叫我發一下簡歷，我一看是阿里的某技術專家，雖然之前也有阿里的在某boss上給我要簡歷，但是我深知自己...

ACb0y 2019-08-21 11:49 評論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