Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@7fbc0aae09 🚀

note/CSS.html

@@ -8,7 +8,7 @@
     <link rel="preload stylesheet" href="/assets/style.edafdec9.css" as="style">
     <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.107ab7ad.js">
     <link rel="modulepreload" href="/assets/app.ab8d0b9f.js">
-    <link rel="modulepreload" href="/assets/note_CSS.md.c02bd69e.lean.js">
+    <link rel="modulepreload" href="/assets/note_CSS.md.8c3ee3de.lean.js">
     
     <link rel="icon" href="/logo.png">
   <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
@@ -492,8 +492,8 @@
 <span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> el </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.item</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age) </span><span style="color:#676E95;font-style:italic;">// 18</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name) </span><span style="color:#676E95;font-style:italic;">// &#39;ziu&#39;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-14T16:38:57.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/JavaScript.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>JavaScript基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_【字节跳动】前端面试题总结.md\":\"3dfdab7c\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"d16c49f7\",\"note_react.md\":\"37738659\",\"note_ssr.md\":\"2a6f7491\",\"article_【快手】深入理解前端面试题.md\":\"a17c91fe\",\"article_【用友金融】前端面试题总结.md\":\"7547802c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"5137c93b\",\"article_一文读懂伪类与伪元素.md\":\"3caf47f7\",\"article_从0实现一个年度报告.md\":\"20b01bcf\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"16906c64\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"5f5050bc\",\"article_深入javascript数据类型.md\":\"dcbddda8\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c3770229\",\"article_深入理解proxy与reflect.md\":\"58f72fb0\",\"article_深入理解浏览器缓存机制.md\":\"2f34ed14\",\"article_深入理解浏览器运行原理.md\":\"6d858ed2\",\"index.md\":\"1d9edc13\",\"note_css.md\":\"c02bd69e\",\"note_front-end engineering.md\":\"4e557ab2\",\"note_javascript.md\":\"c75739a0\",\"note_javascriptenhanced.md\":\"15a5ada8\",\"article_一文读懂函数中this指向问题.md\":\"7faa8a77\",\"project_clipboardmanager_index.md\":\"47c398e2\",\"project_clipboardmanager_log_index.md\":\"160bbac9\",\"project_clipboardmanager_statement_index.md\":\"de8d78b9\",\"project_clipboardmanager_vip_index.md\":\"65594262\",\"project_markdown_index.md\":\"e81bc18d\",\"project_markdown_log_index.md\":\"a6d3404e\",\"project_markdown_shortcut_index.md\":\"27d790ae\",\"project_smartwordbreak_index.md\":\"446fdae8\",\"project_smartwordbreak_log_index.md\":\"bccaf1f0\",\"project_smartwordbreak_statement_index.md\":\"78d0e16d\",\"self_index.md\":\"6b8d0d4e\",\"works_contribution.md\":\"868fc57c\",\"project_clipboardmanager_guide_index.md\":\"944e67a3\",\"works_opensource.md\":\"8d0e487f\"}")</script>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-15T16:19:00.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/JavaScript.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>JavaScript基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_一文读懂伪类与伪元素.md\":\"44ac3680\",\"article_一文读懂函数中this指向问题.md\":\"c0097ebf\",\"article_从0实现一个年度报告.md\":\"a0bf84e8\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"6f61c5c8\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"a2b6c10b\",\"article_深入javascript数据类型.md\":\"288afac9\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c5a6a122\",\"note_javascript.md\":\"fb964c09\",\"article_深入理解浏览器缓存机制.md\":\"be54de96\",\"article_深入理解proxy与reflect.md\":\"48da7a27\",\"article_深入理解浏览器运行原理.md\":\"f1041767\",\"index.md\":\"7f96e04f\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"ed958852\",\"article_【字节跳动】前端面试题总结.md\":\"b6e00074\",\"article_【用友金融】前端面试题总结.md\":\"9f29068e\",\"note_css.md\":\"8c3ee3de\",\"article_一文读懂事件冒泡与事件捕获.md\":\"e95a57c1\",\"article_【快手】深入理解前端面试题.md\":\"2fc4b2a8\",\"project_smartwordbreak_index.md\":\"09e7b66f\",\"project_clipboardmanager_index.md\":\"d64fc6ee\",\"project_clipboardmanager_log_index.md\":\"7bed7d5d\",\"project_clipboardmanager_vip_index.md\":\"87f3504b\",\"note_react.md\":\"453e4ad8\",\"project_markdown_index.md\":\"1561bd87\",\"project_clipboardmanager_statement_index.md\":\"173afeea\",\"project_markdown_log_index.md\":\"b6c5e2e1\",\"project_markdown_shortcut_index.md\":\"29c57527\",\"works_opensource.md\":\"c8e0719e\",\"project_smartwordbreak_log_index.md\":\"46c13f40\",\"project_smartwordbreak_statement_index.md\":\"6cc1506c\",\"note_front-end engineering.md\":\"3362c061\",\"self_index.md\":\"37fcadbe\",\"project_clipboardmanager_guide_index.md\":\"2b7ecf64\",\"works_contribution.md\":\"141de8a9\",\"note_ssr.md\":\"43dd4257\",\"note_javascriptenhanced.md\":\"9e3f80eb\"}")</script>
     <script type="module" async src="/assets/app.ab8d0b9f.js"></script>
     
   </body>

note/JavaScriptEnhanced.html

@@ -8,7 +8,7 @@
     <link rel="preload stylesheet" href="/assets/style.edafdec9.css" as="style">
     <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.107ab7ad.js">
     <link rel="modulepreload" href="/assets/app.ab8d0b9f.js">
-    <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.15a5ada8.lean.js">
+    <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.9e3f80eb.lean.js">
     
     <link rel="icon" href="/logo.png">
   <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
@@ -2021,8 +2021,8 @@
 <span class="line"><span style="color:#82AAFF;">setTimeout</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">eventBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">off</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">navClick</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">callBack</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 移除某个事件的某次回调</span></span>
 <span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#A6ACCD;">)</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-14T16:38:57.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/CSS.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>CSS基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/Front-end%20Engineering.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>前端工程化</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_【字节跳动】前端面试题总结.md\":\"3dfdab7c\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"d16c49f7\",\"note_react.md\":\"37738659\",\"note_ssr.md\":\"2a6f7491\",\"article_【快手】深入理解前端面试题.md\":\"a17c91fe\",\"article_【用友金融】前端面试题总结.md\":\"7547802c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"5137c93b\",\"article_一文读懂伪类与伪元素.md\":\"3caf47f7\",\"article_从0实现一个年度报告.md\":\"20b01bcf\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"16906c64\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"5f5050bc\",\"article_深入javascript数据类型.md\":\"dcbddda8\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c3770229\",\"article_深入理解proxy与reflect.md\":\"58f72fb0\",\"article_深入理解浏览器缓存机制.md\":\"2f34ed14\",\"article_深入理解浏览器运行原理.md\":\"6d858ed2\",\"index.md\":\"1d9edc13\",\"note_css.md\":\"c02bd69e\",\"note_front-end engineering.md\":\"4e557ab2\",\"note_javascript.md\":\"c75739a0\",\"note_javascriptenhanced.md\":\"15a5ada8\",\"article_一文读懂函数中this指向问题.md\":\"7faa8a77\",\"project_clipboardmanager_index.md\":\"47c398e2\",\"project_clipboardmanager_log_index.md\":\"160bbac9\",\"project_clipboardmanager_statement_index.md\":\"de8d78b9\",\"project_clipboardmanager_vip_index.md\":\"65594262\",\"project_markdown_index.md\":\"e81bc18d\",\"project_markdown_log_index.md\":\"a6d3404e\",\"project_markdown_shortcut_index.md\":\"27d790ae\",\"project_smartwordbreak_index.md\":\"446fdae8\",\"project_smartwordbreak_log_index.md\":\"bccaf1f0\",\"project_smartwordbreak_statement_index.md\":\"78d0e16d\",\"self_index.md\":\"6b8d0d4e\",\"works_contribution.md\":\"868fc57c\",\"project_clipboardmanager_guide_index.md\":\"944e67a3\",\"works_opensource.md\":\"8d0e487f\"}")</script>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><!----><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-15T16:19:00.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><a class="pager-link prev" href="/note/CSS.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Previous page</span><span class="title" data-v-cc0f9778>CSS基础</span></a></div><div class="has-prev pager" data-v-cc0f9778><a class="pager-link next" href="/note/Front-end%20Engineering.html" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>前端工程化</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_一文读懂伪类与伪元素.md\":\"44ac3680\",\"article_一文读懂函数中this指向问题.md\":\"c0097ebf\",\"article_从0实现一个年度报告.md\":\"a0bf84e8\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"6f61c5c8\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"a2b6c10b\",\"article_深入javascript数据类型.md\":\"288afac9\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c5a6a122\",\"note_javascript.md\":\"fb964c09\",\"article_深入理解浏览器缓存机制.md\":\"be54de96\",\"article_深入理解proxy与reflect.md\":\"48da7a27\",\"article_深入理解浏览器运行原理.md\":\"f1041767\",\"index.md\":\"7f96e04f\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"ed958852\",\"article_【字节跳动】前端面试题总结.md\":\"b6e00074\",\"article_【用友金融】前端面试题总结.md\":\"9f29068e\",\"note_css.md\":\"8c3ee3de\",\"article_一文读懂事件冒泡与事件捕获.md\":\"e95a57c1\",\"article_【快手】深入理解前端面试题.md\":\"2fc4b2a8\",\"project_smartwordbreak_index.md\":\"09e7b66f\",\"project_clipboardmanager_index.md\":\"d64fc6ee\",\"project_clipboardmanager_log_index.md\":\"7bed7d5d\",\"project_clipboardmanager_vip_index.md\":\"87f3504b\",\"note_react.md\":\"453e4ad8\",\"project_markdown_index.md\":\"1561bd87\",\"project_clipboardmanager_statement_index.md\":\"173afeea\",\"project_markdown_log_index.md\":\"b6c5e2e1\",\"project_markdown_shortcut_index.md\":\"29c57527\",\"works_opensource.md\":\"c8e0719e\",\"project_smartwordbreak_log_index.md\":\"46c13f40\",\"project_smartwordbreak_statement_index.md\":\"6cc1506c\",\"note_front-end engineering.md\":\"3362c061\",\"self_index.md\":\"37fcadbe\",\"project_clipboardmanager_guide_index.md\":\"2b7ecf64\",\"works_contribution.md\":\"141de8a9\",\"note_ssr.md\":\"43dd4257\",\"note_javascriptenhanced.md\":\"9e3f80eb\"}")</script>
     <script type="module" async src="/assets/app.ab8d0b9f.js"></script>
     
   </body>

note/React.html

@@ -8,7 +8,7 @@
     <link rel="preload stylesheet" href="/assets/style.edafdec9.css" as="style">
     <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.107ab7ad.js">
     <link rel="modulepreload" href="/assets/app.ab8d0b9f.js">
-    <link rel="modulepreload" href="/assets/note_React.md.37738659.lean.js">
+    <link rel="modulepreload" href="/assets/note_React.md.453e4ad8.lean.js">
     
     <link rel="icon" href="/logo.png">
   <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
@@ -94,7 +94,7 @@
 <span class="line"></span>
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
 <span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">)</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>我们可以写一个实例方法changeText来修改msg，然而此时changeText函数是不会正常工作的，我们在changeText中打log发现函数被正常触发了</p><p>为什么this.setState失效了？这和this的绑定有关：绑定的<code>changeText</code>在被调用时，向上找<code>this</code>找到的是<code>undefined</code></p><p>举一个类似情况的例子：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> app </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">App</span><span style="color:#A6ACCD;">()</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>我们可以写一个实例方法changeText来修改msg，然而，此时我们点击按钮后发现，案例不能正常工作。</p><p>如果在changeText中打log，会发现函数被正常触发了，但是状态没有更新</p><p>为什么this.setState失效了？这和this的绑定有关：绑定的<code>changeText</code>在被调用时，向上找<code>this</code>找到的是全局的<code>this</code>即<code>undefined</code></p><p>这种情况有点类似于下面的例子：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> app </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">App</span><span style="color:#A6ACCD;">()</span></span>
 <span class="line"><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">changeText</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// this =&gt; app</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> func </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> app</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">changeText</span></span>
@@ -133,12 +133,75 @@
 <span class="line"><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">...</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={this.</span><span style="color:#A6ACCD;">changeText</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line highlighted"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={this.</span><span style="color:#A6ACCD;">changeText</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">...</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span>
 <span class="line"><span style="color:#89DDFF;">...</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><div class="edit-link" data-v-cc0f9778><a class="VPLink link edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/note/React.md" target="_blank" rel="noreferrer" data-v-cc0f9778 data-v-8dd200cc><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-cc0f9778><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--><!----></a></div><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-14T16:38:57.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><!----></div><div class="pager" data-v-cc0f9778><a class="pager-link next" href="/project/ClipboardManager/" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>超级剪贴板</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_【字节跳动】前端面试题总结.md\":\"3dfdab7c\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"d16c49f7\",\"note_react.md\":\"37738659\",\"note_ssr.md\":\"2a6f7491\",\"article_【快手】深入理解前端面试题.md\":\"a17c91fe\",\"article_【用友金融】前端面试题总结.md\":\"7547802c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"5137c93b\",\"article_一文读懂伪类与伪元素.md\":\"3caf47f7\",\"article_从0实现一个年度报告.md\":\"20b01bcf\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"16906c64\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"5f5050bc\",\"article_深入javascript数据类型.md\":\"dcbddda8\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c3770229\",\"article_深入理解proxy与reflect.md\":\"58f72fb0\",\"article_深入理解浏览器缓存机制.md\":\"2f34ed14\",\"article_深入理解浏览器运行原理.md\":\"6d858ed2\",\"index.md\":\"1d9edc13\",\"note_css.md\":\"c02bd69e\",\"note_front-end engineering.md\":\"4e557ab2\",\"note_javascript.md\":\"c75739a0\",\"note_javascriptenhanced.md\":\"15a5ada8\",\"article_一文读懂函数中this指向问题.md\":\"7faa8a77\",\"project_clipboardmanager_index.md\":\"47c398e2\",\"project_clipboardmanager_log_index.md\":\"160bbac9\",\"project_clipboardmanager_statement_index.md\":\"de8d78b9\",\"project_clipboardmanager_vip_index.md\":\"65594262\",\"project_markdown_index.md\":\"e81bc18d\",\"project_markdown_log_index.md\":\"a6d3404e\",\"project_markdown_shortcut_index.md\":\"27d790ae\",\"project_smartwordbreak_index.md\":\"446fdae8\",\"project_smartwordbreak_log_index.md\":\"bccaf1f0\",\"project_smartwordbreak_statement_index.md\":\"78d0e16d\",\"self_index.md\":\"6b8d0d4e\",\"works_contribution.md\":\"868fc57c\",\"project_clipboardmanager_guide_index.md\":\"944e67a3\",\"works_opensource.md\":\"8d0e487f\"}")</script>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="列表渲染" tabindex="-1">列表渲染 <a class="header-anchor" href="#列表渲染" aria-hidden="true">#</a></h3><p>可以通过循环，将数组渲染到视图中</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">React</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#F07178;">()</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      movieList</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">The Shawshank Redemption</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">The Godfather</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">The Godfather: Part II</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">The Dark Knight</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#F07178;">      ]</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">render</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">movieList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span></span>
+<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">}&gt;{</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        ))</span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#F07178;">    )</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
+<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">)</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>需要注意的是，这里绑定的key的功能类似于Vue中的特殊属性key，它用来帮助React对列表渲染进行更高效的更新。</p><h3 id="计数器案例" tabindex="-1">计数器案例 <a class="header-anchor" href="#计数器案例" aria-hidden="true">#</a></h3><p>结合之前的知识，可以实现一个简单的计数器</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">React</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">super</span><span style="color:#F07178;">()</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      count</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">addCount</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">addCount</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">subCount</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">subCount</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">addCount</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      count</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">subCount</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">      count</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">render</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
+<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Count: </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">count</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={this.</span><span style="color:#A6ACCD;">addCount</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Add</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={this.</span><span style="color:#A6ACCD;">subCount</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Sub</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#F07178;">    )</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
+<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">)</span></span>
+<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><h2 id="认识jsx语法" tabindex="-1">认识JSX语法 <a class="header-anchor" href="#认识jsx语法" aria-hidden="true">#</a></h2><ul><li>认识JSX语法</li><li>JSX基本使用</li><li>JSX事件绑定</li><li>JSX条件渲染</li><li>JSX列表渲染</li><li>JSX的原理与本质</li></ul><p>是因为我们给script标签添加了<code>type=&quot;text/babel&quot;</code>属性，浏览器不会对这个script进行解析，当babel被加载完成后，babel会在页面中寻找<code>type=&quot;text/babel&quot;</code>的script标签进行转义，转义后的代码才会被浏览器执行</p><ul><li>JSX: JavaScript Extension / JavaScript XML</li><li>All in JS</li><li>不同于Vue的模板语法 不需要专门学习模板语法中的指令(v-for/v-if/v-bind)</li></ul></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><div class="edit-link" data-v-cc0f9778><a class="VPLink link edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/note/React.md" target="_blank" rel="noreferrer" data-v-cc0f9778 data-v-8dd200cc><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-cc0f9778><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--><!----></a></div><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-15T16:19:00.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><!----></div><div class="pager" data-v-cc0f9778><a class="pager-link next" href="/project/ClipboardManager/" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>超级剪贴板</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_一文读懂伪类与伪元素.md\":\"44ac3680\",\"article_一文读懂函数中this指向问题.md\":\"c0097ebf\",\"article_从0实现一个年度报告.md\":\"a0bf84e8\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"6f61c5c8\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"a2b6c10b\",\"article_深入javascript数据类型.md\":\"288afac9\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c5a6a122\",\"note_javascript.md\":\"fb964c09\",\"article_深入理解浏览器缓存机制.md\":\"be54de96\",\"article_深入理解proxy与reflect.md\":\"48da7a27\",\"article_深入理解浏览器运行原理.md\":\"f1041767\",\"index.md\":\"7f96e04f\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"ed958852\",\"article_【字节跳动】前端面试题总结.md\":\"b6e00074\",\"article_【用友金融】前端面试题总结.md\":\"9f29068e\",\"note_css.md\":\"8c3ee3de\",\"article_一文读懂事件冒泡与事件捕获.md\":\"e95a57c1\",\"article_【快手】深入理解前端面试题.md\":\"2fc4b2a8\",\"project_smartwordbreak_index.md\":\"09e7b66f\",\"project_clipboardmanager_index.md\":\"d64fc6ee\",\"project_clipboardmanager_log_index.md\":\"7bed7d5d\",\"project_clipboardmanager_vip_index.md\":\"87f3504b\",\"note_react.md\":\"453e4ad8\",\"project_markdown_index.md\":\"1561bd87\",\"project_clipboardmanager_statement_index.md\":\"173afeea\",\"project_markdown_log_index.md\":\"b6c5e2e1\",\"project_markdown_shortcut_index.md\":\"29c57527\",\"works_opensource.md\":\"c8e0719e\",\"project_smartwordbreak_log_index.md\":\"46c13f40\",\"project_smartwordbreak_statement_index.md\":\"6cc1506c\",\"note_front-end engineering.md\":\"3362c061\",\"self_index.md\":\"37fcadbe\",\"project_clipboardmanager_guide_index.md\":\"2b7ecf64\",\"works_contribution.md\":\"141de8a9\",\"note_ssr.md\":\"43dd4257\",\"note_javascriptenhanced.md\":\"9e3f80eb\"}")</script>
     <script type="module" async src="/assets/app.ab8d0b9f.js"></script>
     
   </body>