深入淺出React（四）（元件中的this）

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