欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解React中的this指向

 更新時間:2021年04月26日 08:51:08   作者:小林別鬧  
這篇文章主要介紹了React中的this指向的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下

打算記流水賬一般細(xì)數(shù)一下 React 中的 this 指向問題,具體流程按事件三要素:起因,經(jīng)過,結(jié)果。哈哈哈哈哈!

起因:

眾所周知,React 的設(shè)計是響應(yīng)式的,使用者無需操縱 DOM,操縱數(shù)據(jù),頁面就會渲染更新。

數(shù)據(jù)一變就更新,是更新所有的 DOM 嗎?當(dāng)然不是,哪些變了就重新渲染哪些。那就要對數(shù)據(jù)變化前后的 DOM 進行比較。直接對比真實 DOM 嗎?這樣性能會很低,React 比較的是虛擬 DOM,虛擬 DOM 也是對象,只不過相較真實 DOM而言,少了很多屬性,更“輕”。

如何寫虛擬 DOM 呢?原生JS我們可以使用 document.createElement() 方法,創(chuàng)建節(jié)點。React 中也可以通過 React.createElement(component, props, children),但是呢這種寫法遇見多層嵌套,就能讓人眼花繚亂。于是 JSX “橫空出世”,JSX 其實就是,React.createElement 的語法糖,但是我們用起來更加方便,可以直接寫成 <p id="test">hello</p> 這種形式。

但是呢問題又又來了!JSX 語法是不被 webpack 識別的,webpack 默認(rèn)只能處理 .js 后綴名的文件,所以需要借助 Babel 這個 JavaScript 編譯器,而 babel 開啟了嚴(yán)格模式 **

import React, { Component } from 'react'

export default class index extends Component {
    // speak(){
    //     console.log(this)//輸出undefined
    // }
    speak = () => console.log(this)//輸出該組件
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}

this 本質(zhì)上就是指向它的調(diào)用者,this 是在函數(shù)運行時才綁定,JS 里邊普通函數(shù)都是 window 調(diào)用的,所以指向 window,開啟了嚴(yán)格模式之后是 undefined。

(function(){
    console.log(this)//window
})()

在 JSX 中傳遞的事件不是一個字符串(在原生 JS 的中監(jiān)聽事件,采用的是回調(diào)函數(shù)的形式,在Vue中給監(jiān)聽事件傳遞的是字符串變量),而是一個函數(shù)(如上面的:onClick={this.speak}),此時onClick即是中間變量,最終是由React調(diào)用該函數(shù),而因為開啟了嚴(yán)格模式的緣故,this 是undefined,所以處理函數(shù)中的this指向會丟失。

經(jīng)過:

事實上我們需要的是 this 指向當(dāng)前實例化對象,無疑會使代碼編寫方便很多。類式組件里邊有兩地方的this恰好指向當(dāng)前實例化對象。

1.構(gòu)造函數(shù)

類式組件里面的構(gòu)造器里面的this是指向?qū)嵗龑ο蟮模@是 ES6 類的特性,

眾所周知 Javascript 里面是沒有像 C++,JAVA 里面的的類的概念,ES6 類的實現(xiàn)也是基于原型鏈來實現(xiàn)的,

在 ES6 以前實例化一個對象應(yīng)該這樣:

function Animal(name, age) {
  this.name = name
  this.age = age
}
Animal.prototype.say = function () {
  console.log(this.name)
}
const Dog = new Animal('dog', 3)
Dog.say()  //會在控制臺打印出dog

其中的 new 運算符,先產(chǎn)生了一個空對象 {},然后生成一個 this 指針,將 this 指針指向這個空對象;運行構(gòu)造函數(shù)時,就相當(dāng)于{}.name=dog,{}.age=3一樣的為這個對象動態(tài)添加屬性。最后將這個生成好的對象付給 Dog,

當(dāng)我們使用 ES6 的 class 來聲明上面這個類的話,代碼如下:

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}
const Dog = new Animal('dog', 3)
Dog.say()  //會在控制臺打印出dog

類實現(xiàn)和上面應(yīng)該大差不差,所以this是指向?qū)嵗龑ο蟮摹?/p>

2.render 函數(shù)

render 函數(shù)里面的 this,也是指向?qū)嵗?。為啥呢?/p>

首先 render 方法是在類式組件的原型上邊的,React發(fā)現(xiàn)組件是使用類定義的時候,后邊就會 new 出來該類的實例,注意這個實例是 React 幫你 new 出來的,隨后實例調(diào)用 render 方法,將虛擬 DOM 轉(zhuǎn)換為真實 DOM,所以 render 中的this 就是指向?qū)嵗吘故撬{(diào)用的嘛!,類似的呢,render 是一個生命周期鉤子,那其他的生命周期鉤子里面的 this也是指向?qū)嵗M件的。

3.bind 和箭頭函數(shù)

解決 this 問題呢,要有兩個知識儲

(1)bind
call apply bind 都是定義在函數(shù)原型上邊的,用來改變函數(shù) this 指向,傳入的第一個參數(shù)是 this,后面的參數(shù)就是fun1的參數(shù)

區(qū)別:

  • call 和 bind 傳給調(diào)用的函數(shù)是可以傳多個 apply 則是將參數(shù)放進一個數(shù)組
  • call 和 apply 返回立即執(zhí)行函數(shù),bind 返回新的函數(shù),bind()() 也是立即執(zhí)行
  • 使用 bind 綁定 this 后,該函數(shù)里面的 this 不能變化了,不論是誰調(diào)用
let aa = {
    fun1: function(a,b){
        console.log(this)
        console.log(a-b);
    }
}        
let bb = {
    fun2: function(a,b){
        console.log(this)
        console.log(a+b);
    }
}

aa.fun1.call(bb,11,22);//bb-11
bb.fun2.apply(aa,[11,22]);//aa 33
aa.fun1.bind(bb,11,22)();//bb -11

(2)箭頭函數(shù)
箭頭函數(shù):箭頭函數(shù)并不會創(chuàng)建自己的執(zhí)行上下文,所以箭頭函數(shù)中的this都是外層的this,會向外作用域中,一層層查找this,直到有 this 的定義

const A = {
    arrow:() =>{
        console.log(this)//window
    },
    func:function(){
        this.arrow()//window
        console.log(this)//A
        setTimeout(() => {
            console.log(this)//A
        });
    }
}
A.arrow()
A.func()

結(jié)果:

解決方法俺會兩,嘿嘿!

方法一:在構(gòu)造函數(shù)中使用bind

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super()
        this.speak = this.speak.bind(this)
        /*解決類中的this問題:this.speak = this.speak.bind(this),構(gòu)造器里面的this默認(rèn)指向?qū)嵗龑ο螅?
      實例對象通過原型鏈在類的原型上找著fnc函數(shù),通過bind函數(shù)將其this指向改為實例對象,并返回一個新的函數(shù)
      再將這個新的函數(shù)給實例,并取名為fnc*/
    }
    speak(){
        console.log(this)//輸出當(dāng)前實例對象
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}

方法二:將箭頭函數(shù)賦值給類的屬性

import React, { Component } from 'react'

export default class index extends Component {
    speak = () =>{
        console.log(this)
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}//需要傳參的話,可以使用函數(shù)柯里化的思想

注意:性能存在差異

使用箭頭函數(shù)來解決性能會比較低,因為箭頭函數(shù)不是方法,它們是匿名函數(shù)表達(dá)式,所以將它們添加到類中的唯一方法是賦值給屬性。前面介紹ES6的類的時候可以看出來,ES 類以完全不同的方式處理方法和屬性

方法被添加到類的原型中,而不是每個實例定義一次。

類屬性語法是為相同的屬性分配給每一個實例的語法糖,實際上會在 constructor里面這樣實現(xiàn):

    constructor(){
        super()
        this.speak = () => {console.log(this)}
    }

這意味著新實例被創(chuàng)建時,函數(shù)就會被重新定義,丟失了JS實例共享原型方法的優(yōu)勢。而方法一,只是在生成實例時多了一步 bind 操作,在效率與內(nèi)存占用上都有極大的優(yōu)勢

以上就是詳解React中的this指向的詳細(xì)內(nèi)容,更多關(guān)于React中的this指向的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • es6在react中的應(yīng)用代碼解析

    es6在react中的應(yīng)用代碼解析

    這篇文章主要介紹了es6在react中的應(yīng)用代碼解析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-11-11
  • 關(guān)于React中setState同步或異步問題的理解

    關(guān)于React中setState同步或異步問題的理解

    相信很多小伙伴們都一直在疑惑,setState 到底是同步還是異步。本文就詳細(xì)的介紹一下React中setState同步或異步問題,感興趣的可以了解一下
    2021-11-11
  • 詳解React自定義Hook

    詳解React自定義Hook

    在React項目中,我們經(jīng)常會使用到React自帶的幾個內(nèi)置Hooks,如 useState,useContext和useEffect。雖然在React中找不到這些 Hooks,但React提供了非常靈活的方式讓你為自己的需求來創(chuàng)建自己的自定義Hooks,想了解更多的,歡迎閱讀本文
    2023-04-04
  • React高階組件的使用淺析

    React高階組件的使用淺析

    高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧
    2022-08-08
  • 詳解如何在React組件“外”使用父組件的Props

    詳解如何在React組件“外”使用父組件的Props

    這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • React Native自定義控件底部抽屜菜單的示例

    React Native自定義控件底部抽屜菜單的示例

    本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • React根據(jù)當(dāng)前頁面路由進行自動高亮示例代碼

    React根據(jù)當(dāng)前頁面路由進行自動高亮示例代碼

    要根據(jù)當(dāng)前頁面路由自動高亮頂部菜單項,可以使用 React Router 的 useLocation 鉤子來獲取當(dāng)前路徑,并根據(jù)路徑動態(tài)設(shè)置菜單項的高亮效果,本文給大家介紹了一個完整的示例,展示如何根據(jù)當(dāng)前頁面路由自動高亮頂部菜單項,需要的朋友可以參考下
    2024-07-07
  • React封裝彈出框組件的方法

    React封裝彈出框組件的方法

    這篇文章主要為大家詳細(xì)介紹了React封裝彈出框組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考

    基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考

    這篇文章主要為大家詳細(xì)介紹了基于React.js實現(xiàn)原生js拖拽效果,繼而引發(fā)的一系列思考,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-03-03
  • React受控組件與非受控組件深入講解

    React受控組件與非受控組件深入講解

    具體來說這是一種react非受控組件,其狀態(tài)是在input的react內(nèi)部控制,不受調(diào)用者控制??梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識,感興趣的朋友一起看看吧
    2022-12-12

最新評論