深入淺出React(四)(元件中的this)

2021-08-20 11:01:43 字數 2322 閱讀 6416

import react from 'react';

const str = '被呼叫,this指向:';

constructor()

//測試函式

handler() `,this);

}render()`,this);

return(

單擊列印函式handler中this的指向)}

}

結果如圖:

這段**執行,可以看到student.func()列印了student物件,因為此時this指向student物件;而studentfunc()列印了window,因為此時由window呼叫的,this指向window。

import react from 'react';

const str = '被呼叫,this指向:';

constructor()

componentdidmount() `,this);

}componentwillreceiveprops() `,this);

}shouldcomponentupdate() `,this);

return true;

}componentdidupdate() `,this);

}componentwillunmount() `,this);

}//測試函式

handler() `,this);

}render()`,this);

this.handler();

window.handler = this.handler;

window.handler();

return(

單擊列印函式handler中this的指向)}

可以看到:

render中window.handler() -> window物件;

onclick = -> undefined

繼續使用事件觸發元件的裝載、更新和解除安裝過程:

/index.js:

import react from 'react'

import from 'react-dom'

const root=document.getelementbyid('root')

console.log("首次掛載");

window.rendercomponent = () =>

window.setstate = () => );

}window.unmountcomponentatnode = () =>

掛載更新

解除安裝

render()以及componentdidmount()、componentdidupdate()等其他生命週期函式中的this都是元件例項;this.handler()的呼叫者,為render()中的this,所以列印元件例項;window.handler()的「呼叫者」,為window,所以列印window;onclick=的「呼叫者」為事件繫結,**多樣,這裡列印undefined。

import react from 'react';

const str = '被呼叫,this指向:';

constructor()

//測試函式

handler() `,this);

}render()`,this);

this.handler();

window.handler = this.handler;

window.handler();

return(

單擊列印函式handler中this的指向)}

}

不積跬步,何以行千里

持續載入中.....

收藏、關注獲取最新更新內容

深入淺出React的生命週期

react中的生命週期就是元件的生命週期 組建本質就是狀態機,輸入確定,輸出一定確定。狀態發生轉化時會促發不同的鉤子函式,從而讓開發者有機會作出響應 模擬事件來理解狀態 元件的生命週期分為三個階段 初始化 執行中 銷毀階段。每個階段可以呼叫不同的鉤子函式。不同生命週期內可以自定義的鉤子函式。初始化 ...

深入淺出Google ProtoBuf中的編碼規則

在開始本部分的內容之前,首先有必要介紹兩個基本概念,乙個是序列化,乙個是反序列化。這兩個概念的定義在網上搜一下都很多的,但大多都講得比較晦澀,不太好理解,在這裡我會用比較通俗的文本來解釋,盡可能讓讀都朋友們一讀就明白是怎麼回事 序列化 是指將結構化的資料按一定的編碼規範轉成指定格式的過程 反序列化 ...

深入淺出Google ProtoBuf中的編碼規則

在開始本部分的內容之前,首先有必要介紹兩個基本概念,乙個是序列化,乙個是反序列化。這兩個概念的定義在網上搜一下都很多的,但大多都講得比較晦澀,不太好理解,在這裡我會用比較通俗的文本來解釋,盡可能讓讀都朋友們一讀就明白是怎麼回事 序列化 是指將結構化的資料按一定的編碼規範轉成指定格式的過程 反序列化 ...