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

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.1a0c7eef.lean.js">
+    <link rel="modulepreload" href="/assets/note_CSS.md.a33f8f13.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-16T13:49:48.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("{\"project_markdown_index.md\":\"866ed303\",\"project_markdown_log_index.md\":\"f0d41d62\",\"project_markdown_shortcut_index.md\":\"096896eb\",\"project_smartwordbreak_index.md\":\"c28b3662\",\"project_smartwordbreak_log_index.md\":\"fc7b9540\",\"project_smartwordbreak_statement_index.md\":\"2fc92c03\",\"self_index.md\":\"98044b4f\",\"works_contribution.md\":\"89bf6a2d\",\"works_opensource.md\":\"2bbaf67a\",\"project_clipboardmanager_statement_index.md\":\"c5bf441b\",\"article_【字节跳动】前端面试题总结.md\":\"d808019e\",\"article_【用友金融】前端面试题总结.md\":\"f4f0485c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"be6db404\",\"article_一文读懂伪类与伪元素.md\":\"9598eda0\",\"article_一文读懂函数中this指向问题.md\":\"7a3fd477\",\"article_深入javascript数据类型.md\":\"8aefa09e\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c61231f6\",\"article_深入理解proxy与reflect.md\":\"1529edf3\",\"article_深入理解浏览器缓存机制.md\":\"fa443909\",\"article_深入理解浏览器运行原理.md\":\"b1ca9b5f\",\"index.md\":\"30ce3829\",\"note_css.md\":\"1a0c7eef\",\"note_front-end engineering.md\":\"3133a454\",\"note_javascript.md\":\"6e76c48c\",\"note_react.md\":\"14edf2d5\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"5f9e4bc9\",\"article_【快手】深入理解前端面试题.md\":\"e6e403b1\",\"project_clipboardmanager_vip_index.md\":\"efa88b6d\",\"note_ssr.md\":\"ab4d33a5\",\"project_clipboardmanager_index.md\":\"fca478b9\",\"project_clipboardmanager_guide_index.md\":\"6e7ca9d1\",\"project_clipboardmanager_log_index.md\":\"f7561266\",\"article_从0实现一个年度报告.md\":\"7e4e627e\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"9d37b41f\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"3fd9f0c6\",\"note_javascriptenhanced.md\":\"96827c6d\"}")</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-16T16:00:53.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_【2023】青训营 - 前端练习题汇总解析.md\":\"992cbe1e\",\"article_【字节跳动】前端面试题总结.md\":\"28387dc1\",\"article_一文读懂事件冒泡与事件捕获.md\":\"d634b0cc\",\"article_一文读懂伪类与伪元素.md\":\"075041c2\",\"article_【用友金融】前端面试题总结.md\":\"dd5e8bb8\",\"article_一文读懂函数中this指向问题.md\":\"cc3242ec\",\"article_从0实现一个年度报告.md\":\"d13e2c66\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"e6aa2df6\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"84781987\",\"article_深入理解浏览器运行原理.md\":\"bcc4ee68\",\"index.md\":\"0054fdf5\",\"note_front-end engineering.md\":\"f6767e7e\",\"note_javascript.md\":\"b277622a\",\"note_react.md\":\"2cc72154\",\"note_ssr.md\":\"74ae6370\",\"project_clipboardmanager_log_index.md\":\"1ff11fab\",\"project_clipboardmanager_statement_index.md\":\"d9b4ca8b\",\"project_clipboardmanager_vip_index.md\":\"86a642e1\",\"project_markdown_index.md\":\"286be53a\",\"project_markdown_log_index.md\":\"8d5bf575\",\"project_markdown_shortcut_index.md\":\"5e892dc2\",\"project_smartwordbreak_index.md\":\"02b039ba\",\"project_smartwordbreak_log_index.md\":\"6d311e2c\",\"project_smartwordbreak_statement_index.md\":\"db5c722b\",\"self_index.md\":\"833d0537\",\"works_contribution.md\":\"c3b4be35\",\"works_opensource.md\":\"4eacd201\",\"project_clipboardmanager_guide_index.md\":\"a38c7111\",\"article_深入理解proxy与reflect.md\":\"6e07005a\",\"article_深入理解浏览器缓存机制.md\":\"6e4255bd\",\"article_深入javascript数据类型.md\":\"d19814ba\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"653d621e\",\"note_css.md\":\"a33f8f13\",\"article_【快手】深入理解前端面试题.md\":\"c92d219c\",\"project_clipboardmanager_index.md\":\"0bd2ff92\",\"note_javascriptenhanced.md\":\"de389674\"}")</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.96827c6d.lean.js">
+    <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.de389674.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-16T13:49:48.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("{\"project_markdown_index.md\":\"866ed303\",\"project_markdown_log_index.md\":\"f0d41d62\",\"project_markdown_shortcut_index.md\":\"096896eb\",\"project_smartwordbreak_index.md\":\"c28b3662\",\"project_smartwordbreak_log_index.md\":\"fc7b9540\",\"project_smartwordbreak_statement_index.md\":\"2fc92c03\",\"self_index.md\":\"98044b4f\",\"works_contribution.md\":\"89bf6a2d\",\"works_opensource.md\":\"2bbaf67a\",\"project_clipboardmanager_statement_index.md\":\"c5bf441b\",\"article_【字节跳动】前端面试题总结.md\":\"d808019e\",\"article_【用友金融】前端面试题总结.md\":\"f4f0485c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"be6db404\",\"article_一文读懂伪类与伪元素.md\":\"9598eda0\",\"article_一文读懂函数中this指向问题.md\":\"7a3fd477\",\"article_深入javascript数据类型.md\":\"8aefa09e\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c61231f6\",\"article_深入理解proxy与reflect.md\":\"1529edf3\",\"article_深入理解浏览器缓存机制.md\":\"fa443909\",\"article_深入理解浏览器运行原理.md\":\"b1ca9b5f\",\"index.md\":\"30ce3829\",\"note_css.md\":\"1a0c7eef\",\"note_front-end engineering.md\":\"3133a454\",\"note_javascript.md\":\"6e76c48c\",\"note_react.md\":\"14edf2d5\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"5f9e4bc9\",\"article_【快手】深入理解前端面试题.md\":\"e6e403b1\",\"project_clipboardmanager_vip_index.md\":\"efa88b6d\",\"note_ssr.md\":\"ab4d33a5\",\"project_clipboardmanager_index.md\":\"fca478b9\",\"project_clipboardmanager_guide_index.md\":\"6e7ca9d1\",\"project_clipboardmanager_log_index.md\":\"f7561266\",\"article_从0实现一个年度报告.md\":\"7e4e627e\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"9d37b41f\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"3fd9f0c6\",\"note_javascriptenhanced.md\":\"96827c6d\"}")</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-16T16:00:53.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_【2023】青训营 - 前端练习题汇总解析.md\":\"992cbe1e\",\"article_【字节跳动】前端面试题总结.md\":\"28387dc1\",\"article_一文读懂事件冒泡与事件捕获.md\":\"d634b0cc\",\"article_一文读懂伪类与伪元素.md\":\"075041c2\",\"article_【用友金融】前端面试题总结.md\":\"dd5e8bb8\",\"article_一文读懂函数中this指向问题.md\":\"cc3242ec\",\"article_从0实现一个年度报告.md\":\"d13e2c66\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"e6aa2df6\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"84781987\",\"article_深入理解浏览器运行原理.md\":\"bcc4ee68\",\"index.md\":\"0054fdf5\",\"note_front-end engineering.md\":\"f6767e7e\",\"note_javascript.md\":\"b277622a\",\"note_react.md\":\"2cc72154\",\"note_ssr.md\":\"74ae6370\",\"project_clipboardmanager_log_index.md\":\"1ff11fab\",\"project_clipboardmanager_statement_index.md\":\"d9b4ca8b\",\"project_clipboardmanager_vip_index.md\":\"86a642e1\",\"project_markdown_index.md\":\"286be53a\",\"project_markdown_log_index.md\":\"8d5bf575\",\"project_markdown_shortcut_index.md\":\"5e892dc2\",\"project_smartwordbreak_index.md\":\"02b039ba\",\"project_smartwordbreak_log_index.md\":\"6d311e2c\",\"project_smartwordbreak_statement_index.md\":\"db5c722b\",\"self_index.md\":\"833d0537\",\"works_contribution.md\":\"c3b4be35\",\"works_opensource.md\":\"4eacd201\",\"project_clipboardmanager_guide_index.md\":\"a38c7111\",\"article_深入理解proxy与reflect.md\":\"6e07005a\",\"article_深入理解浏览器缓存机制.md\":\"6e4255bd\",\"article_深入javascript数据类型.md\":\"d19814ba\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"653d621e\",\"note_css.md\":\"a33f8f13\",\"article_【快手】深入理解前端面试题.md\":\"c92d219c\",\"project_clipboardmanager_index.md\":\"0bd2ff92\",\"note_javascriptenhanced.md\":\"de389674\"}")</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.14edf2d5.lean.js">
+    <link rel="modulepreload" href="/assets/note_React.md.2cc72154.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>
@@ -642,7 +642,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><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><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br></div></div><h2 id="react脚手架" tabindex="-1">React脚手架 <a class="header-anchor" href="#react脚手架" aria-hidden="true">#</a></h2><ul><li>认识脚手架工具</li><li>create-react-app</li><li>创建React项目</li><li>Webpack的配置</li></ul><p>类似于Vue提供的 <code>pnpm create vite</code> 创建一个模板，React也可以通过 <code>create-react-app</code> 来初始化一个空的React模板</p><div class="language-sh line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create-react-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 全局安装create-react-app</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><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br></div></div><h2 id="react项目开发" tabindex="-1">React项目开发 <a class="header-anchor" href="#react项目开发" aria-hidden="true">#</a></h2><ul><li>认识脚手架工具</li><li>create-react-app</li><li>创建React项目</li><li>Webpack的配置</li></ul><h3 id="react脚手架" tabindex="-1">React脚手架 <a class="header-anchor" href="#react脚手架" aria-hidden="true">#</a></h3><p>类似于Vue提供的 <code>pnpm create vite</code> 创建一个模板，React也可以通过 <code>create-react-app</code> 来初始化一个空的React模板</p><div class="language-sh line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create-react-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 全局安装create-react-app</span></span>
 <span class="line"><span style="color:#FFCB6B;">create-react-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-app</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 创建一个名为react-app的React项目</span></span>
 <span class="line"><span style="color:#676E95;font-style:italic;"># 删除node_modules package-lock.json</span></span>
 <span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-app</span></span>
@@ -654,16 +654,20 @@
 <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>
-<span class="line"><span style="color:#676E95;font-style:italic;">// App.js</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">// App.jsx</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Component</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">&#39;</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><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;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></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 style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Hello, React!</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 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><span class="line-number">15</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-16T13:49:48.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("{\"project_markdown_index.md\":\"866ed303\",\"project_markdown_log_index.md\":\"f0d41d62\",\"project_markdown_shortcut_index.md\":\"096896eb\",\"project_smartwordbreak_index.md\":\"c28b3662\",\"project_smartwordbreak_log_index.md\":\"fc7b9540\",\"project_smartwordbreak_statement_index.md\":\"2fc92c03\",\"self_index.md\":\"98044b4f\",\"works_contribution.md\":\"89bf6a2d\",\"works_opensource.md\":\"2bbaf67a\",\"project_clipboardmanager_statement_index.md\":\"c5bf441b\",\"article_【字节跳动】前端面试题总结.md\":\"d808019e\",\"article_【用友金融】前端面试题总结.md\":\"f4f0485c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"be6db404\",\"article_一文读懂伪类与伪元素.md\":\"9598eda0\",\"article_一文读懂函数中this指向问题.md\":\"7a3fd477\",\"article_深入javascript数据类型.md\":\"8aefa09e\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c61231f6\",\"article_深入理解proxy与reflect.md\":\"1529edf3\",\"article_深入理解浏览器缓存机制.md\":\"fa443909\",\"article_深入理解浏览器运行原理.md\":\"b1ca9b5f\",\"index.md\":\"30ce3829\",\"note_css.md\":\"1a0c7eef\",\"note_front-end engineering.md\":\"3133a454\",\"note_javascript.md\":\"6e76c48c\",\"note_react.md\":\"14edf2d5\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"5f9e4bc9\",\"article_【快手】深入理解前端面试题.md\":\"e6e403b1\",\"project_clipboardmanager_vip_index.md\":\"efa88b6d\",\"note_ssr.md\":\"ab4d33a5\",\"project_clipboardmanager_index.md\":\"fca478b9\",\"project_clipboardmanager_guide_index.md\":\"6e7ca9d1\",\"project_clipboardmanager_log_index.md\":\"f7561266\",\"article_从0实现一个年度报告.md\":\"7e4e627e\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"9d37b41f\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"3fd9f0c6\",\"note_javascriptenhanced.md\":\"96827c6d\"}")</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></div></div><h3 id="react组件化开发" tabindex="-1">React组件化开发 <a class="header-anchor" href="#react组件化开发" aria-hidden="true">#</a></h3><ul><li>React组件生命周期</li><li>React组件间通信</li><li>React组件插槽</li><li>React非父子的通信</li><li>setState使用详解</li></ul><p>组件化是React的核心思想之一，组件化是一个抽象的过程，将大的应用程序抽象为多个小的组件，最终形成组件树</p><p>分而治之，让代码更容易组织和管理</p><p>React组件相对于Vue更加灵活多样，按照不同的方式可以分为多种组件</p><ul><li>根据组件定义方式，可以分为：函数组件(Functional Component)与类组件(Class Component)</li><li>根据组件内部是否有状态需要维护，可以分为：无状态组件(Stateless Component)和有状态组件(Stateful Component)</li><li>根据组件的不同职责，可以分为：展示型组件(Presentational Component)和容器型组件(Container Component)</li></ul><p>除此之外，还有异步组件、高阶组件等...</p><h3 id="类组件-1" tabindex="-1">类组件 <a class="header-anchor" href="#类组件-1" aria-hidden="true">#</a></h3><ul><li>类组件的定义有以下要求： <ul><li>组件的名称必须为大写（无论是类组件还是函数组件）</li><li>类组件需要继承自React.Component</li><li>类组件内必须实现render函数</li></ul></li><li>通过class关键字定义一个组件 <ul><li>constructor是可选的，通常需要在constructor中初始化一些数据</li><li>this.state中维护的数据就是组件内部的数据</li><li><strong>render方法是class组件中唯一必须实现的方法</strong></li></ul></li></ul><h4 id="render函数" tabindex="-1">render函数 <a class="header-anchor" href="#render函数" aria-hidden="true">#</a></h4><ul><li>render函数在组件第一次渲染时被调用</li><li>当<code>this.props</code>或<code>this.state</code>发生变化时被调用</li></ul><p>被调用时组件内会检查<code>this.props</code>和<code>this.state</code>是否发生变化，并且返回下面的返回值之一：</p><ul><li>React元素 <ul><li>通常通过JSX创建</li><li>例如<code>&lt;div /&gt;</code>会被React渲染为DOM节点，而<code>&lt;SomeComponent /&gt;</code>会被React渲染为自定义组件</li><li>无论是<code>&lt;div /&gt;</code>还是<code>&lt;SomeComponent /&gt;</code>，他们都为React元素</li></ul></li><li>数组或Fragments组件 <ul><li>允许通过render方法同时返回多个元素</li></ul></li><li>字符串或数字 <ul><li>元素会被渲染</li></ul></li><li>boolean/null/undefined类型 <ul><li>元素不会被渲染</li></ul></li></ul><h3 id="函数组件" tabindex="-1">函数组件 <a class="header-anchor" href="#函数组件" aria-hidden="true">#</a></h3><p>函数组件不需要继承自任何父类，函数的返回值相当于render函数的返回值，表示组件要渲染的内容</p><p>修改前文中编写的<code>App.jsx</code>即可：</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:#676E95;font-style:italic;">// App.jsx</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">App</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 style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Hello, React!</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:#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></div></div><ul><li>函数组件是使用function定义的函数，函数的返回值会返回与render函数相同的内容，表示组件要渲染的内容</li><li>函数组件有自己的特点（在无hooks的情况下，引入hooks后函数组件与类组件一样强大） <ul><li>没有生命周期，也会被更新并挂在，但是没有生命周期函数</li><li>this关键字不能指向组件实例，因为没有组件实例</li><li>没有内部状态（state）</li></ul></li></ul><h3 id="组件的生命周期" tabindex="-1">组件的生命周期 <a class="header-anchor" href="#组件的生命周期" aria-hidden="true">#</a></h3><p>我们需要在组件的不同生命周期中执行不同的操作，比如添加解除监听器、发起网络请求等</p><p><img src="/assets/react-life-cycle.67e890c0.png" alt="React Life Cycle: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/"></p><ul><li><code>componentDidMount</code> 组件挂载后</li><li><code>componentDidUpdate</code> 组件更新后</li><li><code>componentWillUnmount</code> 组件卸载前</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-16T16:00:53.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_【2023】青训营 - 前端练习题汇总解析.md\":\"992cbe1e\",\"article_【字节跳动】前端面试题总结.md\":\"28387dc1\",\"article_一文读懂事件冒泡与事件捕获.md\":\"d634b0cc\",\"article_一文读懂伪类与伪元素.md\":\"075041c2\",\"article_【用友金融】前端面试题总结.md\":\"dd5e8bb8\",\"article_一文读懂函数中this指向问题.md\":\"cc3242ec\",\"article_从0实现一个年度报告.md\":\"d13e2c66\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"e6aa2df6\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"84781987\",\"article_深入理解浏览器运行原理.md\":\"bcc4ee68\",\"index.md\":\"0054fdf5\",\"note_front-end engineering.md\":\"f6767e7e\",\"note_javascript.md\":\"b277622a\",\"note_react.md\":\"2cc72154\",\"note_ssr.md\":\"74ae6370\",\"project_clipboardmanager_log_index.md\":\"1ff11fab\",\"project_clipboardmanager_statement_index.md\":\"d9b4ca8b\",\"project_clipboardmanager_vip_index.md\":\"86a642e1\",\"project_markdown_index.md\":\"286be53a\",\"project_markdown_log_index.md\":\"8d5bf575\",\"project_markdown_shortcut_index.md\":\"5e892dc2\",\"project_smartwordbreak_index.md\":\"02b039ba\",\"project_smartwordbreak_log_index.md\":\"6d311e2c\",\"project_smartwordbreak_statement_index.md\":\"db5c722b\",\"self_index.md\":\"833d0537\",\"works_contribution.md\":\"c3b4be35\",\"works_opensource.md\":\"4eacd201\",\"project_clipboardmanager_guide_index.md\":\"a38c7111\",\"article_深入理解proxy与reflect.md\":\"6e07005a\",\"article_深入理解浏览器缓存机制.md\":\"6e4255bd\",\"article_深入javascript数据类型.md\":\"d19814ba\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"653d621e\",\"note_css.md\":\"a33f8f13\",\"article_【快手】深入理解前端面试题.md\":\"c92d219c\",\"project_clipboardmanager_index.md\":\"0bd2ff92\",\"note_javascriptenhanced.md\":\"de389674\"}")</script>
     <script type="module" async src="/assets/app.ab8d0b9f.js"></script>
     
   </body>