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

2025-12-18 00:44:18 +08:00 · 2023-04-17 13:09:51 +00:00
parent db8551c029
commit ff73eed270
112 changed files with 356 additions and 214 deletions
--- a/note/CSS.html
+++ b/note/CSS.html
@@ -10,7 +10,7 @@
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/assets/chunks/framework.a304f0f7.js">
  <link rel="modulepreload" href="/assets/chunks/theme.f2bdac91.js">
-  <link rel="modulepreload" href="/assets/note_CSS.md.5087943e.lean.js">
+  <link rel="modulepreload" href="/assets/note_CSS.md.8f85e473.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>
  </head>
@@ -416,8 +416,8 @@
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">source</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./assets/video.webm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">&gt;</span></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><h3 id="audio标签" tabindex="-1">audio标签 <a class="header-anchor" href="#audio标签" aria-label="Permalink to &quot;audio标签&quot;"></a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">audio</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./assets/music.mp4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">controls</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">audio</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="input元素" tabindex="-1">input元素 <a class="header-anchor" href="#input元素" aria-label="Permalink to &quot;input元素&quot;"></a></h3><h4 id="扩展属性" tabindex="-1">扩展属性 <a class="header-anchor" href="#扩展属性" aria-label="Permalink to &quot;扩展属性&quot;"></a></h4><ul><li><code>placeholder</code> 占位文本</li><li><code>multiple</code> 多选标签</li><li><code>autofocus</code> 自动聚焦输入框</li></ul><h4 id="扩展type属性的值" tabindex="-1">扩展type属性的值 <a class="header-anchor" href="#扩展type属性的值" aria-label="Permalink to &quot;扩展type属性的值&quot;"></a></h4><ul><li><code>date</code></li><li><code>time</code></li><li><code>number</code></li><li><code>tel</code></li><li><code>color</code></li><li><code>email</code></li><li>···</li></ul><h3 id="全局新增属性-data" tabindex="-1">全局新增属性 data-* <a class="header-anchor" href="#全局新增属性-data" aria-label="Permalink to &quot;全局新增属性 data-*&quot;"></a></h3><p>在HTML5中，新增了一种全局属性的格式<code>data-*</code> 用于自定义数据属性</p><ul><li>data设置的属性可以在JavaScript的DOM操作中通过<code>dataset</code>轻松获取到</li><li>通常用于HTML和JavaScript数据之间的传递</li><li>在小程序中，就是通过<code>data-*</code>来传递数据的</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">age</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">18</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-age</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">18</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></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></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-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><!----><div class="last-updated" data-v-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T08:27:23.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><a class="pager-link prev" href="/note/JavaScript.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Previous page</span><span class="title" data-v-b9eb50cb>JavaScript基础</span></a></div><div class="has-prev pager" data-v-b9eb50cb><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_javascript.md\":\"aab6e2fb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"6ebdb392\",\"article_【字节跳动】前端面试题总结.md\":\"1a3eff4e\",\"article_一文读懂事件冒泡与事件捕获.md\":\"fa0ae635\",\"article_一文读懂伪类与伪元素.md\":\"0549470c\",\"article_一文读懂函数中this指向问题.md\":\"9282723b\",\"note_front-end engineering.md\":\"9c43ce48\",\"article_从0实现一个年度报告.md\":\"c7a20ac9\",\"article_深入javascript数据类型.md\":\"037af910\",\"article_【快手】深入理解前端面试题.md\":\"6ea1dd25\",\"article_深入理解浏览器缓存机制.md\":\"7f15e8a1\",\"article_深入理解proxy与reflect.md\":\"48518b05\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"957056b8\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"6c07875c\",\"note_ssr.md\":\"e3cb0c21\",\"project_clipboardmanager_guide_index.md\":\"5ab3687c\",\"project_clipboardmanager_index.md\":\"2f256018\",\"project_clipboardmanager_log_index.md\":\"f5005aea\",\"project_clipboardmanager_statement_index.md\":\"f76452d8\",\"project_clipboardmanager_vip_index.md\":\"95a0fd56\",\"project_markdown_index.md\":\"1d583290\",\"project_markdown_log_index.md\":\"f07fb39e\",\"project_markdown_shortcut_index.md\":\"5502bdcb\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"39b7ccb2\",\"project_smartwordbreak_index.md\":\"2ed1f7bf\",\"project_smartwordbreak_log_index.md\":\"6c8a3d85\",\"project_smartwordbreak_statement_index.md\":\"bc210171\",\"article_深入理解浏览器运行原理.md\":\"c9be404c\",\"index.md\":\"99cbb276\",\"self_index.md\":\"f865c628\",\"works_contribution.md\":\"daf805e4\",\"works_opensource.md\":\"22e4b738\",\"article_【用友金融】前端面试题总结.md\":\"6a40243c\",\"note_css.md\":\"5087943e\",\"note_javascriptenhanced.md\":\"9f4202d7\",\"note_react.md\":\"a93c260f\"}")
+<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></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-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><!----><div class="last-updated" data-v-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T13:08:39.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><a class="pager-link prev" href="/note/JavaScript.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Previous page</span><span class="title" data-v-b9eb50cb>JavaScript基础</span></a></div><div class="has-prev pager" data-v-b9eb50cb><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_ssr.md\":\"3673ad3f\",\"article_从0实现一个年度报告.md\":\"09293691\",\"project_clipboardmanager_guide_index.md\":\"dffef057\",\"project_clipboardmanager_index.md\":\"bf20f10b\",\"project_clipboardmanager_log_index.md\":\"e2d01b2f\",\"project_clipboardmanager_statement_index.md\":\"2dbc8124\",\"project_clipboardmanager_vip_index.md\":\"1effd507\",\"project_markdown_index.md\":\"03660535\",\"project_markdown_log_index.md\":\"6b4bf027\",\"project_markdown_shortcut_index.md\":\"e6a513a7\",\"project_smartwordbreak_index.md\":\"24f7c555\",\"project_smartwordbreak_log_index.md\":\"4fc03f08\",\"project_smartwordbreak_statement_index.md\":\"d4c512df\",\"self_index.md\":\"ad21477f\",\"works_contribution.md\":\"964e1c6a\",\"works_opensource.md\":\"b84317a6\",\"article_【字节跳动】前端面试题总结.md\":\"c6320546\",\"article_【快手】深入理解前端面试题.md\":\"4839d66f\",\"article_【用友金融】前端面试题总结.md\":\"9bd66327\",\"article_一文读懂事件冒泡与事件捕获.md\":\"b1315fcd\",\"article_一文读懂伪类与伪元素.md\":\"42217fce\",\"article_一文读懂函数中this指向问题.md\":\"adfc02bb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"9476e735\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"34c30241\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"c7f94f9c\",\"article_深入javascript数据类型.md\":\"e7c3ddde\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"df9d58aa\",\"article_深入理解浏览器缓存机制.md\":\"43b18c14\",\"article_深入理解浏览器运行原理.md\":\"6a50392d\",\"index.md\":\"c0a055f1\",\"note_css.md\":\"8f85e473\",\"note_front-end engineering.md\":\"5b775f51\",\"note_javascript.md\":\"1bb5ba23\",\"article_深入理解proxy与reflect.md\":\"e3c214a8\",\"note_react.md\":\"07c484ec\",\"note_javascriptenhanced.md\":\"26cd6ded\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"collapsible\":true,\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsible\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsible\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsible\":true,\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"algolia\":{\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\",\"appId\":\"LFZ2CPWWUG\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/Engineering.html
+++ b/Engineering.html
--- a/note/JavaScript.html
+++ b/note/JavaScript.html
--- a/note/JavaScriptEnhanced.html
+++ b/note/JavaScriptEnhanced.html
@@ -10,7 +10,7 @@
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/assets/chunks/framework.a304f0f7.js">
  <link rel="modulepreload" href="/assets/chunks/theme.f2bdac91.js">
-  <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.9f4202d7.lean.js">
+  <link rel="modulepreload" href="/assets/note_JavaScriptEnhanced.md.26cd6ded.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>
  </head>
@@ -1869,8 +1869,8 @@
 <span class="line"><span style="color:#676E95;font-style:italic;">// 支持移除回调</span></span>
 <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></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-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><!----><div class="last-updated" data-v-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T08:27:23.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><a class="pager-link prev" href="/note/CSS.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Previous page</span><span class="title" data-v-b9eb50cb>CSS基础</span></a></div><div class="has-prev pager" data-v-b9eb50cb><a class="pager-link next" href="/note/Front-end%20Engineering.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>前端工程化</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_javascript.md\":\"aab6e2fb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"6ebdb392\",\"article_【字节跳动】前端面试题总结.md\":\"1a3eff4e\",\"article_一文读懂事件冒泡与事件捕获.md\":\"fa0ae635\",\"article_一文读懂伪类与伪元素.md\":\"0549470c\",\"article_一文读懂函数中this指向问题.md\":\"9282723b\",\"note_front-end engineering.md\":\"9c43ce48\",\"article_从0实现一个年度报告.md\":\"c7a20ac9\",\"article_深入javascript数据类型.md\":\"037af910\",\"article_【快手】深入理解前端面试题.md\":\"6ea1dd25\",\"article_深入理解浏览器缓存机制.md\":\"7f15e8a1\",\"article_深入理解proxy与reflect.md\":\"48518b05\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"957056b8\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"6c07875c\",\"note_ssr.md\":\"e3cb0c21\",\"project_clipboardmanager_guide_index.md\":\"5ab3687c\",\"project_clipboardmanager_index.md\":\"2f256018\",\"project_clipboardmanager_log_index.md\":\"f5005aea\",\"project_clipboardmanager_statement_index.md\":\"f76452d8\",\"project_clipboardmanager_vip_index.md\":\"95a0fd56\",\"project_markdown_index.md\":\"1d583290\",\"project_markdown_log_index.md\":\"f07fb39e\",\"project_markdown_shortcut_index.md\":\"5502bdcb\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"39b7ccb2\",\"project_smartwordbreak_index.md\":\"2ed1f7bf\",\"project_smartwordbreak_log_index.md\":\"6c8a3d85\",\"project_smartwordbreak_statement_index.md\":\"bc210171\",\"article_深入理解浏览器运行原理.md\":\"c9be404c\",\"index.md\":\"99cbb276\",\"self_index.md\":\"f865c628\",\"works_contribution.md\":\"daf805e4\",\"works_opensource.md\":\"22e4b738\",\"article_【用友金融】前端面试题总结.md\":\"6a40243c\",\"note_css.md\":\"5087943e\",\"note_javascriptenhanced.md\":\"9f4202d7\",\"note_react.md\":\"a93c260f\"}")
+<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></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-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><!----><div class="last-updated" data-v-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T13:08:39.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><a class="pager-link prev" href="/note/CSS.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Previous page</span><span class="title" data-v-b9eb50cb>CSS基础</span></a></div><div class="has-prev pager" data-v-b9eb50cb><a class="pager-link next" href="/note/Front-end%20Engineering.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>前端工程化</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_ssr.md\":\"3673ad3f\",\"article_从0实现一个年度报告.md\":\"09293691\",\"project_clipboardmanager_guide_index.md\":\"dffef057\",\"project_clipboardmanager_index.md\":\"bf20f10b\",\"project_clipboardmanager_log_index.md\":\"e2d01b2f\",\"project_clipboardmanager_statement_index.md\":\"2dbc8124\",\"project_clipboardmanager_vip_index.md\":\"1effd507\",\"project_markdown_index.md\":\"03660535\",\"project_markdown_log_index.md\":\"6b4bf027\",\"project_markdown_shortcut_index.md\":\"e6a513a7\",\"project_smartwordbreak_index.md\":\"24f7c555\",\"project_smartwordbreak_log_index.md\":\"4fc03f08\",\"project_smartwordbreak_statement_index.md\":\"d4c512df\",\"self_index.md\":\"ad21477f\",\"works_contribution.md\":\"964e1c6a\",\"works_opensource.md\":\"b84317a6\",\"article_【字节跳动】前端面试题总结.md\":\"c6320546\",\"article_【快手】深入理解前端面试题.md\":\"4839d66f\",\"article_【用友金融】前端面试题总结.md\":\"9bd66327\",\"article_一文读懂事件冒泡与事件捕获.md\":\"b1315fcd\",\"article_一文读懂伪类与伪元素.md\":\"42217fce\",\"article_一文读懂函数中this指向问题.md\":\"adfc02bb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"9476e735\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"34c30241\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"c7f94f9c\",\"article_深入javascript数据类型.md\":\"e7c3ddde\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"df9d58aa\",\"article_深入理解浏览器缓存机制.md\":\"43b18c14\",\"article_深入理解浏览器运行原理.md\":\"6a50392d\",\"index.md\":\"c0a055f1\",\"note_css.md\":\"8f85e473\",\"note_front-end engineering.md\":\"5b775f51\",\"note_javascript.md\":\"1bb5ba23\",\"article_深入理解proxy与reflect.md\":\"e3c214a8\",\"note_react.md\":\"07c484ec\",\"note_javascriptenhanced.md\":\"26cd6ded\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"collapsible\":true,\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsible\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsible\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsible\":true,\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"algolia\":{\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\",\"appId\":\"LFZ2CPWWUG\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/note/React.html
+++ b/note/React.html
@@ -10,7 +10,7 @@
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/assets/chunks/framework.a304f0f7.js">
  <link rel="modulepreload" href="/assets/chunks/theme.f2bdac91.js">
-  <link rel="modulepreload" href="/assets/note_React.md.a93c260f.lean.js">
+  <link rel="modulepreload" href="/assets/note_React.md.07c484ec.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>
  </head>
@@ -1041,12 +1041,10 @@
 <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></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></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to &quot;Context跨组件传参&quot;"></a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to &quot;用Context实现跨组件传参&quot;"></a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><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;">// context.js</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></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></div></div><h2 id="context跨组件传参" tabindex="-1">Context跨组件传参 <a class="header-anchor" href="#context跨组件传参" aria-label="Permalink to &quot;Context跨组件传参&quot;"></a></h2><p>非父子组件之间的数据共享</p><ul><li>props层层传递 跨组件会很不方便 对于中间那些本不需要这些props数据的组件是冗余的</li><li>第三方状态库 外置于React 如Redux （实际开发中较为常用）</li><li>事件总线 ...</li></ul><p>针对跨组件传参的场景，React提供了一个API名为Context</p><ul><li>Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props</li><li>使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等</li></ul><h3 id="用context实现跨组件传参" tabindex="-1">用Context实现跨组件传参 <a class="header-anchor" href="#用context实现跨组件传参" aria-label="Permalink to &quot;用Context实现跨组件传参&quot;"></a></h3><p>假设有App Profile UserCard三个嵌套组件，我们希望App中的 <code>isDarkMode</code> 状态能够透传到UserCard组件中</p><ul><li>全局通过 <code>createContext</code> 创建一个上下文</li><li>根组件通过 <code>DarkModeContext.Provider</code> 标签与 <code>value</code> 传递值到上下文中</li><li>需要使用到该值的子组件通过 <code>UserCard.contextType = DarkModeContext</code> 绑定到上下文</li><li>随后即可在子组件中通过 <code>this.context</code> 获取到此上下文当前绑定的状态值</li></ul><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-dBC_4" id="tab-jGG8F4B" checked="checked"><label for="tab-jGG8F4B">context.js</label><input type="radio" name="group-dBC_4" id="tab-eJIunUr"><label for="tab-eJIunUr">App.jsx</label><input type="radio" name="group-dBC_4" id="tab-fEJ8qVk"><label for="tab-fEJ8qVk">UserCard.jsx</label></div><div class="blocks"><div class="language-tsx active 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;">// context.js</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;">createContext</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:#C792EA;">const</span><span style="color:#A6ACCD;"> DarkModeContext </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createContext</span><span style="color:#A6ACCD;">()</span></span>
-<span class="line"></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;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> DarkModeContext </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createContext</span><span style="color:#A6ACCD;">()</span></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><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;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</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 style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Profile </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;">./components/Profile</span><span style="color:#89DDFF;">&#39;</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;">DarkModeContext</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;">./context</span><span style="color:#89DDFF;">&#39;</span></span>
@@ -1087,9 +1085,7 @@
 <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:#676E95;font-style:italic;">// UserCard.jsx</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></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></div></div><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;">// UserCard.jsx</span></span>
 <span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</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 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;">DarkModeContext</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;">../context</span><span style="color:#89DDFF;">&#39;</span></span>
 <span class="line"></span>
@@ -1104,7 +1100,7 @@
 <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:#A6ACCD;">UserCard</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextType </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> DarkModeContext</span></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></div></div><p>在类组件中可以通过Context共享数据，而函数组件中的this并没有指向组件实例，那么在函数式组件中应当如何使用？</p><p>用函数式组件重写一下 UserCard</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;">// UserCard.jsx</span></span>
+<span class="line"><span style="color:#A6ACCD;">UserCard</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextType </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> DarkModeContext</span></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></div></div></div></div><p>在类组件中可以通过Context共享数据，而函数组件中的this并没有指向组件实例，那么在函数式组件中应当如何使用？</p><p>用函数式组件重写一下 UserCard</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;">// UserCard.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;">DarkModeContext</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;">../context</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;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">UserCard</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
@@ -1148,8 +1144,83 @@
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">UserCard</span><span style="color:#89DDFF;"> {...this.</span><span style="color:#A6ACCD;">props</span><span style="color:#89DDFF;">} /&gt;</span></span>
 <span class="line"><span style="color:#676E95;font-style:italic;">// Details.jsx</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Details</span><span style="color:#89DDFF;"> {...this.</span><span style="color:#A6ACCD;">props</span><span style="color:#89DDFF;">} /&gt;</span></span>
-<span class="line"><span style="color:#89DDFF;">...</span></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></div></div></div></div></main><footer class="VPDocFooter" data-v-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><div class="edit-link" data-v-b9eb50cb><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-b9eb50cb data-v-fd6e3585><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-b9eb50cb><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-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T08:27:23.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><!----></div><div class="pager" data-v-b9eb50cb><a class="pager-link next" href="/project/ClipboardManager/" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>超级剪贴板</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_javascript.md\":\"aab6e2fb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"6ebdb392\",\"article_【字节跳动】前端面试题总结.md\":\"1a3eff4e\",\"article_一文读懂事件冒泡与事件捕获.md\":\"fa0ae635\",\"article_一文读懂伪类与伪元素.md\":\"0549470c\",\"article_一文读懂函数中this指向问题.md\":\"9282723b\",\"note_front-end engineering.md\":\"9c43ce48\",\"article_从0实现一个年度报告.md\":\"c7a20ac9\",\"article_深入javascript数据类型.md\":\"037af910\",\"article_【快手】深入理解前端面试题.md\":\"6ea1dd25\",\"article_深入理解浏览器缓存机制.md\":\"7f15e8a1\",\"article_深入理解proxy与reflect.md\":\"48518b05\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"957056b8\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"6c07875c\",\"note_ssr.md\":\"e3cb0c21\",\"project_clipboardmanager_guide_index.md\":\"5ab3687c\",\"project_clipboardmanager_index.md\":\"2f256018\",\"project_clipboardmanager_log_index.md\":\"f5005aea\",\"project_clipboardmanager_statement_index.md\":\"f76452d8\",\"project_clipboardmanager_vip_index.md\":\"95a0fd56\",\"project_markdown_index.md\":\"1d583290\",\"project_markdown_log_index.md\":\"f07fb39e\",\"project_markdown_shortcut_index.md\":\"5502bdcb\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"39b7ccb2\",\"project_smartwordbreak_index.md\":\"2ed1f7bf\",\"project_smartwordbreak_log_index.md\":\"6c8a3d85\",\"project_smartwordbreak_statement_index.md\":\"bc210171\",\"article_深入理解浏览器运行原理.md\":\"c9be404c\",\"index.md\":\"99cbb276\",\"self_index.md\":\"f865c628\",\"works_contribution.md\":\"daf805e4\",\"works_opensource.md\":\"22e4b738\",\"article_【用友金融】前端面试题总结.md\":\"6a40243c\",\"note_css.md\":\"5087943e\",\"note_javascriptenhanced.md\":\"9f4202d7\",\"note_react.md\":\"a93c260f\"}")
+<span class="line"><span style="color:#89DDFF;">...</span></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></div></div><h2 id="eventbus跨组件通信" tabindex="-1">EventBus跨组件通信 <a class="header-anchor" href="#eventbus跨组件通信" aria-label="Permalink to &quot;EventBus跨组件通信&quot;"></a></h2><p>很多第三方库实现了时间发布订阅，如 <code>tiny-emitter</code></p><p>可以借助EventBus完成全局状态共享：</p><ul><li>在 App.jsx 中点击按钮 触发全局事件并携带payload</li><li>当 Player 组件挂载时 <code>componentDidMount</code> 添加play事件的监听</li><li>当 Player 组件卸载时 <code>componentWillUnmount</code> 移除play事件的监听</li><li>在 Player 组件中展示当前播放的音乐</li></ul><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;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</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 style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Player </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;">./components/Player</span><span style="color:#89DDFF;">&#39;</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;">emit</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;">./eventbus</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;">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;">play</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</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;">    emit(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> musicName</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, Music</span><span style="color:#89DDFF;">&#39;</span><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:#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;&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Player</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#FFCB6B;">Player</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;">play</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Play</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;/&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:#676E95;font-style:italic;">// Player.jsx</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">,</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 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;">on</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">off</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;">../eventbus</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;">Player</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:#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;">      musicName</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</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;">playMusic</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">musicName</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;">console</span><span style="color:#89DDFF;">.</span><span style="color:#F07178;">log(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Music Play: </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">musicName</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">this.</span><span style="color:#F07178;">setState(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">musicName</span><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;">componentDidMount</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:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">playMusic</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;">componentWillUnmount</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:#82AAFF;">off</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">playMusic</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:#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;">Player</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;">p</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Now Playing: </span><span style="color:#89DDFF;">{this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">musicName</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">p</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></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></div></div><h2 id="setstate的使用详解" tabindex="-1">setState的使用详解 <a class="header-anchor" href="#setstate的使用详解" aria-label="Permalink to &quot;setState的使用详解&quot;"></a></h2><p>不同于Vue的自动追踪依赖，React是通过用户调用<code>setState</code>来获知状态的更新，所以开发者要更新状态不能直接<code>this.state.xxx = &#39;xxx&#39;</code>，而必须通过<code>setState</code>方法。这样React在内部才能获知状态的更新，继而触发对视图的更新。</p><p>从React的源码可以看到，setState方法是从Component集继承而来的</p><p><img src="/assets/prototype-setState.e1acb60c.png" alt="setState in source code of React"></p><h3 id="setstate的异步更新" tabindex="-1">setState的异步更新 <a class="header-anchor" href="#setstate的异步更新" aria-label="Permalink to &quot;setState的异步更新&quot;"></a></h3><p>当调用 <code>setState</code> 时，方法会使用 <code>Object.assign()</code> 方法将新旧state合并</p><p>也可以通过传入回调函数来更新state</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;">// 传入一个state对象 更新state</span></span>
+<span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><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;">count </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">// 传入回调函数 返回值作为将与旧state合并</span></span>
+<span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">props</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:#89DDFF;font-style:italic;">return</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:#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>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></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></div></div><p>传入回调函数来对state进行更新带来了一些好处：</p><ul><li>可以在回调中写心得state的逻辑（代码内聚性更强）</li><li>回调函数会将之前的state和当前的props传递进来</li><li>setState在React的事件处理中是被异步调用的</li></ul><p><strong>如何获取异步更新的结果？</strong></p><p>setState的异步更新也带来了一些问题，如果我们希望能在state变化后立即做出一些处理，可以使用到setState的第二个入参:</p><p>第二个参数是一个回调函数，在回调函数中获取到的state为更新后的state最新值</p><p><code>setState((oldState, props) =&gt; newState, () =&gt; ... )</code></p><h4 id="为什么setstate被设计为异步执行" tabindex="-1">为什么setState被设计为异步执行？ <a class="header-anchor" href="#为什么setstate被设计为异步执行" aria-label="Permalink to &quot;为什么setState被设计为异步执行？&quot;"></a></h4><p><a href="https://github.com/facebook/react/issues/11527#issuecomment-360199710" target="_blank" rel="noreferrer">Github: RFClarification: why is setState asynchronous?</a></p><ul><li>可以显著提升性能，出于性能优化考虑 <ul><li>假设<code>setState</code>是同步执行的，假设在调用函数后开发者连续调用了三次<code>setState</code></li><li>render函数会执行三次，创建三份不同的VDOM，执行三次Diff算法，三次更新到DOM上，带来重绘与重排...</li><li>如果在同一时间段内多次修改了state，那么React会在一段时间内的多次修改合并到一起，统一修改</li><li>这样，即使在同一时间多次触发<code>setState</code>，那么render函数也只会被调用一次</li></ul></li><li>如果同步更新state，那么render函数中通过props传参的子组件不会被更新，会出现数据不同步的问题 <ul><li>在setState后，可以立即获取到最新的state值，但是此时render函数并没有被执行</li></ul></li></ul><h4 id="setstate一定是异步的吗-react18之前" tabindex="-1">setState一定是异步的吗？（React18之前） <a class="header-anchor" href="#setstate一定是异步的吗-react18之前" aria-label="Permalink to &quot;setState一定是异步的吗？（React18之前）&quot;"></a></h4><p>在React18之后，setState方法调用都为异步的（在生命周期中 或在方法中）</p><p>但是在React18之前，某些情况下是同步的：</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;">// 异步执行 执行setState后当前state并未改变</span></span>
+<span class="line"><span style="color:#82AAFF;">changeTitle</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</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:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, React!</span><span style="color:#89DDFF;">&#39;</span><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:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</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;">title</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// Hello, World!</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">// 同步执行</span></span>
+<span class="line"><span style="color:#82AAFF;">changeTitle</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</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:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><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:#82AAFF;">setState</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, React!</span><span style="color:#89DDFF;">&#39;</span><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:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</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;">title</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// Hello, React!</span></span>
+<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">)</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></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></div></div><ul><li>这是因为setTimeout创建了一个宏任务，脱离了React内部的事件处理队列，不再受React的控制，从而达到了同步执行的效果</li><li>同样的，如果是通过DOM监听器触发的回调中执行setState，也会作为宏任务执行，脱离React的事件处理队列</li></ul><p>在React18之后，即使是setTimeout中的回调也是异步执行的，所有的回调都将被放入React内部维护的队列中，批量更新</p><blockquote><p>New Feature: Automatic Batching Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically: <a href="https://react.dev/blog/2022/03/29/react-v18#new-feature-automatic-batching" target="_blank" rel="noreferrer">What’s New in React 18</a></p></blockquote><ul><li>将多个状态更新会放到一次re-render中，为了更好的性能</li><li>只在React事件处理函数才会有批处理</li><li>之前：在promise/setTimeout/原生事件处理器以及其他的事件默认没有被批处理</li><li>现在：都会被做批量处理，收集state改变，统一更新</li></ul></div></div></main><footer class="VPDocFooter" data-v-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><div class="edit-link" data-v-b9eb50cb><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-b9eb50cb data-v-fd6e3585><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-b9eb50cb><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-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T13:08:39.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><!----></div><div class="pager" data-v-b9eb50cb><a class="pager-link next" href="/project/ClipboardManager/" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>超级剪贴板</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_ssr.md\":\"3673ad3f\",\"article_从0实现一个年度报告.md\":\"09293691\",\"project_clipboardmanager_guide_index.md\":\"dffef057\",\"project_clipboardmanager_index.md\":\"bf20f10b\",\"project_clipboardmanager_log_index.md\":\"e2d01b2f\",\"project_clipboardmanager_statement_index.md\":\"2dbc8124\",\"project_clipboardmanager_vip_index.md\":\"1effd507\",\"project_markdown_index.md\":\"03660535\",\"project_markdown_log_index.md\":\"6b4bf027\",\"project_markdown_shortcut_index.md\":\"e6a513a7\",\"project_smartwordbreak_index.md\":\"24f7c555\",\"project_smartwordbreak_log_index.md\":\"4fc03f08\",\"project_smartwordbreak_statement_index.md\":\"d4c512df\",\"self_index.md\":\"ad21477f\",\"works_contribution.md\":\"964e1c6a\",\"works_opensource.md\":\"b84317a6\",\"article_【字节跳动】前端面试题总结.md\":\"c6320546\",\"article_【快手】深入理解前端面试题.md\":\"4839d66f\",\"article_【用友金融】前端面试题总结.md\":\"9bd66327\",\"article_一文读懂事件冒泡与事件捕获.md\":\"b1315fcd\",\"article_一文读懂伪类与伪元素.md\":\"42217fce\",\"article_一文读懂函数中this指向问题.md\":\"adfc02bb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"9476e735\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"34c30241\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"c7f94f9c\",\"article_深入javascript数据类型.md\":\"e7c3ddde\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"df9d58aa\",\"article_深入理解浏览器缓存机制.md\":\"43b18c14\",\"article_深入理解浏览器运行原理.md\":\"6a50392d\",\"index.md\":\"c0a055f1\",\"note_css.md\":\"8f85e473\",\"note_front-end engineering.md\":\"5b775f51\",\"note_javascript.md\":\"1bb5ba23\",\"article_深入理解proxy与reflect.md\":\"e3c214a8\",\"note_react.md\":\"07c484ec\",\"note_javascriptenhanced.md\":\"26cd6ded\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"collapsible\":true,\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsible\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsible\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsible\":true,\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"algolia\":{\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\",\"appId\":\"LFZ2CPWWUG\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
--- a/note/SSR.html
+++ b/note/SSR.html