基於React版本16 4的原始碼解析(一)

2021-09-13 11:48:21 字數 3145 閱讀 1396

本次分析的原始碼採用的是16.4.1的版本

react.children
提供了處理 this.props.children 的工具集:

我們先來看看mapchildren做了什麼事情

即當children為空時,返回null;

不為null時呼叫mapintowithkeyprefixinternal,最終返回乙個result陣列.

這裡說一下,可以通過傳入的func對所有子元件進行操作,具體使用方法看下圖引數

通過配合cloneelement的例子:

class radiogroup extends component 

renderchildren(props) )

return child})}

render() )}

}

foreach、count、toarray我們先不看,先看下only

看注釋就能明白了

這個函式會返回第乙個children,同時通過isvalidelement判斷是不是唯一的乙個,若不是會報錯

因為若只有乙個那一定是乙個object物件,否則為乙個陣列

所以可以通過判斷是否為children是不是乙個object物件

我們來看下函式驗證一下

果然有個一判斷是否為object的條件,剩下兩個是判斷是否為null和$$typeof是否為element

react.createref
照舊看下原始碼

這裡發現用了object.seal方法來封閉了refobject,即阻止新增新屬性並將所有現有屬性標記為不可配置。當前屬性的值只要可寫就可以改變,這裡說下不可變(immutable)物件的幾個好處:

createref是react 16.3 發布的方法

同時還有乙個用於高階元件的forwardref

基本原理是通過劫持ref並且將之轉換成prop實現的

具體使用如下

class hoc extends react.component

render() = this.props;}}

return react.forwardref((props, ref) => );;

}class child extends react.component

render()

}const logprops = hoc(child);

class father extends react.component

componentdidmount()

render()}

react.component 和 react.purecomponent
這裡是component

這裡是purecomponent

這裡是componentdummy

這裡發現setstateforceupdate方法掛在component下,通過乙個componentdummy的「偽元件」來當作中介,使purecomponent也能訪問到setstate 和 forceupdate方法。

細心的可能發現這裡有個objectassign方法,這個方法把component的原型跟purecomponent的原型合併了,也就是說purecomponent和component共用了乙個原型

這裡的shouldusenative()是對原生的assgin方法進行相容性判斷,我把原始碼貼出來,有興趣的可以看看

createfactory: createfactorywithvalidation

createelement: createelementwithvalidation
在最後我們可以看到有乙個判斷type === react_fragment_type,這個react_fragment_type是乙個可以包裹碎片化元素的元件

react.fragment包裹碎片化的元件,可以寫作

<>

...但可能有的編譯器不支援,最好寫作

...

看到現在都沒發現render方法的蹤影,原始碼還沒讀完......

ConcurrentHahMap 基於原始碼解析

目錄 1 簡單總結 2 jdk1.7 segments hashentry陣列 鍊錶解析 3 jdk1.8 雜湊表 紅黑樹 cas 解析 參考 如下圖所示,segments繼承了可重入鎖reentrantlock,每個片段有乙個鎖,叫做 分段鎖 1 segment 分段鎖 concurrenthas...

基於PHP MYSQL的成績查詢系統(含原始碼)

獲取專案原始檔,聯絡q 1415736481,可指導畢設,課設 成績查詢系統文件 我們做的是成績查詢系統,有教師管理系統和學生查系統。在教師管理系統中的功能如下 插入學生成績。查詢學生成績。修改學生成績。註冊新生。修改自己登入密碼。可以聯絡教務處負責人。登入學校 學生查詢系統的功能如下 查詢自己的成...

基於PHP MYSQL的成績查詢系統(含原始碼)

獲取專案原始檔,聯絡q 1415736481,可指導畢設,課設 成績查詢系統文件 我們做的是成績查詢系統,有教師管理系統和學生查系統。在教師管理系統中的功能如下 插入學生成績。查詢學生成績。修改學生成績。註冊新生。修改自己登入密碼。可以聯絡教務處負責人。登入學校 學生查詢系統的功能如下 查詢自己的成...