study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-24 20:21:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
ZiuChen.github.io/note/React.html

145 lines
80 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>React | ZiuChen</title>
<meta name="description" content="Unlimited Progress.">
<link rel="preload stylesheet" href="/assets/style.edafdec9.css" as="style">
<link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.107ab7ad.js">
<link rel="modulepreload" href="/assets/app.ab8d0b9f.js">
<link rel="modulepreload" href="/assets/note_React.md.37738659.lean.js">
<link rel="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>
<body>
<div id="app"><div class="Layout" data-v-3af881ed><!--[--><!--]--><!--[--><span tabindex="-1" data-v-00bddfc0></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-00bddfc0> Skip to content </a><!--]--><!----><header class="VPNav" data-v-3af881ed data-v-3796071a><div class="VPNavBar has-sidebar" data-v-3796071a data-v-fe00b0e5><div class="container" data-v-fe00b0e5><div class="title" data-v-fe00b0e5><div class="VPNavBarTitle has-sidebar" data-v-fe00b0e5 data-v-a7f91dcc><a class="title" href="/" data-v-a7f91dcc><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-dca92699><!--]--><!--[-->ZiuChen<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-fe00b0e5><div class="curtain" data-v-fe00b0e5></div><div class="content-body" data-v-fe00b0e5><!--[--><!--]--><div class="VPNavBarSearch search" data-v-fe00b0e5 style="--6dc8a562:&#39;Meta&#39;;"><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-fe00b0e5 data-v-a4f7fa5c><span id="main-nav-aria-label" class="visually-hidden" data-v-a4f7fa5c>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" data-v-a4f7fa5c data-v-1a106a35 data-v-8dd200cc><!--[-->首页<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-a4f7fa5c data-v-e76b733c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e76b733c><span class="text" data-v-e76b733c><!----> 我的项目 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-e76b733c><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-e76b733c><div class="VPMenu" data-v-e76b733c data-v-faf23071><div class="items" data-v-faf23071><!--[--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/project/ClipboardManager/" data-v-c0d2d58e data-v-8dd200cc><!--[-->超级剪贴板<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/project/Markdown/" data-v-c0d2d58e data-v-8dd200cc><!--[-->超级Markdown<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/project/SmartWordBreak/" data-v-c0d2d58e data-v-8dd200cc><!--[-->超级分词<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-a4f7fa5c data-v-e76b733c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e76b733c><span class="text" data-v-e76b733c><!----> 开源作品 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-e76b733c><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-e76b733c><div class="VPMenu" data-v-e76b733c data-v-faf23071><div class="items" data-v-faf23071><!--[--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/works/opensource.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->个人作品<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/works/contribution.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->社区贡献<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-a4f7fa5c data-v-e76b733c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e76b733c><span class="text" data-v-e76b733c><!----> 学习笔记 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-e76b733c><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-e76b733c><div class="VPMenu" data-v-e76b733c data-v-faf23071><div class="items" data-v-faf23071><!--[--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/note/JavaScript.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->JavaScript基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/note/CSS.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->CSS基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/note/JavaScriptEnhanced.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->JavaScript进阶<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/note/Front-end%20Engineering.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->前端工程化<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-faf23071 data-v-c0d2d58e><a class="VPLink link" href="/note/SSR.html" data-v-c0d2d58e data-v-8dd200cc><!--[-->服务端渲染<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/self/" data-v-a4f7fa5c data-v-1a106a35 data-v-8dd200cc><!--[-->个人介绍<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-fe00b0e5 data-v-2d4753dd><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-2d4753dd data-v-867372a0 data-v-dc009bc3><span class="check" data-v-dc009bc3><span class="icon" data-v-dc009bc3><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-867372a0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-867372a0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-fe00b0e5 data-v-f0005c73 data-v-819d8281><!--[--><a class="VPSocialLink" href="https://github.com/ZiuChen" target="_blank" rel="noopener" data-v-819d8281 data-v-ba84061a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink" href="https://juejin.cn/user/1887205216238477" target="_blank" rel="noopener" data-v-819d8281 data-v-ba84061a><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></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-fe00b0e5 data-v-0467f0ad data-v-e76b733c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e76b733c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-e76b733c><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-e76b733c><div class="VPMenu" data-v-e76b733c data-v-faf23071><!----><!--[--><!--[--><!----><div class="group" data-v-0467f0ad><div class="item appearance" data-v-0467f0ad><p class="label" data-v-0467f0ad>Appearance</p><div class="appearance-action" data-v-0467f0ad><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-0467f0ad data-v-867372a0 data-v-dc009bc3><span class="check" data-v-dc009bc3><span class="icon" data-v-dc009bc3><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-867372a0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-867372a0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-0467f0ad><div class="item social-links" data-v-0467f0ad><div class="VPSocialLinks social-links-list" data-v-0467f0ad data-v-819d8281><!--[--><a class="VPSocialLink" href="https://github.com/ZiuChen" target="_blank" rel="noopener" data-v-819d8281 data-v-ba84061a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink" href="https://juejin.cn/user/1887205216238477" target="_blank" rel="noopener" data-v-819d8281 data-v-ba84061a><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></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-fe00b0e5 data-v-f1813d69><span class="container" data-v-f1813d69><span class="top" data-v-f1813d69></span><span class="middle" data-v-f1813d69></span><span class="bottom" data-v-f1813d69></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-3af881ed data-v-07d63927><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-07d63927><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-07d63927><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-07d63927>Menu</span></button><a class="top-link" href="#" data-v-07d63927>Return to top</a></div><aside class="VPSidebar" data-v-3af881ed data-v-eec6a639><div class="curtain" data-v-eec6a639></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-eec6a639><span class="visually-hidden" id="sidebar-aria-label" data-v-eec6a639> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-eec6a639><section class="VPSidebarItem level-0 collapsible" data-v-eec6a639 data-v-66b47b62><div class="item" role="button" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link" data-v-66b47b62 data-v-8dd200cc><!--[--><h2 class="text" data-v-66b47b62>我的项目</h2><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-66b47b62><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-66b47b62><!--[--><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/project/ClipboardManager/" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>超级剪贴板</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/project/Markdown/" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>超级Markdown</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/project/SmartWordBreak/" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>超级分词</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><!--]--></div></section></div><div class="group" data-v-eec6a639><section class="VPSidebarItem level-0 collapsible" data-v-eec6a639 data-v-66b47b62><div class="item" role="button" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link" data-v-66b47b62 data-v-8dd200cc><!--[--><h2 class="text" data-v-66b47b62>开源作品</h2><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-66b47b62><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-66b47b62><!--[--><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/works/opensource.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>个人作品</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/works/contribution.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>社区贡献</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><!--]--></div></section></div><div class="group" data-v-eec6a639><section class="VPSidebarItem level-0 collapsible" data-v-eec6a639 data-v-66b47b62><div class="item" role="button" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link" data-v-66b47b62 data-v-8dd200cc><!--[--><h2 class="text" data-v-66b47b62>文章归档</h2><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-66b47b62><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-66b47b62><!--[--><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E3%80%902023%E3%80%91%E9%9D%92%E8%AE%AD%E8%90%A5%20-%20%E5%89%8D%E7%AB%AF%E7%BB%83%E4%B9%A0%E9%A2%98%E6%B1%87%E6%80%BB%E8%A7%A3%E6%9E%90.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>【2023】青训营 - 前端练习题汇总解析</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E3%80%90%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>【字节跳动】前端面试题总结</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E3%80%90%E5%BF%AB%E6%89%8B%E3%80%91%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>【快手】深入理解前端面试题</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E3%80%90%E7%94%A8%E5%8F%8B%E9%87%91%E8%9E%8D%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>【用友金融】前端面试题总结</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>一文读懂事件冒泡与事件捕获</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BC%AA%E7%B1%BB%E4%B8%8E%E4%BC%AA%E5%85%83%E7%B4%A0.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>一文读懂伪类与伪元素</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E5%87%BD%E6%95%B0%E4%B8%ADthis%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>一文读懂函数中this指向问题</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>从0实现一个年度报告</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E5%BD%BB%E5%BA%95%E6%90%9E%E6%87%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6%E3%80%81%E5%AD%98%E5%82%A8%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>彻底搞懂对象的数据属性描述符、存储属性描述符</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E6%B5%85%E6%9E%90defineProperty%E4%B8%8EProxy%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>浅析defineProperty与Proxy实现的双向绑定</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5JavaScript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>深入JavaScript数据类型</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5Vue3%E6%BA%90%E7%A0%81%EF%BC%8C%E7%9C%8B%E7%9C%8BVue.use%E5%90%8E%E7%A9%B6%E7%AB%9F%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>深入Vue3源码，看看Vue.use后究竟发生了什么？</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Proxy%E4%B8%8EReflect.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>深入理解Proxy与Reflect</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>深入理解浏览器缓存机制</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>深入理解浏览器运行原理</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><!--]--></div></section></div><div class="group" data-v-eec6a639><section class="VPSidebarItem level-0 collapsible" data-v-eec6a639 data-v-66b47b62><div class="item" role="button" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link" data-v-66b47b62 data-v-8dd200cc><!--[--><h2 class="text" data-v-66b47b62>学习笔记</h2><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-66b47b62><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-66b47b62><!--[--><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/note/JavaScript.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>JavaScript基础</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/note/CSS.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>CSS基础</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/note/JavaScriptEnhanced.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>JavaScript进阶</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/note/Front-end%20Engineering.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>前端工程化</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-66b47b62 data-v-66b47b62><div class="item" data-v-66b47b62><div class="indicator" data-v-66b47b62></div><a class="VPLink link link" href="/note/SSR.html" data-v-66b47b62 data-v-8dd200cc><!--[--><p class="text" data-v-66b47b62>服务端渲染</p><!--]--><!----></a><div class="caret" role="button" data-v-66b47b62><!----></div></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-3af881ed data-v-e31feb0e><div class="VPDoc has-sidebar has-aside" data-v-e31feb0e data-v-30dabfe4><div class="container" data-v-30dabfe4><div class="aside" data-v-30dabfe4><div class="aside-curtain" data-v-30dabfe4></div><div class="aside-container" data-v-30dabfe4><div class="aside-content" data-v-30dabfe4><div class="VPDocAside" data-v-30dabfe4 data-v-7110f5c9><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-7110f5c9 data-v-9c6f1a55><div class="content" data-v-9c6f1a55><div class="outline-marker" data-v-9c6f1a55></div><div class="outline-title" data-v-9c6f1a55>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-9c6f1a55><span class="visually-hidden" id="doc-outline-aria-label" data-v-9c6f1a55> Table of Contents for current page </span><ul class="root" data-v-9c6f1a55 data-v-02afc12d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-7110f5c9></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-30dabfe4><div class="content-container" data-v-30dabfe4><!--[--><!--]--><main class="main" data-v-30dabfe4><div style="position:relative;" class="vp-doc _note_React" data-v-30dabfe4><div><h1 id="react" tabindex="-1">React <a class="header-anchor" href="#react" aria-hidden="true">#</a></h1><h2 id="邂逅react" tabindex="-1">邂逅React <a class="header-anchor" href="#邂逅react" aria-hidden="true">#</a></h2><h3 id="react开发依赖" tabindex="-1">React开发依赖 <a class="header-anchor" href="#react开发依赖" aria-hidden="true">#</a></h3><ul><li><code>react</code> 包含React的核心代码</li><li><code>react-dom</code> 将React渲染到不同平台需要的核心代码</li><li><code>babel</code> 将JSX转换成React代码的工具</li></ul><p>为什么要拆分成这么多的包？</p><ul><li>不同的库各司其职，让库变得纯粹</li><li><code>react</code>包中包含了 React Web 和 React Native 共同拥有的<strong>核心代码</strong></li><li><code>react-dom</code> 针对Web和Native完成的事情不同 <ul><li>Web端：<code>react-dom</code>会将JSX渲染成真实DOM，展示在浏览器中</li><li>Native端：<code>react-dom</code>会将JSX渲染成原生的控件（如Android中的Button，iOS中的UIButton）</li></ul></li></ul><h3 id="babel与react的关系" tabindex="-1">Babel与React的关系 <a class="header-anchor" href="#babel与react的关系" aria-hidden="true">#</a></h3><p>Babel是什么？</p><ul><li>Babel又名Babel.js</li><li>是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）</li><li>提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法</li></ul><p>二者之间的联系</p><ul><li>默认情况下React开发可以不使用Babel</li><li>但是我们不可能使用React.createElement来编写代码</li><li>通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement</li></ul><h3 id="react初体验" tabindex="-1">React初体验 <a class="header-anchor" href="#react初体验" aria-hidden="true">#</a></h3><p>我们通过CDN方式引入react、react-dom、babel这三个依赖</p><p>并且创建<code>#root</code>根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容</p><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;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">root</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>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</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;">https://unpkg.com/react@18/umd/react.development.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</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;">https://unpkg.com/react-dom@18/umd/react-dom.development.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</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;">https://unpkg.com/babel-standalone@6/babel.min.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text/babel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Hello, React!</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;,</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>这时，一个内容为<code>Hello, React!</code>的div标签就被渲染到页面上了</p><p>需要注意的是：<code>ReactDOM.render</code>这种写法适用于React18之前，在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:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Hello, React!</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="第一个react程序" tabindex="-1">第一个React程序 <a class="header-anchor" href="#第一个react程序" aria-hidden="true">#</a></h3><p>设想我们现在有这样一个需求：点击按钮使文本<code>Hello, World!</code>变为<code>Hello, React!</code></p><p>我们很容易就能写出如下代码：</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> msg </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, World!</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// initial render</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">handleChangeClick</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;">msg</span><span style="color:#F07178;"> </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>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span></span>
<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:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;{</span><span style="color:#A6ACCD;">msg</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">handleChangeClick</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#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:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>在Vue中，如果我们对数据进行了修改，Vue的数据响应式会自动帮我们完成视图的更新</p><p>然而在React中，当我们修改了数据需要通知React，让React重新渲染视图。在这里，我们可以把渲染的过程封装为一个函数，方便我们重复调用，触发重新渲染</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> msg </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, World!</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// initial render</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">handleChangeClick</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;">msg</span><span style="color:#F07178;"> </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>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">render</span><span style="color:#F07178;">() </span><span style="color:#676E95;font-style:italic;">// re-render</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">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:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</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;">msg</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">handleChangeClick</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#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:#89DDFF;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>这个案例中，我们使用<code>{}</code>语法，将动态的JS语法嵌入到JSX代码中</p><h3 id="组件化开发" tabindex="-1">组件化开发 <a class="header-anchor" href="#组件化开发" aria-hidden="true">#</a></h3><p>React有两种组件：类组件与函数组件，React18+推荐使用函数组件+Hooks</p><h4 id="类组件" tabindex="-1">类组件 <a class="header-anchor" href="#类组件" aria-hidden="true">#</a></h4><p>我们使用类组件来逐步重构上面的案例：</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">React</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">super</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, World!</span><span style="color:#89DDFF;">&#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 style="color:#A6ACCD;"> </span><span style="color:#F07178;">render</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;{this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">msg</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ul><li><p>类组件必须实现render方法，render方法返回值为后续React渲染到页面的内容</p></li><li><p>组件内数据分为两类</p><ul><li>参与页面更新的数据 <ul><li>当数据变化时，需要触发组件重新渲染</li></ul></li><li>不参与页面更新的数据 <ul><li>数据不会变化，或变化后也不需要重新渲染视图</li></ul></li></ul></li><li><p>需要触发视图重新渲染的数据，我们将其成为：<strong>参与数据流</strong></p><ul><li>定义在对象的<code>state</code>属性中</li><li>可以通过在构造函数中通过 <code>this.state = { name: &#39;Ziu&#39; }</code> 来定义状态</li><li>当数据发生变化，可以调用 <code>this.setState</code> 来更新数据，通知React执行视图更新</li><li>update操作时，会重新调用render函数，使用最新的数据来渲染界面</li></ul></li></ul><p>:::success 需要注意的是，在constructor中我们调用了<code>super</code>，因为App类是继承自React.Component类，调用<code>super</code>即调用了其父类的构造函数，让我们的App组件可以继承一些内置属性/方法如<code>state setState render</code> :::</p><p>至此我们完成了数据的迁移，下面我们来完成事件函数的迁移。</p><p>有了之前的介绍，我们很容易的可以写出下面的代码：</p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">React</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">super</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, World!</span><span style="color:#89DDFF;">&#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 style="color:#A6ACCD;"> </span><span style="color:#F07178;">changeText</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> msg</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>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span 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;">h2</span><span style="color:#89DDFF;">&gt;{this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">msg</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">h2</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;">changeText</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>我们可以写一个实例方法changeText来修改msg，然而此时changeText函数是不会正常工作的，我们在changeText中打log发现函数被正常触发了</p><p>为什么this.setState失效了？这和this的绑定有关：绑定的<code>changeText</code>在被调用时，向上找<code>this</code>找到的是<code>undefined</code></p><p>举一个类似情况的例子：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> app </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">App</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">changeText</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// this =&gt; app</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> func </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> app</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">changeText</span></span>
<span class="line"><span style="color:#82AAFF;">func</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// this =&gt; undefined</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>在非严格模式下，直接调用func时的this指向的是window，严格模式下则为undefined</p><p>为了解决this绑定的问题，我们需要显式把函数调用绑定给当前组件，这时组件就可以正常工作了。</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 has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">extends</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">React</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">Component</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">super</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, World!</span><span style="color:#89DDFF;">&#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 style="color:#A6ACCD;"> </span><span style="color:#F07178;">changeText</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">setState</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> msg</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>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span 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;">h2</span><span style="color:#89DDFF;">&gt;{this.</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">msg</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line highlighted"><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;">changeText</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">this</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="提前绑定this" tabindex="-1">提前绑定this <a class="header-anchor" href="#提前绑定this" aria-hidden="true">#</a></h3><p>在render函数中频繁通过<code>.bind</code>毕竟不太优雅，好在也有另一种方式：可以在constructor中提前对实例方法进行this绑定：</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 has-highlighted-lines"><code><span class="line"><span style="color:#89DDFF;">...</span></span>
<span class="line"><span style="color:#82AAFF;">constructor</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;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, World!</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">changeText</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">changeText</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={this.</span><span style="color:#A6ACCD;">changeText</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;">Change Text</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-30dabfe4 data-v-cc0f9778><div class="edit-info" data-v-cc0f9778><div class="edit-link" data-v-cc0f9778><a class="VPLink link edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/note/React.md" target="_blank" rel="noreferrer" data-v-cc0f9778 data-v-8dd200cc><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-cc0f9778><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--><!----></a></div><div class="last-updated" data-v-cc0f9778><p class="VPLastUpdated" data-v-cc0f9778 data-v-de6a4e1f>Updated Date: <time datetime="2023-04-14T16:38:57.000Z" data-v-de6a4e1f></time></p></div></div><div class="prev-next" data-v-cc0f9778><div class="pager" data-v-cc0f9778><!----></div><div class="pager" data-v-cc0f9778><a class="pager-link next" href="/project/ClipboardManager/" data-v-cc0f9778><span class="desc" data-v-cc0f9778>Next page</span><span class="title" data-v-cc0f9778>超级剪贴板</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-3af881ed data-v-8b655284><div class="container" data-v-8b655284><p class="message" data-v-8b655284>Released under the MIT License.</p><p class="copyright" data-v-8b655284>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"article_【字节跳动】前端面试题总结.md\":\"3dfdab7c\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"d16c49f7\",\"note_react.md\":\"37738659\",\"note_ssr.md\":\"2a6f7491\",\"article_【快手】深入理解前端面试题.md\":\"a17c91fe\",\"article_【用友金融】前端面试题总结.md\":\"7547802c\",\"article_一文读懂事件冒泡与事件捕获.md\":\"5137c93b\",\"article_一文读懂伪类与伪元素.md\":\"3caf47f7\",\"article_从0实现一个年度报告.md\":\"20b01bcf\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"16906c64\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"5f5050bc\",\"article_深入javascript数据类型.md\":\"dcbddda8\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"c3770229\",\"article_深入理解proxy与reflect.md\":\"58f72fb0\",\"article_深入理解浏览器缓存机制.md\":\"2f34ed14\",\"article_深入理解浏览器运行原理.md\":\"6d858ed2\",\"index.md\":\"1d9edc13\",\"note_css.md\":\"c02bd69e\",\"note_front-end engineering.md\":\"4e557ab2\",\"note_javascript.md\":\"c75739a0\",\"note_javascriptenhanced.md\":\"15a5ada8\",\"article_一文读懂函数中this指向问题.md\":\"7faa8a77\",\"project_clipboardmanager_index.md\":\"47c398e2\",\"project_clipboardmanager_log_index.md\":\"160bbac9\",\"project_clipboardmanager_statement_index.md\":\"de8d78b9\",\"project_clipboardmanager_vip_index.md\":\"65594262\",\"project_markdown_index.md\":\"e81bc18d\",\"project_markdown_log_index.md\":\"a6d3404e\",\"project_markdown_shortcut_index.md\":\"27d790ae\",\"project_smartwordbreak_index.md\":\"446fdae8\",\"project_smartwordbreak_log_index.md\":\"bccaf1f0\",\"project_smartwordbreak_statement_index.md\":\"78d0e16d\",\"self_index.md\":\"6b8d0d4e\",\"works_contribution.md\":\"868fc57c\",\"project_clipboardmanager_guide_index.md\":\"944e67a3\",\"works_opensource.md\":\"8d0e487f\"}")</script>
<script type="module" async src="/assets/app.ab8d0b9f.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink