成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react-bind-once 了解一下？

zhangke3016 / 1290人閱讀

摘要：是一個(gè)將事件句柄的自動(dòng)綁定到組件實(shí)例的工具你還在構(gòu)造函數(shù)里一一手動(dòng)綁定嗎試試安裝使用背景綁定到上的事件句柄，最終會(huì)變成事件監(jiān)聽的回調(diào)，而回調(diào)是指向全局作用域的而我們需要事件句柄指向組件實(shí)例，因?yàn)槔锩婵赡軙?huì)訪問組件實(shí)例

react-bind-once 
react-bind-once是一個(gè)將JSX事件句柄的this自動(dòng)綁定到組件實(shí)例的工具
你還在構(gòu)造函數(shù)里一一手動(dòng)綁定嗎？
試試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上的事件句柄，最終會(huì)變成事件監(jiān)聽的回調(diào)，而回調(diào)是指向全局作用域的

而我們需要事件句柄指向組件實(shí)例，因?yàn)槔锩婵赡軙?huì)訪問組件實(shí)例的屬性

使JSX事件句柄的this指向組件實(shí)例的方式有四種：

在JSX里面直接綁定this

這樣的問題是每次觸發(fā)事件都要重新綁定一次

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

render() {
    return (
        
    );
}
包裹一層箭頭函數(shù)

箭頭函數(shù)沒有this，會(huì)保留上級(jí)上下文，所以會(huì)指向組件實(shí)例

這樣的問題是每次觸發(fā)事件都會(huì)創(chuàng)建一個(gè)箭頭函數(shù)

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

render() {
    return (
        
    );
}
在構(gòu)造函數(shù)里手動(dòng)綁定，這是React官方推薦的方式

但是每一個(gè)事件句柄都要在構(gòu)造函數(shù)手動(dòng)綁定，很麻煩

而且這樣做的后果就是方法會(huì)同時(shí)存在于實(shí)例和原型上

等號(hào)右邊的this.handleClick是從原型上獲得的

但是等號(hào)左邊，程序會(huì)以為你想賦值給實(shí)例

所以實(shí)例上有一份該方法，原型上也有一份該方法

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

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

render() {
    return (
        
    );
}
方法直接寫在實(shí)例上

這種方式兼具性能和優(yōu)雅

但是也有問題，每次實(shí)例化都會(huì)在實(shí)例上復(fù)制一份，違背了繼承的規(guī)范

而且必須要寫成箭頭函數(shù)，如果寫成普通函數(shù)，this仍然指向undefined

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

render() {
    return (
        
    );
}
利益

使用react-bind-once會(huì)自動(dòng)幫你把在

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95111.html

相關(guān)文章

  • 面試分享：一年經(jīng)驗(yàn)初探阿里巴巴前端社招

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

    ACb0y 評(píng)論0 收藏0

  • 面試分享：一年經(jīng)驗(yàn)初探阿里巴巴前端社招

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

    wuyumin 評(píng)論0 收藏0

  • 2018年騰訊前端一面總結(jié)（面向2019屆學(xué)生）

    摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預(yù)定時(shí)間，這也給了我們這些面試者去準(zhǔn)備的時(shí)間。其實(shí)閉包也就是指有權(quán)訪問另一個(gè)函數(shù)作用域的函數(shù)而已。常用的創(chuàng)建閉包的方法就是在函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。 前言 騰訊一面，相比阿里一面來說，騰訊一面先給打電話預(yù)定時(shí)間，這也給了我們這些面試者去準(zhǔn)備的時(shí)間。但是也正是因?yàn)檫@種確定性，也有在等待電話的時(shí)候的心情的忐忑。 背景 我是一名大三學(xué)生，大一...

    Kosmos 評(píng)論0 收藏0

  • 一個(gè)JAVA渣渣的校招成長(zhǎng)記，附BAT美團(tuán)網(wǎng)易等20家面經(jīng)總結(jié)

    摘要：作者重慶森林鏈接來源?？途W(wǎng)整個(gè)三月份通過牛客網(wǎng)和網(wǎng)友分享的經(jīng)驗(yàn)學(xué)到了很多東西，現(xiàn)在反饋一下我的面試經(jīng)歷，希望對(duì)同學(xué)們有幫助。個(gè)人情況大三本方向渣碩，經(jīng)過實(shí)驗(yàn)室學(xué)長(zhǎng)內(nèi)推，于三月底完成面試。校招是實(shí)力和運(yùn)氣的結(jié)合，缺一不可。 歡迎關(guān)注我的微信公眾號(hào)：Java面試通關(guān)手冊(cè)（堅(jiān)持原創(chuàng)，分享美文，分享各種Java學(xué)習(xí)資源，面試題，以及企業(yè)級(jí)Java實(shí)戰(zhàn)項(xiàng)目回復(fù)關(guān)鍵字免費(fèi)領(lǐng)取）：showImg(h...

    mozillazg 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<