国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

3、React組件中的this

Cheng_Gang / 1229人閱讀

摘要:組件的是什么通過編寫一個簡單組件,并渲染出來,分別打印出自定義函數和中的被調用,指向測試函數單擊打印函數中的指向單擊結果如圖可以看到,函數中的指向了組件實例,而函數中的則為,這是為何函數中的我們都知道函數中的不是在函數聲明的時候定義的,而是

React組件的this是什么

通過編寫一個簡單組件,并渲染出來,分別打印出自定義函數和render中的this:

import React from "react";

const STR = "被調用,this指向:";

class App extends React.Component{
    constructor(){
        super()
    }

    //測試函數
    handler() {
        console.log(`handler ${STR}`,this);
    }

    render(){

        console.log(`render ${STR}`,this);
        return(
            

hello World

) } } export default App

結果如圖:

可以看到,render函數中的this指向了組件實例,而handler()函數中的this則為undefined,這是為何?

JavaScript函數中的this

我們都知道JavaScript函數中的this不是在函數聲明的時候定義的,而是在函數調用(即運行)的時候定義的

var student = {
    func: function() {
        console.log(this);
    };
};

student.func();
var studentFunc = student.func;
studentFunc();

這段代碼運行,可以看到student.func()打印了student對象,因為此時this指向student對象;而studentFunc()打印了window,因為此時由window調用的,this指向window。

這段代碼形象的驗證了,JavaScript函數中的this不是在函數聲明的時候,而是在函數運行的時候定義的;

同樣,React組件也遵循JavaScript的這種特性,所以組件方法的‘調用者’不同會導致this的不同(這里的 “調用者” 指的是函數執行時的當前對象

“調用者”不同導致this不同

測試:分別在組件自帶的生命周期函數以及自定義函數中打印this,并在render()方法中分別使用this.handler(),window.handler(),onCilck={this.handler}這三種方法調用handler():

/App.jsx
import React from "react";


const STR = "被調用,this指向:";

class App extends React.Component{
    constructor(){
        super()
    }

    ComponentDidMount() {
        console.log(`ComponentDidMount ${STR}`,this);
    }

    componentWillReceiveProps() {
        console.log(`componentWillReceiveProps ${STR}`,this);
    }

    shouldComponentUpdate() {
        console.log(`shouldComponentUpdate ${STR}`,this);
        return true;
    }

    componentDidUpdate() {
        console.log(`componentDidUpdate ${STR}`,this);
    }

    componentWillUnmount() {
        console.log(`componentWillUnmount ${STR}`,this);
    }


    //測試函數
    handler() {
        console.log(`handler ${STR}`,this);
    }

    render(){
        console.log(`render ${STR}`,this);

        this.handler();
        window.handler = this.handler;
        window.handler();

        return(

            

hello World

) } } export default App

可以看到:

render中this -> 組件實例App對象;

render中this.handler() -> 組件實例App對象 ;

render中window.handler() -> window對象;

onClick ={this.handler} -> undefined

繼續使用事件觸發組件的裝載、更新和卸載過程:

/index.js
import React from "react"
import {render,unmountComponentAtNode} from "react-dom"

import App from "./App.jsx"


const root=document.getElementById("root")

console.log("首次掛載");
let instance = render(,root);

window.renderComponent = () => {
    console.log("掛載");
    instance = render(,root);
}

window.setState = () => {
    console.log("更新");
    instance.setState({foo: "bar"});
}


window.unmountComponentAtNode = () => {
    console.log("卸載");
    unmountComponentAtNode(root);
}

使用三個按鈕觸發組件的裝載、更新和卸載過程:

/index.html



    react-this


    
    
    
    

運行程序,依次單擊“掛載”,綁定onClick={this.handler}“單擊”按鈕,“更新”和“卸載”按鈕結果如下:

1. render()以及componentDIdMount()、componentDIdUpdate()等其他生命周期函數中的this都是組件實例;
2. this.handler()的調用者,為render()中的this,所以打印組件實例;
3. window.handler()的“調用者”,為window,所以打印window;
4. onClick={this.handler}的“調用者”為事件綁定,來源多樣,這里打印undefined。
- 面對如此混亂的場景,如果我們想在onClick中調用自定義的組件方法,并在該方法中獲取組將實例,我們就得進行轉換上下文即綁定上下文:
自動綁定和手動綁定

React.createClass有一個內置的魔法,可以自動綁定所用的方法,使得其this指向組件的實例化對象,但是其他JavaScript類并沒有這種特性;

所以React團隊決定不再React組件類中實現自動綁定,把上下文轉換的自由權交給開發者;

所以我們通常在構造函數中綁定方法的this指向:

import React from "react";


const STR = "被調用,this指向:";

class App extends React.Component{
    constructor(){
        super();

        this.handler = this.handler.bind(this);
    }
//測試函數
    handler() {
        console.log(`handler ${STR}`,this);
    }

    render(){
        console.log(`render ${STR}`,this);

        this.handler();
        window.handler = this.handler;
        window.handler();

        return(

            

hello World

) } } export default App

將this.handler()綁定為組件實例后,this.handler()中的this就指向組將實例,即onClick={this.handler}打印出來的為組件實例;

總結:

React組件生命周期函數中的this指向組件實例;

自定義組件方法的this會因調用者不同而不同;

為了在組件的自定義方法中獲取組件實例,需要手動綁定this到組將實例。

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

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

相關文章

  • React入門看這篇就夠了

    摘要:背景介紹入門實例教程起源于的內部項目,因為該公司對市場上所有框架,都不滿意,就決定自己寫一套,用來架設的網站。做出來以后,發現這套東西很好用,就在年月開源了。也就是說,通過鉤子函 react - JSX React 背景介紹 React 入門實例教程 React 起源于 Facebook 的內部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套...

    luckyw 評論0 收藏0
  • React入門系列 - 3 state與props

    摘要:而主要被設計用于維持組件內部私有狀態。初始化初始化需要在中進行。對于的定義為請求修改某個數據,而的實現則是將對變量的修改放入一個修改隊列中,在一個循環之后進行批量更新結果深入點涉及的更新機制。推出了與版本之后推出來的就是為了解決這些問題的。 3.1 什么是state 我們要認識到,React中的組件其實是一個函數,所以state是函數內部的私有變量,外部其他組件或者方法都是無法直接訪問...

    henry14 評論0 收藏0
  • React 深入系列3:Props 和 State

    摘要:深入系列,深入講解了中的重點概念特性和模式等,旨在幫助大家加深對的理解,以及在項目中更加靈活地使用。下篇預告深入系列組件的生命周期我的新書進階之路已上市,請大家多多支持鏈接京東當當 React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深對React的理解,以及在項目中更加靈活地使用React。 React 的核心思想是組件化的思想,而React 組件的定...

    hiyayiji 評論0 收藏0
  • React精髓!一篇全概括(急速)

    摘要:即組件內部可以引用其他組件,如注意在中,組件必須返回單一的根元素,這也是為什么組件中需要用標簽包裹的原因。那么,這種情況下,為我們提供了生命周期的鉤子函數,方便我們進行使用。showImg(https://user-gold-cdn.xitu.io/2019/5/8/16a94b981baecfa7);一個人并不是生來要給打敗的,你盡可以把他消滅掉,可就是打不敗他。? ? ? showImg...

    daryl 評論0 收藏0
  • 深入React知識點整理(二)

    摘要:承接上文,深入知識點整理一使用也滿一年了,從剛剛會使用到逐漸探究其底層實現,以便學習幾招奇技淫巧從而在自己的代碼中使用,寫出高效的代碼。有限狀態機,表示有限個狀態以及在這些狀態之間的轉移和動作等行為的模型。 承接上文,深入React知識點整理(一)使用React也滿一年了,從剛剛會使用到逐漸探究其底層實現,以便學習幾招奇技淫巧從而在自己的代碼中使用,寫出高效的代碼。下面整理一些知識點,...

    villainhr 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<