Posted 2021-04-13 code绉樺瘑鑺卞洯

瀵艰

React鐨勮櫄鎷?DOM鍜?Diff绠楁硶鏄?React鐨勯潪甯搁噸瑕佺殑鏍稿績鐗规€э紝杩欓儴鍒嗘簮鐮佷篃闈炲父澶嶆潅锛岀悊瑙ｈ繖閮ㄥ垎鐭ヨ瘑鐨勫師鐞嗗鏇存繁鍏ョ殑鎺屾彙 React鏄潪甯稿繀瑕佺殑銆?/p>

鏈潵鎯冲皢铏氭嫙 DOM鍜?Diff绠楁硶鏀惧埌涓€绡囨枃绔狅紝鍐欏畬铏氭嫙 DOM鍙戠幇鏂囩珷宸茬粡寰堥暱浜嗭紝鎵€浠ユ湰绡囧彧鍒嗘瀽铏氭嫙 DOM銆?/p>

鏈瘒鏂囩珷浠庢簮鐮佸嚭鍙戯紝鍒嗘瀽铏氭嫙 DOM鐨勬牳蹇冩覆鏌撳師鐞嗭紝浠ュ強 React瀵瑰畠鍋氱殑鎬ц兘浼樺寲鐐广€?/p>

璇村疄璇?React婧愮爜鐪熺殑寰堥毦璇火煒咃紝濡傛灉鏈瘒鏂囩珷甯姪鍒颁簡浣狅紝閭ｄ箞璇风粰涓禐馃憤鏀寔涓€涓嬪惂銆?/p>

鏈枃鐣ラ暱锛屼笅闈㈡槸鏈枃鐨勬€濈淮瀵煎浘锛屾偍鍙互浠庡ご寮€濮嬮槄璇伙紝涔熷彲浠ラ€夋嫨鎰熷叴瓒ｇ殑閮ㄥ垎闃呰锛?/p>

寮€鍙戜腑鐨勫父瑙侀棶棰?/h2>

• 涓轰綍蹇呴』寮曠敤 React

• 鑷畾涔夌殑 React缁勪欢涓轰綍蹇呴』澶у啓

• React濡備綍闃叉 XSS

• React鐨?nbsp;Diff绠楁硶鍜屽叾浠栫殑 Diff绠楁硶鏈変綍鍖哄埆

• key鍦?nbsp;React涓殑浣滅敤

• 濡備綍鍐欏嚭楂樻€ц兘鐨?nbsp;React缁勪欢

濡傛灉浣犲涓婇潰鍑犱釜闂杩樺瓨鍦ㄧ枒闂紝璇存槑浣犲 React鐨勮櫄鎷?DOM浠ュ強 Diff绠楁硶瀹炵幇鍘熺悊杩樻湁鎵€娆犵己锛岄偅涔堣濂藉ソ闃呰鏈瘒鏂囩珷鍚с€?/p>

棣栧厛鎴戜滑鏉ョ湅鐪嬪埌搴曚粈涔堟槸铏氭嫙 DOM:

铏氭嫙DOM

鍦ㄥ師鐢熺殑 javascript绋嬪簭涓紝鎴戜滑鐩存帴瀵?DOM杩涜鍒涘缓鍜屾洿鏀癸紝鑰?DOM鍏冪礌閫氳繃鎴戜滑鐩戝惉鐨勪簨浠跺拰鎴戜滑鐨勫簲鐢ㄧ▼搴忚繘琛岄€氳銆?/p>

鑰?React浼氬厛灏嗕綘鐨勪唬鐮佽浆鎹㈡垚涓€涓?JavaScript瀵硅薄锛岀劧鍚庤繖涓?JavaScript瀵硅薄鍐嶈浆鎹㈡垚鐪熷疄 DOM銆傝繖涓?nbsp;JavaScript瀵硅薄灏辨槸鎵€璋撶殑铏氭嫙 DOM銆?/p>

姣斿涓嬮潰涓€娈?html浠ｇ爜锛?/p>

 
   
   
 

  
    
    
  
<div class="title">
  
    
    
  
 <span>Hello ConardLi</span>
  
    
    
  
 <ul>
  
    
    
  
 <li>鑻规灉</li>
  
    
    
  
 <li>姗樺瓙</li>
  
    
    
  
 </ul>
  
    
    
  
</div>
 
   
   
 

鍦?React鍙兘瀛樺偍涓鸿繖鏍风殑 JS浠ｇ爜锛?/p>

 
   
   
 

  
    
    
  
const VitrualDom = {
  
    
    
  
 type: 'div',
  
    
    
  
 props: { class: 'title' },
  
    
    
  
 children: [
  
    
    
  
 {
  
    
    
  
 type: 'span',
  
    
    
  
 children: 'Hello ConardLi'
  
    
    
  
 },
  
    
    
  
 {
  
    
    
  
 type: 'ul',
  
    
    
  
 children: [
  
    
    
  
 { type: 'ul', children: '鑻规灉' },
  
    
    
  
 { type: 'ul', children: '姗樺瓙' }
  
    
    
  
 ]
  
    
    
  
 }
  
    
    
  
 ]
  
    
    
  
}
 
   
   
 

褰撴垜浠渶瑕佸垱寤烘垨鏇存柊鍏冪礌鏃讹紝 React棣栧厛浼氳杩欎釜 VitrualDom瀵硅薄杩涜鍒涘缓鍜屾洿鏀癸紝鐒跺悗鍐嶅皢 VitrualDom瀵硅薄娓叉煋鎴愮湡瀹?DOM锛?/p>

褰撴垜浠渶瑕佸 DOM杩涜浜嬩欢鐩戝惉鏃讹紝棣栧厛瀵?VitrualDom杩涜浜嬩欢鐩戝惉锛?VitrualDom浼氫唬鐞嗗師鐢熺殑 DOM浜嬩欢浠庤€屽仛鍑哄搷搴斻€?/p>

涓轰綍浣跨敤铏氭嫙DOM

React涓轰綍閲囩敤 VitrualDom杩欑鏂规鍛紵

鎻愰珮寮€鍙戞晥鐜?/h3>

浣跨敤 JavaScript锛屾垜浠湪缂栧啓搴旂敤绋嬪簭鏃剁殑鍏虫敞鐐瑰湪浜庡浣曟洿鏂?DOM銆?/p>

浣跨敤 React锛屼綘鍙渶瑕佸憡璇?React浣犳兂璁╄鍥惧浜庝粈涔堢姸鎬侊紝 React鍒欓€氳繃 VitrualDom纭繚 DOM涓庤鐘舵€佺浉鍖归厤銆備綘涓嶅繀鑷繁鍘诲畬鎴愬睘鎬ф搷浣溿€佷簨浠跺鐞嗐€?nbsp;DOM鏇存柊锛?React浼氭浛浣犲畬鎴愯繖涓€鍒囥€?/p>

鍏充簬鎻愬崌鎬ц兘

寰堝鏂囩珷璇?VitrualDom鍙互鎻愬崌鎬ц兘锛岃繖涓€璇存硶瀹為檯涓婃槸寰堢墖闈㈢殑銆?/p>

鐩存帴鎿嶄綔 DOM鏄潪甯歌€楄垂鎬ц兘鐨勶紝杩欎竴鐐规瘚搴哥疆鐤戙€備絾鏄?nbsp;React浣跨敤 VitrualDom涔熸槸鏃犳硶閬垮厤鎿嶄綔 DOM鐨勩€?/p>

濡傛灉鏄娆℃覆鏌擄紝 VitrualDom涓嶅叿鏈変换浣曚紭鍔匡紝鐢氳嚦瀹冭杩涜鏇村鐨勮绠楋紝娑堣€楁洿澶氱殑鍐呭瓨銆?/p>

VitrualDom鐨勪紭鍔垮湪浜?React鐨?Diff绠楁硶鍜屾壒澶勭悊绛栫暐锛?React鍦ㄩ〉闈㈡洿鏂颁箣鍓嶏紝鎻愬墠璁＄畻濂戒簡濡備綍杩涜鏇存柊鍜屾覆鏌?DOM銆傚疄闄呬笂锛岃繖涓绠楄繃绋嬫垜浠湪鐩存帴鎿嶄綔 DOM鏃讹紝涔熸槸鍙互鑷繁鍒ゆ柇鍜屽疄鐜扮殑锛屼絾鏄竴瀹氫細鑰楄垂闈炲父澶氱殑绮惧姏鍜屾椂闂达紝鑰屼笖寰€寰€鎴戜滑鑷繁鍋氱殑鏄笉濡?React濂界殑銆傛墍浠ワ紝鍦ㄨ繖涓繃绋嬩腑 React甯姪鎴戜滑"鎻愬崌浜嗘€ц兘"銆?/p>

鎵€浠ワ紝鎴戞洿鍊惧悜浜庤锛?VitrualDom甯姪鎴戜滑鎻愰珮浜嗗紑鍙戞晥鐜囷紝鍦ㄩ噸澶嶆覆鏌撴椂瀹冨府鍔╂垜浠绠楀浣曟洿楂樻晥鐨勬洿鏂帮紝鑰屼笉鏄畠姣?DOM鎿嶄綔鏇村揩銆?/p>

濡傛灉鎮ㄥ鏈儴鍒嗙殑鍒嗘瀽鏈変粈涔堜笉鍚岃瑙ｏ紝娆㈣繋鍦ㄨ瘎璁哄尯鎷嶇爾銆?/p>

璺ㄦ祻瑙堝櫒鍏煎

React鍩轰簬 VitrualDom鑷繁瀹炵幇浜嗕竴濂楄嚜宸辩殑浜嬩欢鏈哄埗锛岃嚜宸辨ā鎷熶簡浜嬩欢鍐掓场鍜屾崟鑾风殑杩囩▼锛岄噰鐢ㄤ簡浜嬩欢浠ｇ悊锛屾壒閲忔洿鏂扮瓑鏂规硶锛屾姽骞充簡鍚勪釜娴忚鍣ㄧ殑浜嬩欢鍏煎鎬ч棶棰樸€?/p>

璺ㄥ钩鍙板吋瀹?/h3>

VitrualDom涓?React甯︽潵浜嗚法骞冲彴娓叉煋鐨勮兘鍔涖€備互 ReactNative涓轰緥瀛愩€?nbsp;React鏍规嵁 VitrualDom鐢诲嚭鐩稿簲骞冲彴鐨?ui灞傦紝鍙笉杩囦笉鍚屽钩鍙扮敾鐨勫Э鍔夸笉鍚岃€屽凡銆?/p>

铏氭嫙DOM瀹炵幇鍘熺悊

濡傛灉浣犱笉鎯崇湅绻佹潅鐨勬簮鐮侊紝鎴栬€呯幇鍦ㄦ病鏈夎冻澶熸椂闂达紝鍙互璺宠繃杩欎竴绔狅紝鐩存帴馃憞铏氭嫙DOM鍘熺悊鎬荤粨

鍦ㄤ笂闈㈢殑鍥句笂鎴戜滑缁х画杩涜鎵╁睍锛屾寜鐓у浘涓殑娴佺▼锛屾垜浠緷娆℃潵鍒嗘瀽铏氭嫙 DOM鐨勫疄鐜板師鐞嗐€?/p>

JSX鍜宑reateElement

鎴戜滑鍦ㄥ疄鐜颁竴涓?React缁勪欢鏃跺彲浠ラ€夋嫨涓ょ缂栫爜鏂瑰紡锛岀涓€绉嶆槸浣跨敤 JSX缂栧啓锛?/p>

 
   
   
 

  
    
    
  
class Hello extends Component {
  
    
    
  
 render() {
  
    
    
  
 return <div>Hello ConardLi</div>;
  
    
    
  
 }
  
    
    
  
}
 
   
   
 

绗簩绉嶆槸鐩存帴浣跨敤 React.createElement缂栧啓锛?/p>

 
   
   
 

  
    
    
  
class Hello extends Component {
  
    
    
  
 render() {
  
    
    
  
 return React.createElement('div', null, `Hello ConardLi`);
  
    
    
  
 }
  
    
    
  
}
 
   
   
 

瀹為檯涓婏紝涓婇潰涓ょ鍐欐硶鏄瓑浠风殑锛?JSX鍙槸涓?React.createElement(component,props,...children)鏂规硶鎻愪緵鐨勮娉曠硸銆備篃灏辨槸璇存墍鏈夌殑 JSX浠ｇ爜鏈€鍚庨兘浼氳浆鎹㈡垚 React.createElement(...)锛?Babel甯姪鎴戜滑瀹屾垚浜嗚繖涓浆鎹㈢殑杩囩▼銆?/p>

濡備笅闈㈢殑 JSX

 
   
   
 

  
    
    
  
<div>
  
    
    
  
 <img src="avatar.png" className="profile" />
  
    
    
  
 <Hello />
  
    
    
  
</div>;
 
   
   
 

灏嗕細琚?Babel杞崲涓?/p>

 
   
   
 

  
    
    
  
React.createElement("div", null, React.createElement("img", {
  
    
    
  
 src: "avatar.png",
  
    
    
  
 className: "profile"
  
    
    
  
}), React.createElement(Hello, null));
 
   
   
 

娉ㄦ剰锛?babel鍦ㄧ紪璇戞椂浼氬垽鏂?JSX涓粍浠剁殑棣栧瓧姣嶏紝褰撻瀛楁瘝涓哄皬鍐欐椂锛屽叾琚瀹氫负鍘熺敓 DOM鏍囩锛?createElement鐨勭涓€涓彉閲忚缂栬瘧涓哄瓧绗︿覆锛涘綋棣栧瓧姣嶄负澶у啓鏃讹紝鍏惰璁ゅ畾涓鸿嚜瀹氫箟缁勪欢锛?nbsp;createElement鐨勭涓€涓彉閲忚缂栬瘧涓哄璞★紱

鍙﹀锛岀敱浜?JSX鎻愬墠瑕佽 Babel缂栬瘧锛屾墍浠?JSX鏄笉鑳藉湪杩愯鏃跺姩鎬侀€夋嫨绫诲瀷鐨勶紝姣斿涓嬮潰鐨勪唬鐮侊細

 
   
   
 

  
    
    
  
function Story(props) {
  
    
    
  
 // Wrong! JSX type can't be an expression.
  
    
    
  
 return <components[props.storyType] story={props.story} />;
  
    
    
  
}
 
   
   
 

闇€瑕佸彉鎴愪笅闈㈢殑鍐欐硶锛?/p>

 
   
   
 

  
    
    
  
function Story(props) {
  
    
    
  
 // Correct! JSX type can be a capitalized variable.
  
    
    
  
 const SpecificStory = components[props.storyType];
  
    
    
  
 return <SpecificStory story={props.story} />;
  
    
    
  
}
 
   
   
 

鎵€浠ワ紝浣跨敤 JSX浣犻渶瑕佸畨瑁?Babel鎻掍欢 babel-plugin-transform-react-jsx

 
   
   
 

  
    
    
  
{
  
    
    
  
 "plugins": [
  
    
    
  
 ["transform-react-jsx", {
  
    
    
  
 "pragma": "React.createElement"
  
    
    
  
 }]
  
    
    
  
 ]
  
    
    
  
}
 
   
   
 

鍒涘缓铏氭嫙DOM

涓嬮潰鎴戜滑鏉ョ湅鐪嬭櫄鎷?DOM鐨勭湡瀹炴ā鏍凤紝灏嗕笅闈㈢殑 JSX浠ｇ爜鍦ㄦ帶鍒跺彴鎵撳嵃鍑烘潵锛?/p>

 
   
   
 

  
    
    
  
<div className="title">
  
    
    
  
 <span>Hello ConardLi</span>
  
    
    
  
 <ul>
  
    
    
  
 <li>鑻规灉</li>
  
    
    
  
 <li>姗樺瓙</li>
  
    
    
  
 </ul>
  
    
    
  
</div>
 
   
   
 

杩欎釜缁撴瀯鍜屾垜浠笂闈㈣嚜宸辨弿缁樼殑缁撴瀯寰堝儚锛岄偅涔?React鏄浣曞皢鎴戜滑鐨勪唬鐮佽浆鎹㈡垚杩欎釜缁撴瀯鐨勫憿锛屼笅闈㈡垜浠潵鐪嬬湅 createElement鍑芥暟鐨勫叿浣撳疄鐜帮紙鏂囦腑鐨勬簮鐮佺粡杩囩簿绠€锛夈€?/p>

createElement鍑芥暟鍐呴儴鍋氱殑鎿嶄綔寰堢畝鍗曪紝灏?props鍜屽瓙鍏冪礌杩涜澶勭悊鍚庤繑鍥炰竴涓?ReactElement瀵硅薄锛屼笅闈㈡垜浠潵閫愪竴鍒嗘瀽锛?/p>

(1).澶勭悊props锛?/strong>

1.灏嗙壒娈婂睘鎬?nbsp;ref銆?nbsp;key浠?nbsp;config涓彇鍑哄苟璧嬪€?/span>

2.灏嗙壒娈婂睘鎬?nbsp;self銆?nbsp;source浠?nbsp;config涓彇鍑哄苟璧嬪€?/span>

3.灏嗛櫎鐗规畩灞炴€х殑鍏朵粬灞炴€у彇鍑哄苟璧嬪€肩粰 props

鍚庨潰鐨勬枃绔犱細璇︾粏浠嬬粛杩欎簺鐗规畩灞炴€х殑浣滅敤銆?/p>

(2).鑾峰彇瀛愬厓绱?/strong>

1.鑾峰彇瀛愬厓绱犵殑涓暟 鈥斺€?绗簩涓弬鏁板悗闈㈢殑鎵€鏈夊弬鏁?/span>

2.鑻ュ彧鏈変竴涓瓙鍏冪礌锛岃祴鍊肩粰 props.children

3.鑻ユ湁澶氫釜瀛愬厓绱狅紝灏嗗瓙鍏冪礌濉厖涓轰竴涓暟缁勮祴鍊肩粰 props.children

(3).澶勭悊榛樿props

灏嗙粍浠剁殑闈欐€佸睘鎬?nbsp;defaultProps瀹氫箟鐨勯粯璁?nbsp;props杩涜璧嬪€?/span>

ReactElement

ReactElement灏嗕紶鍏ョ殑鍑犱釜灞炴€ц繘琛岀粍鍚堬紝骞惰繑鍥炪€?/p>

• type锛氬厓绱犵殑绫诲瀷锛屽彲浠ユ槸鍘熺敓html绫诲瀷锛堝瓧绗︿覆锛夛紝鎴栬€呰嚜瀹氫箟缁勪欢锛堝嚱鏁版垨 class锛?/span>

• key锛氱粍浠剁殑鍞竴鏍囪瘑锛岀敤浜?nbsp;Diff绠楁硶锛屼笅闈細璇︾粏浠嬬粛

• ref锛氱敤浜庤闂師鐢?nbsp;dom鑺傜偣

• props锛氫紶鍏ョ粍浠剁殑 props

• owner锛氬綋鍓嶆鍦ㄦ瀯寤虹殑 Component鎵€灞炵殑 Component

$$typeof锛氫竴涓垜浠笉甯歌鍒扮殑灞炴€э紝瀹冭璧嬪€间负 REACT_ELEMENT_TYPE锛?/p>

 
   
   
 

  
    
    
  
var REACT_ELEMENT_TYPE =
  
    
    
  
 (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
  
    
    
  
 0xeac7;
 
   
   
 

鍙锛?$$typeof鏄竴涓?Symbol绫诲瀷鐨勫彉閲忥紝杩欎釜鍙橀噺鍙互闃叉 XSS銆?/p>

濡傛灉浣犵殑鏈嶅姟鍣ㄦ湁涓€涓紡娲烇紝鍏佽鐢ㄦ埛瀛樺偍浠绘剰 JSON瀵硅薄锛?nbsp;鑰屽鎴风浠ｇ爜闇€瑕佷竴涓瓧绗︿覆锛岃繖鍙兘浼氭垚涓轰竴涓棶棰橈細

 
   
   
 

  
    
    
  
// JSON
  
    
    
  
let expectedTextButGotJSON = {
  
    
    
  
 type: 'div',
  
    
    
  
 props: {
  
    
    
  
 dangerouslySetInnerHTML: {
  
    
    
  
 __html: '/* put your exploit here */'
  
    
    
  
 },
  
    
    
  
 },
  
    
    
  
};
  
    
    
  
let message = { text: expectedTextButGotJSON };
  
    
    
  
<p>
  
    
    
  
 {message.text}
  
    
    
  
</p>
 
   
   
 

JSON涓笉鑳藉瓨鍌?Symbol绫诲瀷鐨勫彉閲忋€?/p>

ReactElement.isValidElement鍑芥暟鐢ㄦ潵鍒ゆ柇涓€涓?React缁勪欢鏄惁鏄湁鏁堢殑锛屼笅闈㈡槸瀹冪殑鍏蜂綋瀹炵幇銆?/p>

 
   
   
 

  
    
    
  
ReactElement.isValidElement = function (object) {
  
    
    
  
 return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
  
    
    
  
};
 
   
   
 

鍙 React娓叉煋鏃朵細鎶婃病鏈?$$typeof鏍囪瘑锛屼互鍙婅鍒欐牎楠屼笉閫氳繃鐨勭粍浠惰繃婊ゆ帀銆?/p>

褰撲綘鐨勭幆澧冧笉鏀寔 Symbol鏃讹紝 $$typeof琚祴鍊间负 0xeac7锛岃嚦浜庝负浠€涔堬紝 React寮€鍙戣€呯粰鍑轰簡绛旀锛?/p>

0xeac7鐪嬭捣鏉ユ湁鐐瑰儚 React銆?/p>

self銆?source鍙湁鍦ㄩ潪鐢熶骇鐜鎵嶄細琚姞鍏ュ璞′腑銆?/p>

• self鎸囧畾褰撳墠浣嶄簬鍝釜缁勪欢瀹炰緥銆?/span>

• _source鎸囧畾璋冭瘯浠ｇ爜鏉ヨ嚜鐨勬枃浠? fileName)鍜屼唬鐮佽鏁? lineNumber)銆?/span>

铏氭嫙DOM杞崲涓虹湡瀹濪OM

涓婇潰鎴戜滑鍒嗘瀽浜嗕唬鐮佽浆鎹㈡垚浜嗚櫄鎷?DOM鐨勮繃绋嬶紝涓嬮潰鏉ョ湅涓€涓?React濡備綍灏嗚櫄鎷?DOM杞崲鎴愮湡瀹?DOM銆?/p>

鏈儴鍒嗛€昏緫杈冨鏉傦紝鎴戜滑鍏堢敤娴佺▼鍥炬⒊鐞嗕竴涓嬫暣涓繃绋嬶紝鏁翠釜杩囩▼澶ф鍙垎涓哄洓姝ワ細

杩囩▼1锛氬垵濮嬪弬鏁板鐞?/strong>

鍦ㄧ紪鍐欏ソ鎴戜滑鐨?React缁勪欢鍚庯紝鎴戜滑闇€瑕佽皟鐢?ReactDOM.render(element,container[,callback])灏嗙粍浠惰繘琛屾覆鏌撱€?/p>

render鍑芥暟鍐呴儴瀹為檯璋冪敤浜?_renderSubtreeIntoContainer锛屾垜浠潵鐪嬬湅瀹冪殑鍏蜂綋瀹炵幇锛?/p>

 
   
   
 

  
    
    
  
 render: function (nextElement, container, callback) {
  
    
    
  
 return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
  
    
    
  
 },
 
   
   
 

1.灏嗗綋鍓嶇粍浠朵娇鐢?nbsp;TopLevelWrapper杩涜鍖呰９

TopLevelWrapper鍙竴涓┖澹筹紝瀹冧负浣犻渶瑕佹寕杞界殑缁勪欢鎻愪緵浜嗕竴涓?rootID灞炴€э紝骞跺湪 render鍑芥暟涓繑鍥炶缁勪欢銆?/p>

 
   
   
 

  
    
    
  
TopLevelWrapper.prototype.render = function () {
  
    
    
  
 return this.props.child;
  
    
    
  
};
 
   
   
 

ReactDOM.render鍑芥暟鐨勭涓€涓弬鏁板彲浠ユ槸鍘熺敓 DOM涔熷彲浠ユ槸 React缁勪欢锛屽寘瑁逛竴灞?TopLevelWrapper鍙互鍦ㄥ悗闈㈢殑娓叉煋涓皢瀹冧滑杩涜缁熶竴澶勭悊锛岃€屼笉鐢ㄥ叧蹇冩槸鍚﹀師鐢熴€?/p>

• 2.鍒ゆ柇鏍圭粨鐐逛笅鏄惁宸茬粡娓叉煋杩囧厓绱狅紝濡傛灉宸茬粡娓叉煋杩囷紝鍒ゆ柇鎵ц鏇存柊鎴栬€呭嵏杞芥搷浣?/span>

• 3.澶勭悊 shouldReuseMarkup鍙橀噺锛岃鍙橀噺琛ㄧず鏄惁闇€瑕侀噸鏂版爣璁板厓绱?/span>

• 4.璋冪敤灏嗕笂闈㈠鐞嗗ソ鐨勫弬鏁颁紶鍏?nbsp;_renderNewRootComponent锛屾覆鏌撳畬鎴愬悗璋冪敤 callback銆?/span>

鍦?_renderNewRootComponent涓皟鐢?instantiateReactComponent瀵规垜浠紶鍏ョ殑缁勪欢杩涜鍒嗙被鍖呰锛?/p>

鏍规嵁缁勪欢鐨勭被鍨嬶紝 React鏍规嵁鍘熺粍浠跺垱寤轰簡涓嬮潰鍥涘ぇ绫荤粍浠讹紝瀵圭粍浠惰繘琛屽垎绫绘覆鏌擄細

• ReactDOMEmptyComponent:绌虹粍浠?/span>

• ReactDOMTextComponent:鏂囨湰

• ReactDOMComponent:鍘熺敓 DOM

• ReactCompositeComponent:鑷畾涔?nbsp;React缁勪欢

浠栦滑閮藉叿澶囦互涓嬩笁涓柟娉曪細

• construct:鐢ㄦ潵鎺ユ敹 ReactElement杩涜鍒濆鍖栥€?/span>

• mountComponent:鐢ㄦ潵鐢熸垚 ReactElement瀵瑰簲鐨勭湡瀹?nbsp;DOM鎴?nbsp;DOMLazyTree銆?/span>

• unmountComponent:鍗歌浇 DOM鑺傜偣锛岃В缁戜簨浠躲€?/span>

鍏蜂綋鏄浣曟覆鏌撴垜浠湪杩囩▼3涓繘琛屽垎鏋愩€?/p>

杩囩▼2锛氭壒澶勭悊銆佷簨鍔¤皟鐢?/strong>

鍦?_renderNewRootComponent涓娇鐢?ReactUpdates.batchedUpdates璋冪敤 batchedMountComponentIntoNode杩涜鎵瑰鐞嗐€?/p>

 
   
   
 

  
    
    
  
ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
 
   
   
 

鍦?batchedMountComponentIntoNode涓紝浣跨敤 transaction.perform璋冪敤 mountComponentIntoNode璁╁叾鍩轰簬浜嬪姟鏈哄埗杩涜璋冪敤銆?/p>

 
   
   
 

  
    
    
  
 transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
 
   
   
 

鍏充簬鎵瑰鐞嗕簨鍔★紝鍦ㄦ垜鍓嶉潰鐨勫垎鏋恠etState鎵ц鏈哄埗涓湁鏇村浠嬬粛銆?/p>

杩囩▼3锛氱敓鎴恏tml

鍦?mountComponentIntoNode鍑芥暟涓皟鐢?ReactReconciler.mountComponent鐢熸垚鍘熺敓 DOM鑺傜偣銆?/p>

mountComponent鍐呴儴瀹為檯涓婃槸璋冪敤浜嗚繃绋?鐢熸垚鐨勫洓绉嶅璞＄殑 mountComponent鏂规硶銆傞鍏堟潵鐪嬩竴涓?nbsp;ReactDOMComponent锛?/p>

1.瀵圭壒娈?nbsp;DOM鏍囩銆?nbsp;props杩涜澶勭悊銆?/span>

2.鏍规嵁鏍囩绫诲瀷鍒涘缓 DOM鑺傜偣銆?/span>

3.璋冪敤 _updateDOMProperties灏?nbsp;props鎻掑叆鍒?nbsp;DOM鑺傜偣锛?nbsp;_updateDOMProperties涔熷彲鐢ㄤ簬 propsDiff锛岀涓€涓弬鏁颁负涓婃娓叉煋鐨?nbsp;props锛岀浜屼釜鍙傛暟涓哄綋鍓?nbsp;props锛岃嫢绗竴涓弬鏁颁负绌猴紝鍒欎负棣栨鍒涘缓銆?/span>

4.鐢熸垚涓€涓?nbsp;DOMLazyTree瀵硅薄骞惰皟鐢?nbsp;_createInitialChildren灏嗗瀛愯妭鐐规覆鏌撳埌涓婇潰銆?/span>

閭ｄ箞涓轰粈涔堜笉鐩存帴鐢熸垚涓€涓?DOM鑺傜偣鑰屾槸瑕佸垱寤轰竴涓?DOMLazyTree鍛紵鎴戜滑鍏堟潵鐪嬬湅 _createInitialChildren鍋氫簡浠€涔堬細

鍒ゆ柇褰撳墠鑺傜偣鐨?dangerouslySetInnerHTML灞炴€с€佸瀛愯妭鐐规槸鍚︿负鏂囨湰鍜屽叾浠栬妭鐐瑰垎鍒皟鐢?DOMLazyTree鐨?queueHTML銆?queueText銆?queueChild銆?/p>

鍙互鍙戠幇锛?nbsp;DOMLazyTree瀹為檯涓婃槸涓€涓寘瑁瑰璞★紝 node灞炴€т腑瀛樺偍浜嗙湡瀹炵殑 DOM鑺傜偣锛?children銆?html銆?text鍒嗗埆瀛樺偍瀛╁瓙銆乭tml鑺傜偣鍜屾枃鏈妭鐐广€?/p>

瀹冩彁渚涗簡鍑犱釜鏂规硶鐢ㄤ簬鎻掑叆瀛╁瓙銆?html浠ュ強鏂囨湰鑺傜偣锛岃繖浜涙彃鍏ラ兘鏄湁鏉′欢闄愬埗鐨勶紝褰?enableLazy灞炴€т负 true鏃讹紝杩欎簺瀛╁瓙銆?html浠ュ強鏂囨湰鑺傜偣浼氳鎻掑叆鍒?DOMLazyTree瀵硅薄涓紝褰撳叾涓?false鏃朵細鎻掑叆鍒扮湡瀹?DOM鑺傜偣涓€?/p>

 
   
   
 

  
    
    
  
var enableLazy = typeof document !== 'undefined' &&
  
    
    
  
 typeof document.documentMode === 'number' ||
  
    
    
  
 typeof navigator !== 'undefined' &&
  
    
    
  
 typeof navigator.userAgent === 'string' &&
  
    
    
  
 /Edge/d/.test(navigator.userAgent);
 
   
   
 

鍙锛?nbsp;enableLazy鏄竴涓彉閲忥紝褰撳墠娴忚鍣ㄦ槸 IE鎴?Edge鏃朵负 true銆?/p>

鍦?IE锛?/span>8-11锛?/span>鍜?Edge娴忚鍣ㄤ腑锛屼竴涓竴涓彃鍏ユ棤瀛愬瓩鐨勮妭鐐癸紝鏁堢巼瑕佽繙楂樹簬鎻掑叆涓€鏁翠釜搴忓垪鍖栧畬鏁寸殑鑺傜偣鏍戙€?/p>

鎵€浠?lazyTree涓昏瑙ｅ喅鐨勬槸鍦?IE锛?/span>8-11锛?/span>鍜?Edge娴忚鍣ㄤ腑鎻掑叆鑺傜偣鐨勬晥鐜囬棶棰橈紝鍦ㄥ悗闈㈢殑杩囩▼4鎴戜滑浼氬垎鏋愬埌锛氳嫢褰撳墠鏄?nbsp;IE鎴?Edge锛屽垯闇€瑕侀€掑綊鎻掑叆 DOMLazyTree涓紦瀛樼殑瀛愯妭鐐癸紝鍏朵粬娴忚鍣ㄥ彧闇€瑕佹彃鍏ヤ竴娆″綋鍓嶈妭鐐癸紝鍥犱负浠栦滑鐨勫瀛愬凡缁忚娓叉煋濂戒簡锛岃€屼笉鐢ㄦ媴蹇冩晥鐜囬棶棰樸€?/p>

涓嬮潰鏉ョ湅涓€涓?ReactCompositeComponent锛岀敱浜庝唬鐮侀潪甯稿杩欓噷灏变笉鍐嶈创杩欎釜妯″潡鐨勪唬鐮侊紝鍏跺唴閮ㄤ富瑕佸仛浜嗕互涓嬪嚑姝ワ細

• 澶勭悊 props銆?nbsp;contex绛夊彉閲忥紝璋冪敤鏋勯€犲嚱鏁板垱寤虹粍浠跺疄渚?/span>

• 鍒ゆ柇鏄惁涓烘棤鐘舵€佺粍浠讹紝澶勭悊 state

• 璋冪敤 performInitialMount鐢熷懡鍛ㄦ湡锛屽鐞嗗瓙鑺傜偣锛岃幏鍙?nbsp;markup銆?/span>

• 璋冪敤 componentDidMount鐢熷懡鍛ㄦ湡

鍦?performInitialMount鍑芥暟涓紝棣栧厛璋冪敤浜?componentWillMount鐢熷懡鍛ㄦ湡锛岀敱浜庤嚜瀹氫箟鐨?React缁勪欢骞朵笉鏄竴涓湡瀹炵殑DOM锛屾墍浠ュ湪鍑芥暟涓張璋冪敤浜嗗瀛愯妭鐐圭殑 mountComponent銆傝繖涔熸槸涓€涓€掑綊鐨勮繃绋嬶紝褰撴墍鏈夊瀛愯妭鐐规覆鏌撳畬鎴愬悗锛岃繑鍥?nbsp;markup骞惰皟鐢?componentDidMount銆?/p>

杩囩▼4锛氭覆鏌揾tml

鍦?mountComponentIntoNode鍑芥暟涓皟鐢ㄥ皢涓婁竴姝ョ敓鎴愮殑 markup鎻掑叆 container瀹瑰櫒銆?/p>

鍦ㄩ娆℃覆鏌撴椂锛?_mountImageIntoNode浼氭竻绌?container鐨勫瓙鑺傜偣鍚庤皟鐢?DOMLazyTree.insertTreeBefore锛?/p>

鍒ゆ柇鏄惁涓?fragment鑺傜偣鎴栬€?<object>鎻掍欢锛?/p>

• 
  

  濡傛灉鏄互涓婁袱绉嶏紝棣栧厛璋冪敤 insertTreeChildren灏嗘鑺傜偣鐨勫瀛愯妭鐐规覆鏌撳埌褰撳墠鑺傜偣涓婏紝鍐嶅皢娓叉煋瀹岀殑鑺傜偣鎻掑叆鍒?html

  
  

• 
  

  濡傛灉鏄叾浠栬妭鐐癸紝鍏堝皢鑺傜偣鎻掑叆鍒版彃鍏ュ埌 html锛屽啀璋冪敤 insertTreeChildren灏嗗瀛愯妭鐐规彃鍏ュ埌 html銆?/p>

  
  

• 
  

  鑻ュ綋鍓嶄笉鏄?IE鎴?Edge锛屽垯涓嶉渶瑕佸啀閫掑綊鎻掑叆瀛愯妭鐐癸紝鍙渶瑕佹彃鍏ヤ竴娆″綋鍓嶈妭鐐广€?/p>

  
  

• 鍒ゆ柇涓嶆槸 IE鎴?nbsp;bEdge鏃?nbsp;return

• 鑻?nbsp;children涓嶄负绌猴紝閫掑綊 insertTreeBefore杩涜鎻掑叆

• 娓叉煋html鑺傜偣

• 娓叉煋鏂囨湰鑺傜偣

鍘熺敓DOM浜嬩欢浠ｇ悊

鏈夊叧铏氭嫙 DOM鐨勪簨浠舵満鍒讹紝鎴戞浘涓撻棬鍐欒繃涓€绡囨枃绔狅紝鏈夊叴瓒ｅ彲浠ヰ煈囥€怰eact娣卞叆銆慠eact浜嬩欢鏈哄埗

铏氭嫙DOM鍘熺悊銆佺壒鎬ф€荤粨

React缁勪欢鐨勬覆鏌撴祦绋?/h3>

• 
  

  浣跨敤 React.createElement鎴?JSX缂栧啓 React缁勪欢锛屽疄闄呬笂鎵€鏈夌殑 JSX浠ｇ爜鏈€鍚庨兘浼氳浆鎹㈡垚 React.createElement(...)锛?Babel甯姪鎴戜滑瀹屾垚浜嗚繖涓浆鎹㈢殑杩囩▼銆?/p>

  
  

• 
  

  createElement鍑芥暟瀵?key鍜?ref绛夌壒娈婄殑 props杩涜澶勭悊锛屽苟鑾峰彇 defaultProps瀵归粯璁?props杩涜璧嬪€硷紝骞朵笖瀵逛紶鍏ョ殑瀛╁瓙鑺傜偣杩涜澶勭悊锛屾渶缁堟瀯閫犳垚涓€涓?ReactElement瀵硅薄锛堟墍璋撶殑铏氭嫙 DOM锛夈€?/p>

  
  

• 
  

  ReactDOM.render灏嗙敓鎴愬ソ鐨勮櫄鎷?DOM娓叉煋鍒版寚瀹氬鍣ㄤ笂锛屽叾涓噰鐢ㄤ簡鎵瑰鐞嗐€佷簨鍔＄瓑鏈哄埗骞朵笖瀵圭壒瀹氭祻瑙堝櫒杩涜浜嗘€ц兘浼樺寲锛屾渶缁堣浆鎹负鐪熷疄 DOM銆?/p>

  
  

铏氭嫙DOM鐨勭粍鎴?/h3>

鍗?ReactElementelement瀵硅薄锛屾垜浠殑缁勪欢鏈€缁堜細琚覆鏌撴垚涓嬮潰鐨勭粨鏋勶細

• type锛氬厓绱犵殑绫诲瀷锛屽彲浠ユ槸鍘熺敓html绫诲瀷锛堝瓧绗︿覆锛夛紝鎴栬€呰嚜瀹氫箟缁勪欢锛堝嚱鏁版垨 class锛?/span>

• key锛氱粍浠剁殑鍞竴鏍囪瘑锛岀敤浜?nbsp;Diff绠楁硶锛屼笅闈細璇︾粏浠嬬粛

• ref锛氱敤浜庤闂師鐢?nbsp;dom鑺傜偣

• props锛氫紶鍏ョ粍浠剁殑 props锛?nbsp;chidren鏄?nbsp;props涓殑涓€涓睘鎬э紝瀹冨瓨鍌ㄤ簡褰撳墠缁勪欢鐨勫瀛愯妭鐐癸紝鍙互鏄暟缁勶紙澶氫釜瀛╁瓙鑺傜偣锛夋垨瀵硅薄锛堝彧鏈変竴涓瀛愯妭鐐癸級

• owner锛氬綋鍓嶆鍦ㄦ瀯寤虹殑 Component鎵€灞炵殑 Component

• self锛氾紙闈炵敓浜х幆澧冿級鎸囧畾褰撳墠浣嶄簬鍝釜缁勪欢瀹炰緥

• _source锛氾紙闈炵敓浜х幆澧冿級鎸囧畾璋冭瘯浠ｇ爜鏉ヨ嚜鐨勬枃浠? fileName)鍜屼唬鐮佽鏁? lineNumber)

闃叉XSS

ReactElement瀵硅薄杩樻湁涓€涓?$$typeof灞炴€э紝瀹冩槸涓€涓?Symbol绫诲瀷鐨勫彉閲?Symbol.for('react.element')锛屽綋鐜涓嶆敮鎸?Symbol鏃讹紝 $$typeof琚祴鍊间负 0xeac7銆?/p>

杩欎釜鍙橀噺鍙互闃叉 XSS銆傚鏋滀綘鐨勬湇鍔″櫒鏈変竴涓紡娲烇紝鍏佽鐢ㄦ埛瀛樺偍浠绘剰 JSON瀵硅薄锛?nbsp;鑰屽鎴风浠ｇ爜闇€瑕佷竴涓瓧绗︿覆锛岃繖鍙兘涓轰綘鐨勫簲鐢ㄧ▼搴忓甫鏉ラ闄┿€?nbsp;JSON涓笉鑳藉瓨鍌?Symbol绫诲瀷鐨勫彉閲忥紝鑰?React娓叉煋鏃朵細鎶婃病鏈?$$typeof鏍囪瘑鐨勭粍浠惰繃婊ゆ帀銆?/p>

鎵瑰鐞嗗拰浜嬪姟

React鍦ㄦ覆鏌撹櫄鎷?DOM鏃跺簲鐢ㄤ簡鎵瑰鐞嗕互鍙婁簨鍔℃満鍒讹紝浠ユ彁楂樻覆鏌撴€ц兘銆?/p>

鍏充簬鎵瑰鐞嗕互鍙婁簨鍔℃満鍒讹紝鍦ㄦ垜涔嬪墠鐨勬枃绔犮€怰eact娣卞叆銆憇etState鐨勬墽琛屾満鍒朵腑鏈夎缁嗕粙缁嶃€?/p>

閽堝鎬х殑鎬ц兘浼樺寲

鍦?IE锛?/span>8-11锛?/span>鍜?Edge娴忚鍣ㄤ腑锛屼竴涓竴涓彃鍏ユ棤瀛愬瓩鐨勮妭鐐癸紝鏁堢巼瑕佽繙楂樹簬鎻掑叆涓€鏁翠釜搴忓垪鍖栧畬鏁寸殑鑺傜偣鏍戙€?/p>

React閫氳繃 lazyTree锛屽湪 IE锛?/span>8-11锛?/span>鍜?Edge涓繘琛屽崟涓妭鐐逛緷娆℃覆鏌撹妭鐐癸紝鑰屽湪鍏朵粬娴忚鍣ㄤ腑鍒欓鍏堝皢鏁翠釜澶х殑 DOM缁撴瀯鏋勫缓濂斤紝鐒跺悗鍐嶆暣浣撴彃鍏ュ鍣ㄣ€?/p>

骞朵笖锛屽湪鍗曠嫭娓叉煋鑺傜偣鏃讹紝 React杩樿€冭檻浜?fragment绛夌壒娈婅妭鐐癸紝杩欎簺鑺傜偣鍒欎笉浼氫竴涓竴涓彃鍏ユ覆鏌撱€?/p>

铏氭嫙DOM浜嬩欢鏈哄埗

React鑷繁瀹炵幇浜嗕竴濂椾簨浠舵満鍒讹紝鍏跺皢鎵€鏈夌粦瀹氬湪铏氭嫙 DOM涓婄殑浜嬩欢鏄犲皠鍒扮湡姝ｇ殑 DOM浜嬩欢锛屽苟灏嗘墍鏈夌殑浜嬩欢閮戒唬鐞嗗埌 document涓婏紝鑷繁妯℃嫙浜嗕簨浠跺啋娉″拰鎹曡幏鐨勮繃绋嬶紝骞朵笖杩涜缁熶竴鐨勪簨浠跺垎鍙戙€?/p>

React鑷繁鏋勯€犱簡鍚堟垚浜嬩欢瀵硅薄 SyntheticEvent锛岃繖鏄竴涓法娴忚鍣ㄥ師鐢熶簨浠跺寘瑁呭櫒銆?nbsp;瀹冨叿鏈変笌娴忚鍣ㄥ師鐢熶簨浠剁浉鍚岀殑鎺ュ彛锛屽寘鎷?nbsp;stopPropagation()鍜?preventDefault()绛夌瓑锛屽湪鎵€鏈夋祻瑙堝櫒涓粬浠伐浣滄柟寮忛兘鐩稿悓銆傝繖鎶瑰钩浜嗗悇涓祻瑙堝櫒鐨勪簨浠跺吋瀹规€ч棶棰樸€?/p>

涓婇潰鍒嗘瀽浜嗚櫄鎷?DOM鐨勯儴鍒嗗師鐞嗭紝褰撶劧杩欏苟涓嶅寘鎷櫄鎷?DOM杩涜 Diff鐨勮繃绋嬶紝涓嬩竴绡囨枃绔犳垜浠啀鏉ヨ缁嗘帰璁ㄣ€?/p>

鏈熬

鍏充簬寮€绡囨彁鐨勫嚑涓棶棰橈紝鎴戜滑鍦ㄤ笅绡囨枃绔犱腑杩涜缁熶竴鍥炵瓟銆?/p>

鏂囦腑濡傛湁閿欒锛屾杩庡湪璇勮鍖烘寚姝ｏ紝鎴栬€呮偍瀵规枃绔犵殑鎺掔増锛岄槄璇讳綋楠屾湁浠€涔堝ソ鐨勫缓璁紝娆㈣繋鍦ㄨ瘎璁哄尯鎸囧嚭锛岃阿璋㈤槄璇汇€?/p>