react關于事件綁定this的四種方式

張利勇發布于2019-08-22 15:12 / 1534人閱讀

摘要：在組件中，每個方法的上下文都會指向該組件的實例，即自動綁定為當前組件而且還會對這種引用進行緩存，以達到和內存的最大化。

在react組件中，每個方法的上下文都會指向該組件的實例，即自動綁定this為當前組件,而且react還會對這種引用進行緩存，以達到cpu和內存的最大化。在使用了es6 class或者純函數時，這種自動綁定就不復存在了，我們需要手動實現this的綁定
以下是幾種綁定的方法:

bind方法
直接綁定是bind（this）來綁定，但是這樣帶來的問題是每一次渲染是都會重新綁定一次bind；

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    del(){
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

構造函數內綁定
在構造函數 constructor 內綁定this，好處是僅需要綁定一次，避免每次渲染時都要重新綁定，函數在別處復用時也無需再次綁定

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
        this.del=this.del.bind(this)
    }

    del(){
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

::不能傳參
如果不傳參數使用雙冒號也是可以

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }

    del(){
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

箭頭函數綁定
箭頭函數不僅是函數的"語法糖"，它還自動綁定了定義此函數作用域的this，因為我們不需要再對它們進行bind方法：

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };

    }

    del=()=>{
        console.log("del")
    }

    render() {
        return (
            
                
            
        );
    }
}

以上幾種方法都可以實現this綁定，使用那種各自的習慣；
希望大家喜歡，也希望大家指點錯誤，也可以加入qq群439667347，大家一起討論，一起進步，后續更新中...

云服務器 GPU云服務器對數據倉庫分析的四種方式 activity的四種狀態數據遷移的四種方法 java中線程的四種狀態

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

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

react創建組建的四種方式

摘要：原由寫這篇文章主要是為了增強自己的記憶，同時也是為了分享一下我們常用的創建組建的方法，主要是四種，啟發來自于不知的博客呀，有興趣的人可以去看看他的博客敘述我們在用的時候考慮最多的其實就是如何策劃組建的劃分，組建的嵌套，能夠做到更省時省力。原由：寫這篇文章主要是為了增強自己的記憶，同時也是為了分享一下我們常用的創建組建的方法，主要是四種(createClass, component, ...

XanaHopper 2019-08-20 16:06 評論0 收藏0
React基礎再回顧

摘要：方法一必須在這里綁定方法二使用屬性初始化器語法需要開啟以上方法三在使用時綁定方法四在回調函數中使用箭頭函數渲染的時候都會創建一個不同的回調函數。然而如果這個回調函數作為一個屬性值傳入低階組件，這些組件可能會進行額外的重新渲染。從16年夏天初學React，到17年正式投入到工作中使用，直到現在V16.2發版，React發生了巨大的變化，最近在工作中使用時遇到很多基礎不是非常清晰，借此再...

2450184176 2019-08-22 15:16 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
玩轉 React（六）- 處理事件

摘要：綁定事件處理函數指向的四中方式以及他們的優缺點。內部自己實現了一套高效的事件機制，為了提高框架的性能，通過事件冒泡，只在節點上注冊原生的事件，內部自己管理所有組件的事件處理函數，以及事件的冒泡捕獲。前面的文章介紹了 React 的 JSX 語法、組件的創建方式、組件的屬性、組件的內部狀態以及組件的生命周期。另外，還順帶說了各個知識點要重點注意的事情，以及我在項目實踐中的一些經驗。如果...

Astrian 2019-08-21 17:28 評論0 收藏0
react入門學習筆記（一）

摘要：選擇的主要原因大概是因為該框架出現較早，感覺上會相對成熟，日后學習中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學習，我按照我學習中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發。這兩天得空，特意來折騰了以下時下火熱的前端框架react，至于為什么選react,作為一個初學者react和vue在技術上的優劣我無權評論，也就不妄加評論了...

leon 2019-08-20 18:01 評論0 收藏0