1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Deep into React 2 - setState æ´æ° - Blog of Leon Zhang</title> 7 <meta name="author" content="Leon Zhang"> 8 <meta name="description" content="Deep into React 2 - setState æ´æ°"> 9 <meta name="keywords" content="frontend, react"> 10 <!-- Open Graph --> 11 <meta property="og:title" content="Deep into React 2 - setState æ´æ° - Blog of Leon Zhang"> 12 <meta property="og:type" content="website"> 13 <meta property="og:url" content="https://www.njleonzhang.com/2021/03/16/deep-into-react-2.html"> 14 <meta property="og:description" content="Leon Zhang, font end engineer. record and share something here"> 15 <meta property="og:site_name" content="Blog of Leon Zhang"> 16 <link rel="stylesheet" href="//cdn.staticfile.org/normalize/6.0.0/normalize.min.css"> 17 <link rel="stylesheet" href="//at.alicdn.com/t/font_roc50gemkxpw4s4i.css"> 18 <link rel="stylesheet" href="/assets/css/github-markdown.css"> 19 <link rel="stylesheet" href="/assets/css/prism.css"> 20 <link rel="stylesheet" href="/assets/css/share.min.css"> 21 <link rel="stylesheet" href="/assets/css/app.min.css"> 22 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> 23
23<script src="/assets/js/jquery-3.2.1.min.js"></script>
23 24 <style> 25 .sizable-iframe { 26 width: 100%; 27 } 28 29 .sizable-iframe iframe { 30 margin-left: auto; 31 margin-right: auto; 32 display: block; 33 } 34 35 .sizable-iframe .controller { 36 display: flex; 37 align-items: center; 38 justify-content: space-between; 39 margin-top: 10px; 40 } 41 42 .sizable-iframe + .sizable-iframe { 43 margin-top: 20px; 44 } 45 46 .g-banner h1::selection, .g-banner a::selection { 47 background-color: #ADA2E5; 48 } 49 </style> 50 51 <!-- 52Author: Ray-Eldath 53refer to: 54 - http://docs.mathjax.org/en/latest/options/index.html 55--> 56 57
57<script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
57 58 59
59<script type="text/x-mathjax-config"> 60 MathJax.Hub.Config({ 61 jax: ["input/TeX", "output/HTML-CSS"], 62 tex2jax: { 63 inlineMath: [ ["$", "$"] ], 64 displayMath: [ ["$$", "$$"] ], 65 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] 66 }, 67 "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] } 68 }); 69 </script>
69 70 71 72 <!-- 73Author: Ray-Eldath 74--> 75<style> 76 .markdown-body .anchor{ 77 float: left; 78 margin-top: -8px; 79 margin-left: -20px; 80 padding-right: 4px; 81 line-height: 1; 82 opacity: 0; 83 } 84 85 .markdown-body .anchor .anchor-icon{ 86 font-size: 15px 87 } 88 89 .markdown-body h1, 90 .markdown-body h2, 91 .markdown-body h3{ 92 cursor: pointer; 93 } 94 95 .markdown-body h1:hover, 96 .markdown-body h2:hover, 97 .markdown-body h3:hover{ 98 text-decoration: underline; 99 } 100 101 /* html{ 102 scroll-behavior: smooth; 103 } */ 104</style>
105<script> 106 $(document).ready(function() { 107 let nodes = document.querySelector(".markdown-body").querySelectorAll("h1,h2,h3") 108 for(let node of nodes) { 109 var anchor = document.createElement("a") 110 var anchorIcon = document.createElement("i") 111 anchorIcon.setAttribute("class", "fa fa-anchor fa-lg anchor-icon") 112 anchorIcon.setAttribute("aria-hidden", true) 113 anchor.setAttribute("class", "anchor") 114 115 let $node = $(node) 116 117 node.onmouseover = function() { 118 let $icon = $node.find('a') 119 $icon.css({ 120 opacity: '0.4' 121 }) 122 } 123 124 node.onmouseout = function() { 125 let $icon = $node.find('a') 126 $icon.css({ 127 opacity: '0' 128 }) 129 } 130 131 node.onclick = function() { 132 location.hash = node.getAttribute("id") 133 } 134 135 anchor.appendChild(anchorIcon) 136 node.appendChild(anchor) 137 } 138 139 let $postContent = $('.post-content') 140 let height = $postContent.height() 141 142 if (height <= 15000) { 143 $('html').css('scroll-behavior', 'smooth') 144 } 145 }) 146</script>
146 147 148</head> 149 150 151<body> 152 <!--[if lt IE 10]> 153<div class="alert-danger" role="alert">ä½ çæµè§å¨å®å¨å¤ªå¤ªå¤ªæ§äºï¼æ¾å¦å«èµ°ï¼åçº§å®æµè§å¨å说ï¼<a target="_blank" class="alert-link" href="http://browsehappy.com">ç«å³å级</a></div> 154<![endif]--> 155 <input id="nm-switch" type="hidden" value="false"> <header class="g-header"> 156 <div class="g-logo"> 157 <a href="/"></a> 158 </div> 159 <i id="menu-toggle" class="iconfont icon-menu"></i> 160 <nav class="g-nav"> 161 <ul> 162 163 <li><a href="/">home</a></li> 164 165 <li><a href="/tags.html">tags</a></li> 166 167 </ul> 168 </nav> 169</header> 170 171 172 <header class="g-banner post-header post-pattern-circuitBoard bgcolor-default " data-theme="default"> 173 <div class="post-wrapper"> 174 <div class="post-tags"> 175 176 177 <a href="https://www.njleonzhang.com/tags#frontend" class="post-tag">frontend</a> 178 179 <a href="https://www.njleonzhang.com/tags#react" class="post-tag">react</a> 180 181 182 </div> 183 <h1>Deep into React 2 - setState æ´æ°</h1> 184 <div class="post-meta"> 185 <span class="post-meta-item"><i class="iconfont icon-author"></i><a href="https://www.njleonzhang.com" target="_blank" rel="author">Leon Zhang</a></></span> 186 <time class="post-meta-item" datetime="21-03-16"><i class="iconfont icon-date"></i>16 Mar 2021</time> 187 </div> 188 </div> 189 190 <div class="filter"></div> 191 <div class="post-cover" style="background: url('https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/71603321-aa3b-954f-bae2-64965bd91fc9.png') center no-repeat; background-size: cover;"></div> 192 193 </header> 194 195 <div class="post-content visible"> 196 197 198 <div class='post-footer-item ad' id="codefund"><!-- fallback content --></div> 199 200 <article class="markdown-body language-js"> 201 <p>䏿¬¡æä»¬åæäºä¸é¢è¿ä¸ªä¾å馿¬¡ mount çè¿ç¨</p> 202 203<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">App</span> <span class="kd">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> 204 <span class="nx">componentDidMount</span><span class="p">()</span> <span class="p">{</span> 205 <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">App componentDidMount</span><span class="dl">'</span><span class="p">);</span> 206 <span class="p">}</span> 207 <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> 208 <span class="k">return</span> <span class="p">(</span> 209 <span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">wrap</span><span class="dl">"</span><span class="o">></span> 210 <span class="o"><</span><span class="nx">Box</span> <span class="o">/></span> 211 <span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="nx">listç»ä»¶</span><span class="o"><</span><span class="sr">/span</span><span class="err">> 212</span> <span class="o"><</span><span class="sr">/div</span><span class="err">> 213</span> <span class="p">);</span> 214 <span class="p">}</span> 215<span class="p">}</span> 216<span class="kd">class</span> <span class="nx">Box</span> <span class="kd">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> 217 <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> 218 <span class="na">count</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> 219 <span class="p">};</span> 220 <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> 221 <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">state</span> <span class="o">=></span> <span class="p">{</span>
222 <span class="k">return</span> <span class="p">{</span> 223 <span class="na">count</span><span class="p">:</span> <span class="o">++</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">,</span> 224 <span class="p">};</span> 225 <span class="p">});</span> 226 <span class="p">};</span> 227 <span class="nx">componentDidMount</span><span class="p">()</span> <span class="p">{</span> 228 <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Box componentDidMount</span><span class="dl">'</span><span class="p">);</span> 229 <span class="p">}</span> 230 <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> 231 <span class="k">return</span> <span class="p">(</span> 232 <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">ç¹å»æ¬¡æ°</span><span class="p">({</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">})</span><span class="o"><</span><span class="sr">/button</span><span class="err">> 233</span> <span class="p">);</span> 234 <span class="p">}</span> 235<span class="p">}</span> 236<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span> 237</code></pre></div></div> 238 239<p>æ¬æ¬¡æä»¬æ¥åæ button æé®è¢«ç¹å»åï¼é¡µé¢ç渲æè¿ç¨ã</p> 240 241<p>馿¬¡ mount åç fiber æ ç¶æå¦ä¸ï¼</p> 242 243<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/efbf460e-59c4-6fc2-b0ed-52ce3b6064c9.png" alt="" /></p> 244 245<h2 id="setstate">setState</h2> 246<p>æä»¬è·³è¿äºä»¶ååæºå¶ï¼ä» setState æ§è¡è¯´èµ·</p> 247 248<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Component</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">setState</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">partialState</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> 249 <span class="k">this</span><span class="p">.</span><span class="nx">updater</span><span class="p">.</span><span class="nx">enqueueSetState</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">partialState</span><span class="p">,</span> <span class="nx">callback</span><span class="p">,</span> <span class="dl">'</span><span class="s1">setState</span><span class="dl">'</span><span class="p">)</span> 250<span class="p">}</span> 251 252<span class="kd">const</span> <span class="nx">classComponentUpdater</span> <span class="o">=</span> <span class="p">{</span> 253 <span class="nx">isMounted</span><span class="p">,</span> 254 <span class="nx">enqueueSetState</span><span class="p">(</span><span class="nx">inst</span><span class="p">,</span> <span class="nx">payload</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span> 255 <span class="c1">// 1. è·åclasså®ä¾å¯¹åºçFiberèç¹</span> 256 <span class="kd">const</span> <span class="nx">fiber</span> <span class="o">=</span> <span class="nx">getInstance</span><span class="p">(</span><span class="nx">inst</span><span class="p">)</span> 257 <span class="c1">// 2. å建update对象</span> 258 <span class="err">â¦</span> 259 <span class="kd">const</span> <span class="nx">update</span> <span class="o">=</span> <span class="nx">createUpdate</span><span class="p">(</span><span class="nx">currentTime</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">,</span> <span class="nx">suspenseConfig</span><span class="p">)</span> 260 <span class="cm">/** 261 payload å°±æ¯setStateçè¿ä¸ªåè°å½æ° 262 state => { 263 return { 264 count:++state.count, 265 }; 266 } 267 */</span> 268 <span class="nx">update</span><span class="p">.</span><span class="nx">payload</span> <span class="o">=</span> <span class="nx">payload</span> 269 <span class="k">if</span> <span class="p">(</span><span class="nx">callback</span> <span class="o">!==</span> <span class="kc">undefined</span> <span class="o">&&</span> <span class="nx">callback</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
270 <span class="nx">update</span><span class="p">.</span><span class="nx">callback</span> <span class="o">=</span> <span class="nx">callback</span> 271 <span class="p">}</span> 272 <span class="c1">// 3. å°update对象添å å°å½åFiberèç¹çupdateQueueéåå½ä¸</span> 273 <span class="nx">enqueueUpdate</span><span class="p">(</span><span class="nx">fiber</span><span class="p">,</span> <span class="nx">update</span><span class="p">)</span> 274 <span class="c1">// 4. å¨å½åFiberèç¹ä¸è¿è¡è°åº¦æ´æ°</span> 275 <span class="nx">scheduleUpdateOnFiber</span><span class="p">(</span><span class="nx">fiber</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">)</span> 276 <span class="p">}</span> 277<span class="p">}</span> 278</code></pre></div></div> 279 280<p><code class="language-js highlighter-rouge"><span class="nx">setState</span></code> å¨ Box ç»ä»¶å¯¹åº fiber ç updateQueue ä¸, ç¶åè§¦åæ´æ°ã</p> 281 282<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/5e858ed6-0f42-694d-eae1-4e049944fa2b.png" alt="" /></p> 283 284<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/ffaff1a3-266d-bdf1-4852-f02bb045461b.png" alt="" /></p> 285 286<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">type</span> <span class="nx">ExecutionContext</span> <span class="o">=</span> <span class="nx">number</span><span class="p">;</span> 287 288<span class="kd">const</span> <span class="nx">NoContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b000000</span><span class="p">;</span> 289<span class="c1">// æ¹éæ´æ° batchedUpdates, 对åºéæ¹éæ´æ°ï¼å³ç´æ¥æ´æ°</span> 290<span class="kd">const</span> <span class="nx">BatchedContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b000001</span><span class="p">;</span> 291<span class="c1">// æ¹éäºä»¶æ´æ° batchedEventUpdates</span> 292<span class="kd">const</span> <span class="nx">EventContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b000010</span><span class="p">;</span> 293<span class="c1">// äºä»¶ dispatch çæ¶å</span> 294<span class="kd">const</span> <span class="nx">DiscreteEventContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b000100</span><span class="p">;</span> 295<span class="kd">const</span> <span class="nx">LegacyUnbatchedContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b001000</span><span class="p">;</span> 296<span class="c1">// æ¯å¦ renderRootSyncï¼ä¹å°±æ¯å»ºç« fiber æ çè¿ç¨</span> 297<span class="kd">const</span> <span class="nx">RenderContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b010000</span><span class="p">;</span> 298<span class="c1">// 渲æå commit çæ¶å</span> 299<span class="kd">const</span> <span class="nx">CommitContext</span> <span class="o">=</span> <span class="cm">/* */</span> <span class="mb">0b100000</span><span class="p">;</span> 300</code></pre></div></div> 301 302<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">function</span> <span class="nx">scheduleUpdateOnFiber</span><span class="p">(</span> 303 <span class="nx">fiber</span><span class="p">:</span> <span class="nx">Fiber</span><span class="p">,</span> 304 <span class="nx">expirationTime</span><span class="p">:</span> <span class="nx">ExpirationTime</span><span class="p">,</span> 305<span class="p">)</span> <span class="p">{</span> 306 <span class="kd">const</span> <span class="nx">root</span> <span class="o">=</span> <span class="nx">markUpdateTimeFromFiberToRoot</span><span class="p">(</span><span class="nx">fiber</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">);</span> 307 308 <span class="c1">// leagcyä¸, expirationTime = Sync</span> 309 <span class="k">if</span> <span class="p">(</span><span class="nx">expirationTime</span> <span class="o">===</span> <span class="nx">Sync</span><span class="p">)</span> <span class="p">{</span> 310 <span class="k">if</span> <span class="p">(</span>
311 <span class="p">(</span><span class="nx">executionContext</span> <span class="o">&</span> <span class="nx">LegacyUnbatchedContext</span><span class="p">)</span> <span class="o">!==</span> <span class="nx">NoContext</span> <span class="o">&&</span> 312 <span class="p">(</span><span class="nx">executionContext</span> <span class="o">&</span> <span class="p">(</span><span class="nx">RenderContext</span> <span class="o">|</span> <span class="nx">CommitContext</span><span class="p">))</span> <span class="o">===</span> <span class="nx">NoContext</span> 313 <span class="p">)</span> <span class="p">{</span> 314 <span class="c1">// ... ç¬¬ä¸æ¬¡renderè¿å ¥</span> 315 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 316 <span class="c1">// äºä»¶ååçæ¶åå¨ discreteUpdates 彿°é, ä¼ç» executionContext èµå¼</span> 317 <span class="c1">// executionContext |= DiscreteEventContext;</span> 318 <span class="c1">// æ´æ°æ¶è¿å ¥</span> 319 <span class="nx">ensureRootIsScheduled</span><span class="p">(</span><span class="nx">root</span><span class="p">);</span> 320 <span class="p">...</span> 321 <span class="p">}</span> 322 <span class="p">}</span> 323<span class="p">}</span> 324</code></pre></div></div> 325 326<h2 id="markupdatetimefromfibertoroot">markUpdateTimeFromFiberToRoot</h2> 327<p>ä»å½å fiber å¼å§ä¸ç´è®¿é®å°æ ¹èç¹ï¼ä¿®æ¹ææèç¹ç childExpirationTime.</p> 328 329<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">MAX_SIGNED_31_BIT_INT</span> <span class="o">=</span> <span class="mi">1073741823</span><span class="p">;</span> 330<span class="k">export</span> <span class="kd">const</span> <span class="nx">Sync</span> <span class="o">=</span> <span class="nx">MAX_SIGNED_31_BIT_INT</span><span class="p">;</span> <span class="c1">// æå¤§çç¬¦å·æ´å½¢æ°</span> 331 332<span class="kd">function</span> <span class="nx">markUpdateTimeFromFiberToRoot</span><span class="p">(</span><span class="nx">fiber</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">)</span> <span class="p">{</span> 333 <span class="c1">// Update the source fiber's expiration time</span> 334 <span class="k">if</span> <span class="p">(</span><span class="nx">fiber</span><span class="p">.</span><span class="nx">expirationTime</span> <span class="o"><</span> <span class="nx">expirationTime</span><span class="p">)</span> <span class="p">{</span> 335 <span class="nx">fiber</span><span class="p">.</span><span class="nx">expirationTime</span> <span class="o">=</span> <span class="nx">expirationTime</span><span class="p">;</span> 336 <span class="p">}</span> 337 <span class="kd">let</span> <span class="nx">alternate</span> <span class="o">=</span> <span class="nx">fiber</span><span class="p">.</span><span class="nx">alternate</span><span class="p">;</span> 338 <span class="k">if</span> <span class="p">(</span><span class="nx">alternate</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&&</span> <span class="nx">alternate</span><span class="p">.</span><span class="nx">expirationTime</span> <span class="o"><</span> <span class="nx">expirationTime</span><span class="p">)</span> <span class="p">{</span> 339 <span class="nx">alternate</span><span class="p">.</span><span class="nx">expirationTime</span> <span class="o">=</span> <span class="nx">expirationTime</span><span class="p">;</span> 340 <span class="p">}</span> 341 342 <span class="c1">// Walk the parent path to the root and update the child expiration time.</span> 343 <span class="kd">let</span> <span class="nx">node</span> <span class="o">=</span> <span class="nx">fiber</span><span class="p">.</span><span class="k">return</span><span class="p">;</span> 344 <span class="kd">let</span> <span class="nx">root</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> 345 <span class="k">if</span> <span class="p">(</span><span class="nx">node</span> <span class="o">===</span> <span class="kc">null</span> <span class="o">&&</span> <span class="nx">fiber</span><span class="p">.</span><span class="nx">tag</span> <span class="o">===</span> <span class="nx">HostRoot</span><span class="p">)</span> <span class="p">{</span> 346 <span class="nx">root</span> <span class="o">=</span> <span class="nx">fiber</span><span class="p">.</span><span class="nx">
346stateNode</span><span class="p">;</span> 347 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 348 <span class="k">while</span> <span class="p">(</span><span class="nx">node</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 349 <span class="nx">alternate</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">alternate</span><span class="p">;</span> 350 <span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">childExpirationTime</span> <span class="o"><</span> <span class="nx">expirationTime</span><span class="p">)</span> <span class="p">{</span> 351 <span class="nx">node</span><span class="p">.</span><span class="nx">childExpirationTime</span> <span class="o">=</span> <span class="nx">expirationTime</span><span class="p">;</span> 352 <span class="k">if</span> <span class="p">(</span> 353 <span class="nx">alternate</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&&</span> 354 <span class="nx">alternate</span><span class="p">.</span><span class="nx">childExpirationTime</span> <span class="o"><</span> <span class="nx">expirationTime</span> 355 <span class="p">)</span> <span class="p">{</span> 356 <span class="nx">alternate</span><span class="p">.</span><span class="nx">childExpirationTime</span> <span class="o">=</span> <span class="nx">expirationTime</span><span class="p">;</span> 357 <span class="p">}</span> 358 <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span> 359 <span class="nx">alternate</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&&</span> 360 <span class="nx">alternate</span><span class="p">.</span><span class="nx">childExpirationTime</span> <span class="o"><</span> <span class="nx">expirationTime</span> 361 <span class="p">)</span> <span class="p">{</span> 362 <span class="nx">alternate</span><span class="p">.</span><span class="nx">childExpirationTime</span> <span class="o">=</span> <span class="nx">expirationTime</span><span class="p">;</span> 363 <span class="p">}</span> 364 <span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="k">return</span> <span class="o">===</span> <span class="kc">null</span> <span class="o">&&</span> <span class="nx">node</span><span class="p">.</span><span class="nx">tag</span> <span class="o">===</span> <span class="nx">HostRoot</span><span class="p">)</span> <span class="p">{</span> 365 <span class="nx">root</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">stateNode</span><span class="p">;</span> 366 <span class="k">break</span><span class="p">;</span> 367 <span class="p">}</span> 368 <span class="nx">node</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="k">return</span><span class="p">;</span> 369 <span class="p">}</span> 370 <span class="p">}</span> 371<span class="p">}</span> 372</code></pre></div></div> 373<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/9cb97956-fa8f-de3d-b7df-9cc48468aeab.png" alt="" /></p> 374 375<blockquote> 376 <p>ç»è¿è¿ä¸ªè¿ç¨ï¼å¯ä»¥ä¿è¯åç»ç render é¶æ®µï¼å¦æåç°å©åçè¿ææ¶é´å°äºå½åæ¶é´ï¼æææ¯è¿ä¸ªå©åæ²¡ææ´æ°ï¼å忢è°åº¦</p> 377</blockquote> 378 379<h2 id="ensurerootisscheduled">ensureRootIsScheduled</h2> 380<p>ensureRootIsScheduled æ¶åè°åº¦æºå¶ï¼æä»¬ç®åçæå®ç解为æç»è§¦åäº performSyncWorkOnRootï¼è¿å ¥ render é¶æ®µã</p> 381 382<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/663bde0a-5eb4-5308-1b69-8a737674073a.png" alt="" /></p> 383 384<h2 id="preparefreshstack">prepareFreshStack</h2> 385<p>render é¶æ®µä¸å¼å§ï¼å åå¤ç¯å¢ãæ°å»ºäºä¸äºæéï¼æéè¦çæ¯æ workInProgress æå°äº fiberRoot.current.alternate 386<img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/d707a41d-509f-57b5-5122-aefcb869292d.png" alt="" /></p> 387 388<h2 id="è¿å ¥-workloop">è¿å ¥ workLoop</h2> 389<p>è¿å ¥ render é¶æ®µï¼å溯 fiber æ ï¼äº¤æ¿æ§è¡ beginWork å completeWorkã</p> 390 391<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">workInProgress</span> <span class="o">=</span> <span class="kc">null</span> 392 393<span class="kd">function</span> <span class="nx">workLoopSync</span><span class="p">()</span> <span class="p">{</span> 394 <span class="k">while</span> <span class="p">(</span><span class="nx">workInProgress</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 395 <span class="nx">performUnitOfWork</span><span class="p">(</span><span class="nx">workInProgress</span><span class="p">);</span> 396 <span class="p">}</span> 397<span class="p">}</span> 398 399<span class="c1">// ... 彿°ä¸çç¥äºä¸é¦æ¬¡renderæ å ³ä»£ç , å å ³å¿ä¸»æµç¨</span> 400<span class="kd">function</span> <span class="nx">performUnitOfWork</span><span class="p">(</span><span class="nx">unitOfWork</span><span class="p">:</span> <span class="nx">Fiber</span><span class="p">):</span> <span class="k">void</span> <span class="p">{</span> 401 <span class="c1">// ç¬¬ä¸æ¬¡renderæ¶, unitOfWork=HostRootFiber, alternateå·²ç»åå§å</span> 402 <span class="kd">const</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">unitOfWork</span><span class="p">.</span><span class="nx">alternate</span><span class="p">;</span> 403 <span class="kd">let</span> <span class="nx">next</span><span class="p">;</span> 404 <span class="c1">// 1. å建Fiberèç¹</span> 405 <span class="nx">next</span> <span class="o">=</span> <span class="nx">beginWork</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">unitOfWork</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">);</span> 406 <span class="nx">unitOfWork</span><span class="p">.</span><span class="nx">memoizedProps</span> <span class="o">=</span> <span class="nx">unitOfWork</span><span class="p">.</span><span class="nx">pendingProps</span><span class="p">;</span> 407 <span class="k">if</span> <span class="p">(</span><span class="nx">next</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 408 <span class="c1">//2. å¤çbeginWorkä¸çFiberèç¹</span> 409 <span class="nx">completeUnitOfWork</span><span class="p">(</span><span class="nx">unitOfWork</span><span class="p">);</span> 410 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 411 <span class="nx">workInProgress</span> <span class="o">=</span> <span class="nx">next</span><span class="p">;</span> 412 <span class="p">}</span> 413 <span class="c1">
413// ...</span> 414<span class="p">}</span> 415</code></pre></div></div> 416 417<h2 id="beginwork">beginWork</h2> 418 419<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">beginWork</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">)</span> <span class="p">{</span> 420 <span class="kd">const</span> <span class="nx">updateExpirationTime</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">expirationTime</span><span class="p">;</span> 421 422 <span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 423 <span class="kd">const</span> <span class="nx">oldProps</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">memoizedProps</span><span class="p">;</span> 424 <span class="kd">const</span> <span class="nx">newProps</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">pendingProps</span><span class="p">;</span> 425 426 <span class="k">if</span> <span class="p">(</span><span class="nx">oldProps</span> <span class="o">!==</span> <span class="nx">newProps</span> <span class="o">||</span> <span class="nx">hasLegacyContextChanged</span><span class="p">())</span> <span class="p">{</span> 427 <span class="c1">// props æ context æ¹åäº</span> 428 <span class="nx">didReceiveUpdate</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> 429 <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">updateExpirationTime</span> <span class="o"><</span> <span class="nx">renderExpirationTime</span><span class="p">)</span> <span class="p">{</span> 430 <span class="c1">// æ¤ fiber 没æååï¼NoWork, è¿ä¸ªåæ¯ç主è¦é»è¾æ¯å éå©åå¹¶è¿å</span> 431 <span class="nx">didReceiveUpdate</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> 432 <span class="c1">// ...</span> 433 <span class="k">return</span> <span class="nx">bailoutOnAlreadyFinishedWork</span><span class="p">(</span> 434 <span class="nx">current</span><span class="p">,</span> 435 <span class="nx">workInProgress</span><span class="p">,</span> 436 <span class="nx">renderExpirationTime</span><span class="p">,</span> 437 <span class="p">);</span> 438 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 439 <span class="c1">// setState</span> 440 <span class="nx">didReceiveUpdate</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> 441 <span class="p">}</span> 442 <span class="p">}</span> 443 444 <span class="c1">// Before entering the begin phase, clear pending update priority.</span> 445 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">expirationTime</span> <span class="o">=</span> <span class="nx">NoWork</span><span class="p">;</span> 446 447 <span class="k">switch</span> <span class="p">(</span><span class="nx">workInProgress</span><span class="p">.</span><span class="nx">tag</span><span class="p">)</span> <span class="p">{</span> 448 <span class="k">case</span> <span class="nx">XXXComponent</span><span class="p">:</span> <span class="p">{</span> 449 <span class="c1">// ...</span> 450 <span class="k">return</span> <span class="nx">updateXXXComponent</span><span class="p">(...)</span> 451 <span class="c1">// ...</span> 452 <span class="p">}</span> 453 <span class="p">}</span> 454<span class="p">}</span> 455</code></pre></div></div> 456 457<p>彿°å¼å§æ 3 ä¸ªåæ¯ï¼</p> 458<ol> 459 <li>props æè context æ¹åï¼didReceiveUpdate 设置æ trueï¼è° updateXXX 彿°</li> 460 <li>æ props åå乿 state ååï¼åæ§è¡bailoutOnAlreadyFinishedWork</li> 461 <li>å¦ææ¯ state ååï¼å didReceiveUpdate 为 falseï¼è° updateXXX 彿°</li> 462</ol> 463
464<h1 id="åæä¾å">åæä¾å</h1> 465<p>ä¸é¢æä»¬æ¥åææç« å¼å¤´è¯´çä¾åï¼é¦å æ¯ <code class="language-js highlighter-rouge"><span class="nx">RootFiber</span></code> ç <code class="language-js highlighter-rouge"><span class="nx">beginWork</span></code>ã</p> 466 467<h2 id="beginwork-for-rootfiber">beginWork for RootFiber</h2> 468 469<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/29037114-30b2-ead5-68b8-00674a16c815.png" alt="" /></p> 470 471<p>è¿å ¥ç¬¬ 2 ä¸ªåæ¯ï¼è°ç¨ bailoutOnAlreadyFinishedWork 对å©åè¿è¡å éã</p> 472<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">bailoutOnAlreadyFinishedWork</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">,)</span> <span class="p">{</span> 473 <span class="p">...</span> 474 <span class="kd">const</span> <span class="nx">childExpirationTime</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">childExpirationTime</span><span class="p">;</span> 475 <span class="k">if</span> <span class="p">(</span><span class="nx">childExpirationTime</span> <span class="o"><</span> <span class="nx">renderExpirationTime</span><span class="p">)</span> <span class="p">{</span> 476 <span class="c1">// æ¤ fiber çå©å乿²¡ææ´æ°</span> 477 <span class="k">return</span> <span class="kc">null</span><span class="p">;</span> 478 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 479 <span class="c1">// å©åææ´æ°ï¼å¯¹å©åè¿è¡ä¸å±å é</span> 480 <span class="nx">cloneChildFibers</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">);</span> 481 <span class="k">return</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span> 482 <span class="p">}</span> 483<span class="p">}</span> 484</code></pre></div></div> 485<p>注æ <code class="language-js highlighter-rouge"><span class="nx">childExpirationTime</span> <span class="o"><</span> <span class="nx">renderExpirationTime</span></code> è¿ä¸ªåæ¯ï¼ä¼è·³è¿å¯¹æ¤åæ¯çæ´æ°ï¼è¿å°±æ¯ <code class="language-js highlighter-rouge"><span class="nx">markUpdateTimeFromFiberToRoot</span></code> çä½ç¨ï¼ä¼åäºä¸éè¦æ´æ°ç忝ã</p> 486 487<p>æ¤æ¬¡ beginWork åï¼fiber æ ç示æï¼ 488<img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/26084b59-00df-ef53-30ae-e5373aa59399.png" alt="" /></p> 489 490<h2 id="beginwork-for-app-and-div">beginWork for App and div</h2> 491<p>è¿ç¨å RootFiber ç±»ä¼¼ï¼æ¤ 2 次 beginWork åï¼fiber æ ç示æï¼ 492<img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/c583e639-d057-aba6-e00f-1ac90e8f2be3.png" alt="" /></p> 493 494<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/52978704-1ba4-a7c4-f182-dd9132d673b1.png" alt="" /></p> 495 496<h2 id="beginwork-for-box">beginWork for Box</h2> 497<p>æ¾ç¶è¿æ¬¡ä¼è¿å ¥ beginWork ç第 3 ä¸ªåæ¯ã</p> 498 499<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/df3b68a7-b71b-59e5-1697-776451807af8.png" alt="" /></p> 500 501<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">beginWork</span><span class="p">()</span> <span class="p">{</span> 502 <span class="c1">// ...</span> 503 <span class="k">case</span> <span class="nx">ClassComponent</span><span class="p">:</span> <span class="p">{</span> 504 <span class="c1">// ...</span> 505 <span class="k">return</span> <span class="nx">updateClassComponent</span><span class="p">(</span> 506 <span class="nx">current</span><span class="p">,</span> 507 <span class="nx">workInProgress</span><span class="p">,</span>
508 <span class="nx">Component</span><span class="p">,</span> 509 <span class="nx">resolvedProps</span><span class="p">,</span> 510 <span class="nx">renderExpirationTime</span><span class="p">,</span> 511 <span class="p">);</span> 512 <span class="p">}</span> 513<span class="p">}</span> 514</code></pre></div></div> 515 516<p><code class="language-js highlighter-rouge"><span class="nx">updateClassComponent</span></code> 主è¦å°±æ¯ 2 个æ¥éª¤ï¼<code class="language-js highlighter-rouge"><span class="nx">updateClassInstance</span></code> å <code class="language-js highlighter-rouge"><span class="nx">finishClassComponent</span></code>ã</p> 517 518<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">updateClassComponent</span><span class="p">(...)</span> <span class="p">{</span> 519 <span class="kd">const</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">stateNode</span><span class="p">;</span> 520 <span class="kd">let</span> <span class="nx">shouldUpdate</span><span class="p">;</span> 521 522 <span class="nx">shouldUpdate</span> <span class="o">=</span> <span class="nx">updateClassInstance</span><span class="p">(</span> 523 <span class="nx">current</span><span class="p">,</span> 524 <span class="nx">workInProgress</span><span class="p">,</span> 525 <span class="nx">Component</span><span class="p">,</span> 526 <span class="nx">nextProps</span><span class="p">,</span> 527 <span class="nx">renderExpirationTime</span><span class="p">,</span> 528 <span class="p">);</span> 529 530 <span class="kd">const</span> <span class="nx">nextUnitOfWork</span> <span class="o">=</span> <span class="nx">finishClassComponent</span><span class="p">(</span> 531 <span class="nx">current</span><span class="p">,</span> 532 <span class="nx">workInProgress</span><span class="p">,</span> 533 <span class="nx">Component</span><span class="p">,</span> 534 <span class="nx">shouldUpdate</span><span class="p">,</span> 535 <span class="nx">hasContext</span><span class="p">,</span> 536 <span class="nx">renderExpirationTime</span><span class="p">,</span> 537 <span class="p">);</span> 538 <span class="k">return</span> <span class="nx">nextUnitOfWork</span><span class="p">;</span> 539<span class="p">}</span> 540</code></pre></div></div> 541 542<h3 id="updateclassinstance">updateClassInstance</h3> 543<p><code class="language-js highlighter-rouge"><span class="nx">updateClassInstance</span></code> 主è¦å以ä¸å·¥ä½ï¼</p> 544<ul> 545 <li>å¤ç <code class="language-js highlighter-rouge"><span class="nx">updateQueue</span></code></li> 546 <li>è°ç¨ <code class="language-js highlighter-rouge"><span class="nx">getDerivedStateFromProps</span></code></li> 547 <li>è°ç¨ <code class="language-js highlighter-rouge"><span class="nx">souldComponentUpdate</span></code></li> 548</ul> 549 550<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Invokes the update life-cycles and returns false if it shouldn't rerender.</span> 551<span class="kd">function</span> <span class="nx">updateClassInstance</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">,</span> <span class="nx">ctor</span><span class="p">,</span> <span class="nx">newProps</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">,)</span> <span class="p">{</span> 552 <span class="kd">const</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">stateNode</span><span class="p">;</span> 553 <span class="nx">cloneUpdateQueue</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">);</span> 554 <span class="p">...</span> 555 <span class="kd">const</span> <span class="nx">getDerivedStateFromProps</span> <span class="o">=</span> <span class="nx">ctor</span><span class="p">.</span><span class="nx">getDerivedStateFromProps</span><span class="p">;</span> 556 557 <span class="kd">const</span> <span class="nx">oldState</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">memoizedState</span><span class="p">;</span> 558 <span class="kd">let</span> <span class="nx">newState</span> <span class="o">=</span> <span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="nx">oldState</span><span class="p">);</span> 559 <span class="c1">
559// å¤ç updateQueue</span> 560 <span class="nx">processUpdateQueue</span><span class="p">(</span><span class="nx">workInProgress</span><span class="p">,</span> <span class="nx">newProps</span><span class="p">,</span> <span class="nx">instance</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">);</span> 561 <span class="nx">newState</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">memoizedState</span><span class="p">;</span> 562 563 <span class="c1">// â¦</span> 564 565 <span class="c1">// è°ç¨çå½å¨æ getDerivedStateFromProps</span> 566 <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">getDerivedStateFromProps</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">function</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> 567 <span class="nx">applyDerivedStateFromProps</span><span class="p">(</span><span class="nx">workInProgress</span><span class="p">,</span> <span class="nx">ctor</span><span class="p">,</span> <span class="nx">getDerivedStateFromProps</span><span class="p">,</span> <span class="nx">newProps</span><span class="p">);</span> 568 <span class="nx">newState</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">memoizedState</span><span class="p">;</span> 569 <span class="p">}</span> 570 571 <span class="c1">// è°ç¨ shouldComponentUpdate</span> 572 <span class="kd">const</span> <span class="nx">shouldUpdate</span> <span class="o">=</span> <span class="nx">checkHasForceUpdateAfterProcessing</span><span class="p">()</span> 573 <span class="o">||</span> <span class="nx">checkShouldComponentUpdate</span><span class="p">(</span><span class="err">â¦</span><span class="p">);</span> 574 575 <span class="k">if</span> <span class="p">(</span><span class="nx">shouldUpdate</span><span class="p">)</span> <span class="p">{</span> 576 <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">instance</span><span class="p">.</span><span class="nx">componentDidUpdate</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">function</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> 577 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">effectTag</span> <span class="o">|=</span> <span class="nx">Update</span><span class="p">;</span> 578 <span class="p">}</span> 579 <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">instance</span><span class="p">.</span><span class="nx">getSnapshotBeforeUpdate</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">function</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> 580 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">effectTag</span> <span class="o">|=</span> <span class="nx">Snapshot</span><span class="p">;</span> 581 <span class="p">}</span> 582 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 583 <span class="p">...</span> 584 <span class="p">}</span> 585 586 <span class="c1">// Update the existing instance's state, props, and context pointers even</span> 587 <span class="c1">// if shouldComponentUpdate returns false.</span> 588 <span class="nx">instance</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">newProps</span><span class="p">;</span> 589 <span class="nx">instance</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="nx">newState</span><span class="p">;</span> 590 <span class="nx">instance</span><span class="p">.</span><span class="nx">context</span> <span class="o">=</span> <span class="nx">nextContext</span><span class="p">;</span> 591 592 <span class="k">return</span> <span class="nx">shouldUpdate</span><span class="p">;</span> 593<span class="p">}</span> 594</code></pre></div></div> 595 596<p><code class="language-js highlighter-rouge"><span class="nx">processUpdateQueue</span></code> 主è¦å°±æ¯éå <code class="language-js highlighter-rouge"><span class="nx">updateQueue</span></code> 便¬¡å¯¹ state è¿è¡æ´æ°ï¼ä»èå¾å°ææ°ç stateã</p> 597 598<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">function</span> <span class="nx">processUpdateQueue</span><span class="o"><</span><span class="nx">State</span><span class="o">></span><span class="p">(</span><span class="err">â¦</span><span class="p">):</span> <span class="k">void</span> <span class="p">{</span> 599 <span class="c1">// This is always non-null on a ClassComponent or HostRoot</span> 600 <span class="kd">const</span> <span class="na">queue</span><span class="p">:</span> <span class="nx">UpdateQueue</span><span class="o"><</span><span class="nx">State</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">workInProgress</span><span class="p">.</span><span class="na">updateQueue</span><span class="p">:</span> <span class="nx">any</span><span class="p">);</span> 601 602 <span class="kd">let</span> <span class="nx">firstBaseUpdate</span> <span class="o">=</span> <span class="nx">queue</span><span class="p">.</span><span class="nx">firstBaseUpdate</span><span class="p">;</span> 603 604 <span class="c1">// These values may change as we process the queue.</span> 605 <span class="k">if</span> <span class="p">(</span><span class="nx">firstBaseUpdate</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 606 <span class="c1">// Iterate through the list of updates to compute the result.</span> 607 <span class="kd">let</span> <span class="nx">newState</span> <span class="o">=</span> <span class="nx">queue</span><span class="p">.</span><span class="nx">baseState</span><span class="p">;</span> 608 609 <span class="c1">
609// ...</span> 610 611 <span class="kd">let</span> <span class="nx">update</span> <span class="o">=</span> <span class="nx">firstBaseUpdate</span><span class="p">;</span> 612 <span class="c1">// éå queue 对没ä¸ä¸ª update åå¤ç</span> 613 <span class="k">do</span> <span class="p">{</span> 614 <span class="c1">// Process this update.</span> 615 <span class="nx">newState</span> <span class="o">=</span> <span class="nx">getStateFromUpdate</span><span class="p">(</span> 616 <span class="nx">workInProgress</span><span class="p">,</span> 617 <span class="nx">queue</span><span class="p">,</span> 618 <span class="nx">update</span><span class="p">,</span> 619 <span class="nx">newState</span><span class="p">,</span> 620 <span class="nx">props</span><span class="p">,</span> 621 <span class="nx">instance</span><span class="p">,</span> 622 <span class="p">);</span> 623 624 <span class="kd">const</span> <span class="nx">callback</span> <span class="o">=</span> <span class="nx">update</span><span class="p">.</span><span class="nx">callback</span><span class="p">;</span> 625 <span class="k">if</span> <span class="p">(</span><span class="nx">callback</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 626 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">effectTag</span> <span class="o">|=</span> <span class="nx">Callback</span><span class="p">;</span> 627 <span class="kd">const</span> <span class="nx">effects</span> <span class="o">=</span> <span class="nx">queue</span><span class="p">.</span><span class="nx">effects</span><span class="p">;</span> 628 <span class="k">if</span> <span class="p">(</span><span class="nx">effects</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 629 <span class="nx">queue</span><span class="p">.</span><span class="nx">effects</span> <span class="o">=</span> <span class="p">[</span><span class="nx">update</span><span class="p">];</span> 630 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 631 <span class="nx">effects</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span> 632 <span class="p">}</span> 633 <span class="p">}</span> 634 635 <span class="nx">update</span> <span class="o">=</span> <span class="nx">update</span><span class="p">.</span><span class="nx">next</span><span class="p">;</span> 636 637 <span class="c1">// ...</span> 638 639 <span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="kc">true</span><span class="p">);</span> 640 641 <span class="k">if</span> <span class="p">(</span><span class="nx">newLastBaseUpdate</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 642 <span class="nx">newBaseState</span> <span class="o">=</span> <span class="nx">newState</span><span class="p">;</span> 643 <span class="p">}</span> 644 645 <span class="nx">queue</span><span class="p">.</span><span class="nx">baseState</span> <span class="o">=</span> <span class="p">((</span><span class="na">newBaseState</span><span class="p">:</span> <span class="nx">any</span><span class="p">):</span> <span class="nx">State</span><span class="p">);</span> 646 647 <span class="c1">// ...</span> 648 649 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">memoizedState</span> <span class="o">=</span> <span class="nx">newState</span><span class="p">;</span> 650 <span class="p">}</span> 651<span class="p">}</span> 652</code></pre></div></div> 653 654<p>ç»å以ä¸ç <code class="language-js highlighter-rouge"><span class="nx">updateClassInstance</span></code> è¿ç¨åï¼æä»¬å°±å¾å°äºè¯¥ç»ä»¶çææ° stateï¼ç°å¨éè¦éæ°æ§è¡ç»ä»¶ç render 彿°æ¥è·å¾æ°çèæ domãæ§è¡ diff ç®æ³ãç¶åç» fiber æä¸æ´æ°æ è®°ãè¿æ£æ¯ <code class="language-js highlighter-rouge"><span class="nx">finishClassComponent</span></code> è¦åçäºã</p> 655 656<h3 id="finishclasscomponent">finishClassComponent</h3> 657 658<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">finishClassComponent</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">,</span> <span class="err">â¦</span><span class="p">)</span> <span class="p">{</span> 659 <span class="c1">
659// ...</span> 660 <span class="kd">const</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">stateNode</span><span class="p">;</span> 661 662 <span class="c1">// Rerender</span> 663 <span class="nx">ReactCurrentOwner</span><span class="p">.</span><span class="nx">current</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">;</span> 664 <span class="kd">let</span> <span class="nx">nextChildren</span><span class="p">;</span> 665 <span class="c1">// ...</span> 666 <span class="c1">// è°ç¨ render</span> 667 <span class="cm">/** 668 render() { 669 return ( 670 <button onClick={this.handleClick}>ç¹å»æ¬¡æ°({this.state.count})</button> 671 ); 672 } 673 */</span> 674 <span class="nx">nextChildren</span> <span class="o">=</span> <span class="nx">instance</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span> 675 <span class="c1">// ...</span> 676 <span class="c1">// React DevTools reads this flag.</span> 677 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">effectTag</span> <span class="o">|=</span> <span class="nx">PerformedWork</span><span class="p">;</span> 678 679 <span class="c1">// è°ç¨ render, åè°å©å, 峿è°ç diff ç®æ³</span> 680 <span class="nx">reconcileChildren</span><span class="p">(</span> 681 <span class="nx">current</span><span class="p">,</span> 682 <span class="nx">workInProgress</span><span class="p">,</span> 683 <span class="nx">nextChildren</span><span class="p">,</span> 684 <span class="nx">renderExpirationTime</span><span class="p">,</span> 685 <span class="p">);</span> 686 <span class="c1">// ...</span> 687 <span class="k">return</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span> 688<span class="p">}</span> 689</code></pre></div></div> 690 691<p>nextChildren æ¾ç¶æ¯ render 渲æåºæ¥çèæ domï¼ä»æ¯ä¸ä¸ªå¯¹è±¡ï¼</p> 692 693<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/34506eb4-44a4-11bc-a6c7-be7f6957dd18.png" alt="" /></p> 694 695<p>ä¸é¢å³å°è¿å ¥ diff ç®æ³ï¼å³ç¨ä»£è¡¨é¡µé¢å½åçå åç»æå 代表页é¢å°åæçå åç»æ 对对æ¯ï¼å¹¶æ¾åºå·®å¼ã</p> 696<ul> 697 <li>ç°å¨ï¼current fiber</li> 698 <li>æªæ¥ï¼render çè¿ä¸ªè¿åï¼å³èæ dom 对象 699æä»¬ç°å¨çå½åè¿ä¸ªç®å singleElement åºæ¯ã</li> 700</ul> 701 702<blockquote> 703 <p>å¯ä»¥çåº react diff ç®æ³æ¯ fiber é¾è¡¨å vdom (å¯¹è±¡ãæ°ç») ç对æ¯ï¼è¿å vue å°±å¾ä¸ç¸åï¼vue ç diff ç®æ³å°±æ¯ vdom å vdom ä¹é´ç对æ¯ãé£ä¹ï¼æ³ä¸æ³åªä¸ä¸ªæ´é«æå¢ï¼</p> 704</blockquote> 705 706<h3 id="reconcilechildren---singleelement">reconcileChildren - singleElement</h3> 707 708<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">function</span> <span class="nx">reconcileChildren</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">,</span> 709 <span class="nx">nextChildren</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">)</span> <span class="p">{</span> 710 <span class="c1">// æ¤æ¶ current è¯å®ä¸æ¯ç©º, 为空æ¯é¦æ¬¡æ¸²æè¯¥ç»ä»¶çåºæ¯</span> 711 <span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 712 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">child</span> <span class="o">=</span> <span class="nx">mountChildFibers</span><span class="p">(</span> 713 <span class="nx">workInProgress</span><span class="p">,</span> 714 <span class="kc">null</span><span class="p">,</span> 715 <span class="nx">nextChildren</span><span class="p">,</span> 716 <span class="nx">renderExpirationTime</span><span class="p">,</span> 717 <span class="p">);</span> 718 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 719 <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">child</span> <span class="o">=</span> <span class="nx">reconcileChildFibers</span><span class="p">(</span>
720 <span class="nx">workInProgress</span><span class="p">,</span> 721 <span class="nx">current</span><span class="p">.</span><span class="nx">child</span><span class="p">,</span> <span class="c1">// ä½ è½è¯´åºè¿ä¸ªå鿝ä¸é¢å å示æå¾éçåªä¸ä¸ªä¹ï¼</span> 722 <span class="nx">nextChildren</span><span class="p">,</span> 723 <span class="nx">renderExpirationTime</span><span class="p">,</span> 724 <span class="p">);</span> 725 <span class="p">}</span> 726<span class="p">}</span> 727</code></pre></div></div> 728 729<p><code class="language-js highlighter-rouge"><span class="nx">nextChildren</span></code> æ¯ä¸ä¸ªå¯¹è±¡ï¼èéæ°ç»ï¼è¿æå³çæä»¬çç®æ æ¯æ¸²æä¸ä¸ªåå ç´ ï¼æä»¥è¿æ¬¡ä¼èµ°è¿ <code class="language-js highlighter-rouge"><span class="nx">reconcileSingleElement</span></code> çåå ç´ åè°é»è¾ã</p> 730 731<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">reconcileChildFibers</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">currentFirstChild</span><span class="p">,</span> <span class="nx">newChild</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">,)</span> <span class="p">{</span> 732 <span class="c1">// ...</span> 733 <span class="c1">// ç°å¨ newChild æ¯å¯¹è±¡ç±»å</span> 734 <span class="kd">const</span> <span class="nx">isObject</span> <span class="o">=</span> <span class="k">typeof</span> <span class="nx">newChild</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">object</span><span class="dl">'</span> <span class="o">&&</span> <span class="nx">newChild</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">;</span> 735 736 <span class="k">if</span> <span class="p">(</span><span class="nx">isObject</span><span class="p">)</span> <span class="p">{</span> 737 <span class="k">switch</span> <span class="p">(</span><span class="nx">newChild</span><span class="p">.</span><span class="nx">$$typeof</span><span class="p">)</span> <span class="p">{</span> 738 <span class="k">case</span> <span class="nx">REACT_ELEMENT_TYPE</span><span class="p">:</span> 739 <span class="k">return</span> <span class="nx">placeSingleChild</span><span class="p">(</span> 740 <span class="nx">reconcileSingleElement</span><span class="p">(</span> 741 <span class="nx">returnFiber</span><span class="p">,</span> 742 <span class="nx">currentFirstChild</span><span class="p">,</span> 743 <span class="nx">newChild</span><span class="p">,</span> 744 <span class="nx">expirationTime</span><span class="p">,</span> 745 <span class="p">),</span> 746 <span class="p">);</span> 747 <span class="p">}</span> 748 <span class="p">}</span> 749 <span class="c1">// ...</span> 750<span class="p">}</span> 751</code></pre></div></div> 752 753<p>æ³ä¸æ³ï¼ç»ä½ ä¸ä¸ªåé¾è¡¨ï¼èä½ çç®æ æ¯æ¸²æä¸ä¸ªå ç´ ï¼ç¨æå°ç代价åå»ºåºæ°ç fiberã</p> 754 755<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/7eea1903-a0c2-bc43-cb69-9838dd26e590.png" alt="" /></p> 756 757<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">reconcileSingleElement</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">currentFirstChild</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">)</span> <span class="p">{</span> 758 <span class="kd">const</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">key</span><span class="p">;</span> 759 <span class="kd">let</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">currentFirstChild</span><span class="p">;</span> 760 761 <span class="k">while</span> <span class="p">(</span><span class="nx">child</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 762 <span class="c1">// 妿 key å child.key 齿¯ nullï¼é£ä¹åªæç¬¬ä¸ä¸ªå ç´ ä¼è¢«éåå°</span> 763 <span class="k">if</span> <span class="p">(</span><span class="nx">child</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// key æ¯ç®æ ç, è¿å ¥è¿ä¸ªåæ¯è¯´ææ¾å°äº key ç¸åçã</span>
764 <span class="k">switch</span> <span class="p">(</span><span class="nx">child</span><span class="p">.</span><span class="nx">tag</span><span class="p">)</span> <span class="p">{</span> 765 <span class="c1">// ...</span> 766 <span class="nl">default</span><span class="p">:</span> <span class="p">{</span> 767 <span class="k">if</span> <span class="p">(</span><span class="nx">child</span><span class="p">.</span><span class="nx">elementType</span> <span class="o">===</span> <span class="nx">element</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// 妿 type ä¹ç¸å</span> 768 <span class="nx">deleteRemainingChildren</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">child</span><span class="p">.</span><span class="nx">sibling</span><span class="p">);</span> 769 <span class="kd">const</span> <span class="nx">existing</span> <span class="o">=</span> <span class="nx">useFiber</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">);</span> 770 <span class="nx">existing</span><span class="p">.</span><span class="nx">ref</span> <span class="o">=</span> <span class="nx">coerceRef</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">child</span><span class="p">,</span> <span class="nx">element</span><span class="p">);</span> 771 <span class="nx">existing</span><span class="p">.</span><span class="k">return</span> <span class="o">=</span> <span class="nx">returnFiber</span><span class="p">;</span> 772 <span class="k">return</span> <span class="nx">existing</span><span class="p">;</span> 773 <span class="p">}</span> 774 <span class="k">break</span><span class="p">;</span> 775 <span class="p">}</span> 776 <span class="p">}</span> 777 <span class="c1">// æ¾å° key ç¸åçï¼ä½æ¯ type ä¸ä¸æ ·ï¼é£ä¹å ¨å äº</span> 778 <span class="nx">deleteRemainingChildren</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">child</span><span class="p">);</span> 779 <span class="k">break</span><span class="p">;</span> 780 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 781 <span class="c1">// 妿䏿¯ï¼å äº</span> 782 <span class="nx">deleteChild</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">child</span><span class="p">);</span> 783 <span class="p">}</span> 784 <span class="nx">child</span> <span class="o">=</span> <span class="nx">child</span><span class="p">.</span><span class="nx">sibling</span><span class="p">;</span> 785 <span class="p">}</span> 786 787 <span class="c1">// ...</span> 788 <span class="c1">// å¦ææ²¡æ¾å°ï¼å建ä¸ä¸ªï¼å¹¶è¿å</span> 789 <span class="kd">const</span> <span class="nx">created</span> <span class="o">=</span> <span class="nx">createFiberFromElement</span><span class="p">(</span> 790 <span class="nx">element</span><span class="p">,</span> 791 <span class="nx">returnFiber</span><span class="p">.</span><span class="nx">mode</span><span class="p">,</span> 792 <span class="nx">expirationTime</span><span class="p">,</span> 793 <span class="p">);</span> 794 <span class="nx">created</span><span class="p">.</span><span class="nx">ref</span> <span class="o">=</span> <span class="nx">coerceRef</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">currentFirstChild</span><span class="p">,</span> <span class="nx">element</span><span class="p">);</span> 795 <span class="nx">created</span><span class="p">.</span><span class="k">return</span> <span class="o">=</span> <span class="nx">returnFiber</span><span class="p">;</span> 796 <span class="k">return</span> <span class="nx">created</span><span class="p">;</span> 797<span class="p">}</span> 798</code></pre></div></div> 799 800<p>éå fiber é¾ï¼å°è¯æ¾å° key ç¸åçã妿æ¾å°äºï¼è¿è¦ç type æ¯å¦ç¸å</p> 801<ul> 802 <li>妿 type ä¹ç¸åï¼é£ä¹å³å¤ç¨æ¤ fiber, å é¤å©ä½ç</li> 803 <li>妿 type ä¸ç¸åï¼é£ä¹åå 餿æç fiber</li> 804</ul> 805 806<p>æä»¬æ¥çäºä¾åï¼ 807<img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/e1ea6fdb-b337-04cb-1da9-eb4e05a5ba00.png" alt="" /></p> 808 809<p>å尿们çä¾åéï¼fiber é¾åªæ 1 个å ç´ ï¼ç®æ 乿¯ä¸ä¸ªå ç´ ï¼key 齿¯ undefined, type 齿¯ buttonï¼é£èªç¶å°±å¤ç¨äºã æä»¥è¿ä¸æ¥å
809ï¼fiber æ æ¯è¿æ ·çï¼</p> 810 811<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/c9094ff0-283f-5526-b876-e97cf53e6960.png" alt="" /></p> 812 813<p>ä¸é¢ç»§ç»å¯¹ button fiber å beginWork</p> 814 815<h2 id="beginwork-for-button-fiber">beginWork for button fiber</h2> 816<p>button æ¯ HostFiber çç±»åï¼æä»¥ beginWork ä¼èµ°è¿ updateHostComponent çé»è¾ãæ¥å ¥è¿æ¯èµ°è¿äº reconcileChildren ç diff é»è¾ã</p> 817<blockquote> 818 <p>react éç diff ç®æ³ï¼å« reconcileï¼æä»¥ä¹å«åè°ç®æ³ã</p> 819</blockquote> 820 821<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">updateHostComponent</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">workInProgress</span><span class="p">,</span> <span class="nx">renderExpirationTime</span><span class="p">)</span> <span class="p">{</span> 822 <span class="c1">// ...</span> 823 <span class="kd">const</span> <span class="nx">nextProps</span> <span class="o">=</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">pendingProps</span><span class="p">;</span> 824 825 <span class="kd">let</span> <span class="nx">nextChildren</span> <span class="o">=</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">children</span><span class="p">;</span> 826 827 <span class="nx">reconcileChildren</span><span class="p">(</span> 828 <span class="nx">current</span><span class="p">,</span> 829 <span class="nx">workInProgress</span><span class="p">,</span> 830 <span class="nx">nextChildren</span><span class="p">,</span> 831 <span class="nx">renderExpirationTime</span><span class="p">,</span> 832 <span class="p">);</span> 833 <span class="k">return</span> <span class="nx">workInProgress</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span> 834<span class="p">}</span> 835</code></pre></div></div> 836 837<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">reconcileChildFibers</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">currentFirstChild</span><span class="p">,</span> <span class="nx">newChild</span><span class="p">,</span> <span class="nx">expirationTime</span><span class="p">,)</span> <span class="p">{</span> 838 <span class="c1">// ...</span> 839 <span class="c1">// ç°å¨ newChild è¿æ¬¡æ¯æ°ç»äº</span> 840 <span class="k">if</span> <span class="p">(</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">newChild</span><span class="p">))</span> <span class="p">{</span> 841 <span class="k">return</span> <span class="nx">reconcileChildrenArray</span><span class="p">(</span> 842 <span class="nx">returnFiber</span><span class="p">,</span> 843 <span class="nx">currentFirstChild</span><span class="p">,</span> 844 <span class="nx">newChild</span><span class="p">,</span> 845 <span class="nx">expirationTime</span><span class="p">,</span> 846 <span class="p">);</span> 847 <span class="p">}</span> 848 <span class="c1">// ...</span> 849<span class="p">}</span> 850</code></pre></div></div> 851 852<p><code class="language-js highlighter-rouge"><span class="nx">reconcileChildrenArray</span></code> å°±æ¯ react diff çæ ¸å¿é¨åäºï¼å³è®¾è®¡é¾è¡¨åæ°ç»ä¹é´ç diffã</p> 853 854<h3 id="reconcilechildren---array---reconcilechildren">reconcileChildren - Array - reconcileChildren</h3> 855 856<p>æä»¬é¢ä¸´çé®é¢ï¼</p> 857 858<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/700fdc21-c4d1-0260-ed1f-4c78df3e93b4.png" alt="" /></p> 859 860<blockquote> 861 <p>æ¤ä¾çåºæ¯ååç®åï¼å®é æ åµä¼ææå ¥ï¼ç§»å¨ï¼çè³å转çå¤æåºæ¯ã</p> 862</blockquote> 863 864<p>æ¤ç®æ³ä¸»è¦ç± 3 个循ç¯ç»æï¼</p> 865<ul> 866 <li>第 1 个循ç¯ï¼éå newChildren å fiber é¾ï¼å¯¹ key ç¸åç fiber å updateSlot æä½ã</li> 867</ul> 868 869<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="p">(;</span> <span class="nx">oldFiber</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&&</span> <span class="nx">newIdx</span> <span class="o"><</span> <span class="nx">newChildren</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">newIdx</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> 870 <span class="nx">nextOldFiber</span> <span class="o">=</span> <span class="nx">oldFiber</span><span class="p">.</span><span class="nx">sibling</span><span class="p">;</span> 871 872 <span class="c1">// 妿 Key match å对 old fiber åæ´æ°ï¼å¦åè¿å null</span> 873 <span class="kd">const</span> <span class="nx">newFiber</span> <span class="o">=</span> <span class="nx">updateSlot</span><span class="p">(</span> 874 <span class="nx">returnFiber</span><span class="p">,</span> 875 <span class="nx">oldFiber</span><span class="p">,</span> 876 <span class="nx">newChildren</span><span class="p">[</span><span class="nx">newIdx</span><span class="p">],</span> 877 <span class="nx">expirationTime</span><span class="p">,</span> 878 <span class="p">);</span> 879 880 <span class="c1">// 䏿¦åºç° key ä¸ match ç bad caseï¼åè·³åºå¾ªç¯ã</span> 881 <span class="k">if</span> <span class="p">(</span><span class="nx">newFiber</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 882 <span class="k">break</span><span class="p">;</span> 883 <span class="p">}</span> 884 885 <span class="k">if</span> <span class="p">(</span><span class="nx">oldFiber</span> <span class="o">&&</span> <span class="nx">newFiber</span><span class="p">.</span><span class="nx">alternate</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 886 <span class="c1">// We matched the slot, but we didn't reuse the existing fiber, so we</span> 887 <span class="c1">// need to delete the existing child.</span> 888 <span class="c1">// key ç¸å使¯ type ä¸åçåºæ¯ï¼å³ updateSlot éç createFiber 忝</span> 889 <span class="nx">deleteChild</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">oldFiber</span><span class="p">);</span> 890 <span class="p">}</span> 891 892 <span class="nx">lastPlacedIndex</span> <span class="o">=</span> <span class="nx">placeChild</span><span class="p">(</span><span class="nx">newFiber</span><span class="p">,</span> <span class="nx">lastPlacedIndex</span><span class="p">,</span> <span class="nx">newIdx</span><span class="p">);</span> 893 <span class="c1">// 妿æ¾å°äºï¼åå°æ¼å¨ resultingFirstChild è¿ä¸ªé¾ä¸ã</span> 894 <span class="k">if</span> <span class="p">(</span><span class="nx">previousNewFiber</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 895 <span class="nx">resultingFirstChild</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 896 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 897 <span class="nx">previousNewFiber</span><span class="p">.</span><span class="nx">sibling</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 898 <span class="p">}</span> 899 <span class="nx">previousNewFiber</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 900 <span class="nx">oldFiber</span> <span class="o">=</span> <span class="nx">nextOldFiber</span><span class="p">;</span> 901<span class="p">}</span> 902</code></pre></div></div> 903 904<ul> 905 <li> 906 <p>updateSlot çé»è¾ï¼ 907<img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/a7184286-20c5-cbfc-47f8-cf80d28ae76c.png" alt="" /></p> 908 </li> 909 <li> 910 <p>placeChild çé»è¾</p> 911 </li> 912</ul> 913 914<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">// åªæå¨åä½ç½®æ¾å°å ç´ çæ¶åæä¼æ´æ° index</span> 915 <span class="kd">function</span> <span class="nx">placeChild</span><span class="p">(</span> 916 <span class="nx">newFiber</span><span class="p">,</span> 917 <span class="nx">lastPlacedIndex</span><span class="p">,</span> 918 <span class="nx">newIndex</span><span class="p">,</span> 919 <span class="p">)</span> <span class="p">{</span> 920 <span class="nx">newFiber</span><span class="p">.</span><span class="nx">index</span> <span class="o">=</span> <span class="nx">newIndex</span><span class="p">;</span> 921 922 <span class="kd">const</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">.</span><span class="nx">alternate</span><span class="p">;</span> 923 <span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
924 <span class="kd">const</span> <span class="nx">oldIndex</span> <span class="o">=</span> <span class="nx">current</span><span class="p">.</span><span class="nx">index</span><span class="p">;</span> 925 <span class="k">if</span> <span class="p">(</span><span class="nx">oldIndex</span> <span class="o"><</span> <span class="nx">lastPlacedIndex</span><span class="p">)</span> <span class="p">{</span> 926 <span class="c1">// This is a move.</span> 927 <span class="nx">newFiber</span><span class="p">.</span><span class="nx">effectTag</span> <span class="o">=</span> <span class="nx">Placement</span><span class="p">;</span> 928 <span class="k">return</span> <span class="nx">lastPlacedIndex</span><span class="p">;</span> 929 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 930 <span class="c1">// This item can stay in place.</span> 931 <span class="k">return</span> <span class="nx">oldIndex</span><span class="p">;</span> 932 <span class="p">}</span> 933 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 934 <span class="c1">// This is an insertion.</span> 935 <span class="nx">newFiber</span><span class="p">.</span><span class="nx">effectTag</span> <span class="o">=</span> <span class="nx">Placement</span><span class="p">;</span> 936 <span class="k">return</span> <span class="nx">lastPlacedIndex</span><span class="p">;</span> 937 <span class="p">}</span> 938 <span class="p">}</span> 939</code></pre></div></div> 940<p>æä»¬æ¥ç个ä¾åï¼ 941<img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/5eee5c9a-763f-5000-69e9-50d7099251e4.png" alt="" /></p> 942 943<p>第 1 个循ç¯åï¼å¦ææ°çå©åå表已ç»éåå®äºï¼é£ä¹æ¸ 空èç fiber é¾è¡¨ã</p> 944<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span><span class="nx">newIdx</span> <span class="o">===</span> <span class="nx">newChildren</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> 945 <span class="c1">// We've reached the end of the new children. We can delete the rest.</span> 946 <span class="nx">deleteRemainingChildren</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">oldFiber</span><span class="p">);</span> 947 <span class="k">return</span> <span class="nx">resultingFirstChild</span><span class="p">;</span> 948<span class="p">}</span> 949</code></pre></div></div> 950 951<ul> 952 <li>妿æ°å©åå表 newChildren 没æéåå®ï¼èå©åé¾è¡¨ oldFiber èµ°å®äºï¼é£ä¹è¿å ¥ç¬¬ 2 个循ç¯ï¼å³éåå©ä½çæ°å©åï¼ä¾æ¬¡å建å³å¯ã 953 <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span><span class="nx">oldFiber</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 954<span class="c1">// If we don't have any more existing children we can choose a fast path</span> 955<span class="c1">// since the rest will all be insertions.</span> 956<span class="k">for</span> <span class="p">(;</span> <span class="nx">newIdx</span> <span class="o"><</span> <span class="nx">newChildren</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">newIdx</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> 957 <span class="kd">const</span> <span class="nx">newFiber</span> <span class="o">=</span> <span class="nx">createChild</span><span class="p">(</span> 958 <span class="nx">returnFiber</span><span class="p">,</span> 959 <span class="nx">newChildren</span><span class="p">[</span><span class="nx">newIdx</span><span class="p">],</span> 960 <span class="nx">expirationTime</span><span class="p">,</span> 961 <span class="p">);</span> 962 <span class="k">if</span> <span class="p">(</span><span class="nx">newFiber</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 963 <span class="k">continue</span><span class="p">;</span> 964 <span class="p">}</span> 965 <span class="nx">lastPlacedIndex</span> <span class="o">=</span> <span class="nx">placeChild</span><span class="p">(</span><span class="nx">newFiber</span><span class="p">,</span> <span class="nx">lastPlacedIndex</span><span class="p">,</span> <span class="nx">newIdx</span><span class="p">);</span> 966 <span class="k">if</span> <span class="p">(</span><span class="nx">previousNewFiber</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 967 <span class="nx">resultingFirstChild</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 968 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 969 <span class="nx">previousNewFiber</span><span class="p">.</span><span class="nx">sibling</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 970 <span class="p">}</span> 971 <span class="nx">previousNewFiber</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 972<span class="p">}</span> 973<span class="k">return</span> <span class="nx">resultingFirstChild</span><span class="p">;</span> 974<span class="p">}</span> 975</code></pre></div> </div> 976 <p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/2d016931-0347-4c6e-8a66-ad462662b9c3.png" alt="" /></p> 977 </li> 978 <li>妿æ°å©åå表 newChildren 没æéåå®ï¼èå©å oldFiber 乿²¡å®ï¼é£ä¹è¿å ¥ç¬¬ä¸ä¸ªå¾ªç¯ã 979 <ul> 980 <li>æèå©åæ¾å¨ä¸ä¸ª map éç¨ fiber ç key æè index ä½ä¸º map ç key, fiber 对象ä½ä¸º value</li> 981 <li>ç»§ç»éå newChildren ï¼å¨ map éæ¾ fiberï¼æ¾å°äºå°±å¤ç¨ï¼æ¾ä¸å°å°±æ°å»ºã</li> 982 <li>
982æåå¦æè¿æå©ä½çèå©åï¼åå ¨é¨æ 记为å é¤ã</li> 983 </ul> 984 </li> 985</ul> 986 987<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// æå»ºè fiber ç map</span> 988<span class="kd">const</span> <span class="nx">existingChildren</span> <span class="o">=</span> <span class="nx">mapRemainingChildren</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">oldFiber</span><span class="p">);</span> 989 990<span class="c1">// æ«æå©ä½çæ°å©åï¼å¨ map 鿥æ¾</span> 991<span class="k">for</span> <span class="p">(;</span> <span class="nx">newIdx</span> <span class="o"><</span> <span class="nx">newChildren</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">newIdx</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> 992 <span class="kd">const</span> <span class="nx">newFiber</span> <span class="o">=</span> <span class="nx">updateFromMap</span><span class="p">(</span> 993 <span class="nx">existingChildren</span><span class="p">,</span> 994 <span class="nx">returnFiber</span><span class="p">,</span> 995 <span class="nx">newIdx</span><span class="p">,</span> 996 <span class="nx">newChildren</span><span class="p">[</span><span class="nx">newIdx</span><span class="p">],</span> 997 <span class="nx">expirationTime</span><span class="p">,</span> 998 <span class="p">);</span> 999 1000 <span class="k">if</span> <span class="p">(</span><span class="nx">newFiber</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 1001 <span class="k">if</span> <span class="p">(</span><span class="nx">shouldTrackSideEffects</span><span class="p">)</span> <span class="p">{</span> 1002 <span class="k">if</span> <span class="p">(</span><span class="nx">newFiber</span><span class="p">.</span><span class="nx">alternate</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 1003 <span class="c1">// æä»¬å¤ç¨äºè¿ä¸ª fiberï¼ä¸ä¼éæ¯å®ï¼æä»¥ä» map ä¸å é¤ã</span> 1004 <span class="nx">existingChildren</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span> 1005 <span class="nx">newFiber</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="kc">null</span> <span class="p">?</span> <span class="nx">newIdx</span> <span class="p">:</span> <span class="nx">newFiber</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span> 1006 <span class="p">);</span> 1007 <span class="p">}</span> 1008 <span class="p">}</span> 1009 <span class="nx">lastPlacedIndex</span> <span class="o">=</span> <span class="nx">placeChild</span><span class="p">(</span><span class="nx">newFiber</span><span class="p">,</span> <span class="nx">lastPlacedIndex</span><span class="p">,</span> <span class="nx">newIdx</span><span class="p">);</span> 1010 <span class="k">if</span> <span class="p">(</span><span class="nx">previousNewFiber</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> 1011 <span class="nx">resultingFirstChild</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 1012 <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> 1013 <span class="nx">previousNewFiber</span><span class="p">.</span><span class="nx">sibling</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 1014 <span class="p">}</span> 1015 <span class="nx">previousNewFiber</span> <span class="o">=</span> <span class="nx">newFiber</span><span class="p">;</span> 1016 <span class="p">}</span> 1017<span class="p">}</span> 1018 1019<span class="k">if</span> <span class="p">(</span><span class="nx">shouldTrackSideEffects</span><span class="p">)</span> <span class="p">{</span> 1020 <span class="c1">// è¿æå©ä½çè fiberï¼å ¨æ 记为å é¤ï¼åç»ä¼éæ¯ã</span> 1021 <span class="nx">existingChildren</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">child</span> <span class="o">=></span> <span class="nx">deleteChild</span><span class="p">(</span><span class="nx">returnFiber</span><span class="p">,</span> <span class="nx">child</span><span class="p">));</span> 1022<span class="p">}</span> 1023</code></pre></div></div> 1024 1025<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/2aff7a76-83a2-3fb4-ea66-db0146b079c5.png" alt="" /></p> 1026 1027<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/3aa77192-ab91-a159-aa32-e792dda7f670.png" alt="" /></p> 1028 1029<p>å¯è§å¯¹äºäº¤æ¢çåºæ¯ï¼react çæç并䏿¯å¾é«ï¼å°¤å ¶å½å表æ¯è¾é¿çæ¶åï¼ç§»å¨çå ç´ ä¼åæ¥è¶æ¥è¶å¤ãvue çåæéä¼åï¼å¨è¿ç§åºæ¯ä¸æ´å ä¼ç§ã</p> 1030 1031<p>æåæä»¬çä¸ä¸è¿ä¸ªç®æ³ä½è çæ³¨éï¼</p> 1032<blockquote> 1033 <p>This algorithm canât optimize by searching from both ends since we donât have backpointers on fibers. Iâm trying to see how far we can get with that model. If it ends up not being worth the tradeoffs, we can add it later.
1034Even with a two ended optimization, weâd want to optimize for the case where there are few changes and brute force the comparison instead of going for the Map. Itâd like to explore hitting that path first in forward-only mode and only go for the Map once we notice that we need lots of look ahead. This doesnât handle reversal as well as two ended search but thatâs unusual. Besides, for the two ended optimization to 1035work on Iterables, weâd need to copy the whole set. In this first iteration, weâll just live with hitting the bad case (adding everything to a Map) in for every insert/move.</p> 1036</blockquote> 1037 1038<p>æå¤§æ¦ç¿»è¯äºä¸ä¸ï¼</p> 1039 1040<blockquote> 1041 <p>å 为 fiber ç»æä¸æ¯ååé¾è¡¨ï¼æä»¥æä»¬æ æ³å¯¹æ¤ç®æ³è¿è¡ååæç´¢ä¼åï¼Vue çæ¹æ¡ï¼ãææ£å¨è°æ¥ååæç´¢ä¼åè½è¾¾å°çé«åº¦ï¼å¦ææå¼å¾çè¯ï¼æä»¬å¯ä»¥ä»¥ååä¼åã 1042<del>å端ä¼åå¯ä»¥è®©æä»¬ä¼å以ä¸è¿æ ·çåºæ¯ï¼åªæä¸ç¹ç¹ååçæ¶åï¼ä¸è¿è¡ Map æ¥æ¾äºï¼ç´æ¥è¿è¡æ´å对æ¯ã</del>æ¬ç®æ³éç¨äºä» å忥æ¾ç模å¼ï¼ä¸æ¦åç°éè¦å头æ¾çæ¶åï¼åè¿å ¥ Map æ¥æ¾çæ¹æ¡ãæ¬ç®æ³ååæéä¼å䏿 ·æ²¡æå¤çå表å转çåºæ¯ï¼ä½è¿å¥½å®å¹¶ä¸å¸¸è§ã<del>é¤äºè¿äºä»¥å¤ï¼å¦æéç¨ååæç´¢ä¼åï¼å¨å¤ç Iterables çæ¶åï¼æä»¬è¿éè¦å°æ´ä¸ª Iterable å¤å¶ä¸ä»½ã</del>è¿æ¯ç®æ³ç第ä¸çï¼æä»¬éå° bad caseï¼æå ¥/ç§»å¨ï¼å°±ä¼è½¬å Map æ¥æ¾çæ¹æ¡ã</p> 1043</blockquote> 1044 1045<blockquote> 1046 <p>åæçå°æ¹æ¯æç¡¬ç¿»çï¼æå¤ªçè§£ä»çææã叿æé«æç»è§£éè§£éã</p> 1047</blockquote> 1048 1049<p>anywayï¼åå°ä¾åï¼ç»è¿ reconcileChildren, button åå ç´ ç fiber ä¼è¢«å»ºç«å¥½ã</p> 1050 1051<p><img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/75bbfd53-c8eb-83b2-34ce-77a8c0b4cc62.png" alt="" /></p> 1052 1053<p>åå¾åï¼å°±åæ°å»ºçåºæ¯ç±»ä¼¼å¦ãcompleteWork å»ºç« effectListï¼å¨è¿å ¥commit é¶æ®µï¼æ ¹æ® effectList 对 dom è¿è¡æ´æ°ã</p> 1054 1055<h1 id="åèææ¡£">åèææ¡£</h1> 1056<p>https://github.com/7kms/react-illustration-series</p> 1057 1058 </article> 1059 1060 1061 <div class="social-share-wrapper"> 1062 <div class="social-share"></div> 1063 </div> 1064 1065 </div> 1066 1067 <section class="author-detail"> 1068 <section class="post-footer-item author-card"> 1069 <div class="avatar"> 1070 <img src="https://www.njleonzhang.com/assets/img/profile.jpeg" alt=""> 1071 </div> 1072 <div class="author-name" rel="author">Leon Zhang</div> 1073 <div class="bio"> 1074 <p>FED @ a startup<br/> Former engineer @citrix <br/> Former engineer @trendmicro</p> 1075 </div> 1076 1077 <ul class="sns-links"> 1078 1079 <li> 1080 <a href="//weibo.com/u/1199856281" target="_blank"> 1081 <i class="iconfont icon-weibo"></i> 1082 </a> 1083 </li> 1084 1085 <li> 1086 <a href="//github.com/njleonzhang" target="_blank"> 1087 <i class="iconfont icon-github"></i> 1088 </a> 1089 </li> 1090 1091 </ul> 1092 1093 </section> 1094 <section class="post-footer-item read-next"> 1095 1096 1097 1098 <div class="read-next-item"> 1099 <a href="/2020/08/24/compose.html" class="read-next-link"></a> 1100 <section> 1101 <span>彿°å¼ç¼ç¨ compose 彿°çè§£</span> 1102 <p>compose å¨å端被广æ³ä½¿ç¨ï¼ä¸»è¦ç¨äºå®ç°åç§æä»¶ç³»ç»ï¼å¦ ko
1102a å redux ç middlewareã...</p> 1103 </section> 1104 1105 <div class="filter"></div> 1106 <img src="https://raw.githubusercontent.com/njleonzhang/image-bed/master/assets/7dc9f602-201e-480d-f829-79b8e62b6d9c.png" alt=""> 1107 1108 </div> 1109 1110 </section> 1111 <section class="post-footer-item comment"> 1112 <div id="disqus_thread"></div> 1113 </section> 1114 1115 <style> 1116 @media screen and (max-width: 768px) { 1117 .ad { 1118 width: 100%; 1119 } 1120 } 1121 </style> 1122 </section> 1123 1124 <footer class="g-footer"> 1125 <section>Blog of Leon Zhang © 1126 1127 1128 2018 1129 - 1130 1131 2023 1132 </section> 1133 <section>Powered by <a href="//jekyllrb.com">Jekyll</a> | <a href="https://github.com/kaeyleo/jekyll-theme-H2O">Theme H2O</a></section> 1134</footer> 1135 1136 1137
1137<script src="/assets/js/social-share.min.js"></script>
1137 1138
1138<script> 1139 socialShare('.social-share', { 1140 sites: [ 1141 1142 'wechat' 1143 , 1144 1145 1146 'weibo' 1147 1148 1149 ], 1150 wechatQrcodeTitle: "å享å°å¾®ä¿¡æåå", 1151 wechatQrcodeHelper: '<p>æ«ç åç¹å»å³ä¸è§</p><p>å°æ¬æåäº«è³æåå</p>' 1152 }); 1153 </script>
1153 1154 1155 1156
1156<script> 1157 /** 1158 * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. 1159 * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ 1160 /* 1161 var disqus_config = function () { 1162 this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable 1163 this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable 1164 }; 1165 */ 1166 (function() { // DON'T EDIT BELOW THIS LINE 1167 var d = document, 1168 s = d.createElement('script'); 1169 s.src = 'https://leonblog-1.disqus.com/embed.js'; 1170 s.setAttribute('data-timestamp', +new Date()); 1171 1172 (d.head || d.body).appendChild(s); 1173 })(); 1174 </script>
1174 1175 1176 1177
1177<script src="/assets/js/prism.js"></script>
1177 1178
1178<script src="/assets/js/index.min.js"></script>
1178 1179 1180 1181
1181<script src="https://codefund.app/properties/68/funder.js" async="async"></script>
1181 1182 1183 1184
1184<script> 1185 // sizable-iframe ç jquery æä»¶ 1186 $('.sizable-iframe').map((index, element) => { 1187 var $item = $(element) 1188 var link = $item.data('link'); 1189 var width = $item.data('width') || 640; 1190 var height = $item.data('height') || 360; 1191 1192 $item.prepend('<iframe src="' + link + 1193 '"></iframe><div class="controller"><input /><input /><button>æ¹åiframe大å°</button></div>'); 1194 1195 var $iframe = $item.find('iframe') 1196 var inputs = $item.find('input'); 1197 var $button = $item.find('button'); 1198 var $widthInput = inputs.eq(0); 1199 var $hightInput = inputs.eq(1); 1200 1201 $iframe 1202 .css('width', width) 1203 .css('height', height); 1204 1205 $widthInput.val(width); 1206 $hightInput.val(height); 1207 1208 $button.on('click', _ => { 1209 $iframe 1210 .css('width', $widthInput.val()) 1211 .css('height', $hightInput.val()) 1212 }); 1213 }) 1214 </script>
1214 1215</body> 1216 1217</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.