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