@shixinde/vuepress-theme-init
Version:
172 lines (169 loc) • 48.2 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.14" />
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html,
body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme')
const systemDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true)
}
</script>
<link rel="icon" href="/favicon.ico"><title>React扩展 | Guoguo-notes</title><meta name="description" content="袁果锅笔记">
<link rel="preload" href="/guoguo-notes/assets/style-35EaXqtH.css" as="style"><link rel="stylesheet" href="/guoguo-notes/assets/style-35EaXqtH.css">
<link rel="modulepreload" href="/guoguo-notes/assets/app-Dx9bNbfq.js"><link rel="modulepreload" href="/guoguo-notes/assets/尚硅谷React扩展笔记.html-CCxyveD2.js">
<link rel="prefetch" href="/guoguo-notes/assets/index.html-D6hY1Pr0.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React.html-DpSypgmq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java jdk 管理.html-UyxKEztz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/lingzhi.html-DrDRjKEH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/临时使用.html-D81L-GXB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/新公司.html-Bp4Oxj5H.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目架构升级版.html-CpJwv32O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/风扬小记.html-BTKAsyQB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python代码片段.html-3rxV2C-F.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python笔记.html-DfxyADl3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/AjaxResult.html-CcB1SHt9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 基础.html-C0Mw79YJ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 注解.html-DMhJ2pfz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MyBatis Plus.html-DXaupZNq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MySQL完整.html-E-VKR_Bm.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Mybatis 语法.html-BtyLUnj2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/StringBoot.html-IewOkkS1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea 插件.html-yFlZz-2q.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea快捷键.html-CI1PJIaN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java 代码片段.html-mGveOiyh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/mySql.html-mha8lKTS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页插件使用.html-BpMDhHym.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目初始化.html-TexbaFDo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/02_react案例_笔记.html-BzISG9Ro.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/03_react-router_教程.html-CiEuDnOl.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/04_react-UI_教程.html-CptRBAn1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/05_redux笔记.html-BBtVc0mQ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 笔记.html-BPeqw1PX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 项目配置流程.html-BXl6Ye6r.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷react-redux笔记.html-DYzvAaxv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-3ZVA3kn7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element Plus --vue3.0.html-DXuv_b9N.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element ui 笔记.html-sVqlVk_V.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Taro.html-CA8JB-of.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 代码片段.html-DKeMa5iO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 全局封装 main.js.html-D9vo-8hy.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 笔记.html-DGHKF3_K.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3 .html--oEgCjOt.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3_Element Plus.html-BVAoHXff.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/element plus 本地启动.html-CgsgPmvg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 代码片段.html-G1ShCdaZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 笔记.html-BtuYzmC-.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp笔记.html-ok2vMZAr.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite 笔记.html-D-EBkJ0C.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite手写插件.html-Cggy24Oh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vue.js 下载文件.html-B1uCoFDS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vueuse笔记.html-DS6eTZ6y.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vxe-table笔记.html-yUGgZHig.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/代码片段 - 解析数学公式.html-DdcBDyRv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用插件.html-CZkTIVvE.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/汇智腾远笔记.html-moZCMq7M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/视频播放插件.html-BcEFDEgf.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS笔记.html-fAv9dNNH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Echarts.html-Cge55fid.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git 代码管理.html-B63UoB0T.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Html 笔记.html--NntXjWX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/TypeScript.html-D-Qjaudh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/axios 请求拦截.html-D1TCv2Mj.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-Ka8coTuF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/npm.html-B-EmKZd8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/sh 笔记.html-B3G_4KZW.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/valibot校验学习.html-BBH2-2ZH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/云开发教程.html-DRtT7hW1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/公共API接口.html-p1pxjePH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/小程序笔记.html-BJbLxiMh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/插件库.html-CZ-6S-Qp.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器.html-BNfIswB8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器部署教学.html-T1qkai4O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/浏览器px to rem适配.html-DPzD4TkF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/登录逻辑.html-D5sdqJbb.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/网站配色.html-B_2Exge9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/跨域代理.html-BYkKrkY7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/接入AI.html-DVRrF1MA.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/查看 编辑对话框组件.html-zEZcOjWH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/简易电影选座.html-TuQVklis.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-1f6p3-c_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS--common.html-D0ck7nMZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/ES6.html-wEFap9Uq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git提交.html-CHssaRZs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Js获取当前时间的方法.html-BRnoMyWs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-App笔记.html-BUy_Af_M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-app API.html-CAzH1d66.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uniapp-插件.html-DB8eOvmu.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/VueX 笔记.html-BrvLUsYq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js函数封装.html-Cc5d9Th4.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-CIq-xlv8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uView基本使用.html-CCsyyvNN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp 引入组件库.html-BnVxGutO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用正则表达式.html-AS2O_lcX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/界面类.html-BEOhA9U_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/笔记.html-DcjAVSiK.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/组件封装.html-BF9gShal.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/编程逻辑整理.html-CZRD3wTo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/调用接口.html-DniVQnty.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SSH 配置.html-9u6Q-DHg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Editor.html-CfSL24h8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页组件.html-DcRa4Q6p.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/拖拽组件.html-D6yjy7lX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-LinbGCk2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/GIt 代码提交规范及步骤.html-w7f6_4N9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/命名_ 开发期间的命名规范.html-DhnWSrsL.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/大佬项目组织规范.html-B32Km5um.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/重要_框架 - 初始化项目约束.html-Sw9ULLk3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/404.html-BZdzN0T2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SearchResult-DqPIHYal.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon"><!--[--><header class="vp-navbar"><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/guoguo-notes/"><!----><span class="vp-site-name" aria-hidden="true">Guoguo-notes</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><button class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!--[--><button type="button" class="search-pro-button" aria-label="搜索"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">搜索</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar"><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E7%AC%94%E8%AE%B0.html" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">React笔记 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/02_react%E6%A1%88%E4%BE%8B_%E7%AC%94%E8%AE%B0.html" aria-label="1. 02_react案例_笔记.md"><!---->1. 02_react案例_笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/03_react-router_%E6%95%99%E7%A8%8B.html" aria-label="2. 03_react-router_教程.md"><!---->2. 03_react-router_教程.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/04_react-UI_%E6%95%99%E7%A8%8B.html" aria-label="3. 04_react-UI_教程.md"><!---->3. 04_react-UI_教程.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/05_redux%E7%AC%94%E8%AE%B0.html" aria-label="4. 05_redux笔记.md"><!---->4. 05_redux笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="5. React 笔记.md"><!---->5. React 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E6%B5%81%E7%A8%8B.html" aria-label="6. React 项目配置流程.md"><!---->6. React 项目配置流程.md<!----></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/%E5%B0%9A%E7%A1%85%E8%B0%B7React%E6%89%A9%E5%B1%95%E7%AC%94%E8%AE%B0.html" aria-label="7. 尚硅谷React扩展笔记.md"><!---->7. 尚硅谷React扩展笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/%E5%B0%9A%E7%A1%85%E8%B0%B7react-redux%E7%AC%94%E8%AE%B0.html" aria-label="8. 尚硅谷react-redux笔记.md"><!---->8. 尚硅谷react-redux笔记.md<!----></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h2 id="_1-setstate" tabindex="-1"><a class="header-anchor" href="#_1-setstate"><span>1. setState</span></a></h2><h3 id="setstate更新状态的2种写法" tabindex="-1"><a class="header-anchor" href="#setstate更新状态的2种写法"><span>setState更新状态的2种写法</span></a></h3><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line"> (1). setState(stateChange, [callback])------对象式的setState</span>
<span class="line"> 1.stateChange为状态改变对象(该对象可以体现出状态的更改)</span>
<span class="line"> 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用</span>
<span class="line"> </span>
<span class="line"> (2). setState(updater, [callback])------函数式的setState</span>
<span class="line"> 1.updater为返回stateChange对象的函数。</span>
<span class="line"> 2.updater可以接收到state和props。</span>
<span class="line"> 4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。</span>
<span class="line">总结:</span>
<span class="line"> 1.对象式的setState是函数式的setState的简写方式(语法糖)</span>
<span class="line"> 2.使用原则：</span>
<span class="line"> (1).如果新状态不依赖于原状态 ===> 使用对象方式</span>
<span class="line"> (2).如果新状态依赖于原状态 ===> 使用函数方式</span>
<span class="line"> (3).如果需要在setState()执行后获取最新的状态数据, </span>
<span class="line"> 要在第二个callback函数中读取</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="_2-lazyload" tabindex="-1"><a class="header-anchor" href="#_2-lazyload"><span>2. lazyLoad</span></a></h2><h3 id="路由组件的lazyload" tabindex="-1"><a class="header-anchor" href="#路由组件的lazyload"><span>路由组件的lazyLoad</span></a></h3><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token comment">//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包</span></span>
<span class="line"> <span class="token keyword">const</span> Login <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/Login'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"> </span>
<span class="line"> <span class="token comment">//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面</span></span>
<span class="line"> <span class="token operator"><</span>Suspense fallback<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>h1<span class="token operator">></span>loading<span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">}</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Switch<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/xxx"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Xxxx<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>Redirect to<span class="token operator">=</span><span class="token string">"/login"</span><span class="token operator">/</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Suspense<span class="token operator">></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="_3-hooks" tabindex="-1"><a class="header-anchor" href="#_3-hooks"><span>3. Hooks</span></a></h2><h4 id="_1-react-hook-hooks是什么" tabindex="-1"><a class="header-anchor" href="#_1-react-hook-hooks是什么"><span>1. React Hook/Hooks是什么?</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">(1). Hook是React 16.8.0版本增加的新特性/新语法</span>
<span class="line">(2). 可以让你在函数组件中使用 state 以及其他的 React 特性</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_2-三个常用的hook" tabindex="-1"><a class="header-anchor" href="#_2-三个常用的hook"><span>2. 三个常用的Hook</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">(1). State Hook: React.useState()</span>
<span class="line">(2). Effect Hook: React.useEffect()</span>
<span class="line">(3). Ref Hook: React.useRef()</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_3-state-hook" tabindex="-1"><a class="header-anchor" href="#_3-state-hook"><span>3. State Hook</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作</span>
<span class="line">(2). 语法: const [xxx, setXxx] = React.useState(initValue) </span>
<span class="line">(3). useState()说明:</span>
<span class="line"> 参数: 第一次初始化指定的值在内部作缓存</span>
<span class="line"> 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数</span>
<span class="line">(4). setXxx()2种写法:</span>
<span class="line"> setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值</span>
<span class="line"> setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_4-effect-hook" tabindex="-1"><a class="header-anchor" href="#_4-effect-hook"><span>4. Effect Hook</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)</span>
<span class="line">(2). React中的副作用操作:</span>
<span class="line"> 发ajax请求数据获取</span>
<span class="line"> 设置订阅 / 启动定时器</span>
<span class="line"> 手动更改真实DOM</span>
<span class="line">(3). 语法和说明: </span>
<span class="line"> useEffect(() => { </span>
<span class="line"> // 在此可以执行任何带副作用操作</span>
<span class="line"> return () => { // 在组件卸载前执行</span>
<span class="line"> // 在此做一些收尾工作, 比如清除定时器/取消订阅等</span>
<span class="line"> }</span>
<span class="line"> }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行</span>
<span class="line"> </span>
<span class="line">(4). 可以把 useEffect Hook 看做如下三个函数的组合</span>
<span class="line"> componentDidMount()</span>
<span class="line"> componentDidUpdate()</span>
<span class="line"> componentWillUnmount() </span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_5-ref-hook" tabindex="-1"><a class="header-anchor" href="#_5-ref-hook"><span>5. Ref Hook</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据</span>
<span class="line">(2). 语法: const refContainer = useRef()</span>
<span class="line">(3). 作用:保存标签对象,功能与React.createRef()一样</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="_4-fragment" tabindex="-1"><a class="header-anchor" href="#_4-fragment"><span>4. Fragment</span></a></h2><h3 id="使用" tabindex="-1"><a class="header-anchor" href="#使用"><span>使用</span></a></h3><pre><code><Fragment><Fragment>
<></>
</code></pre><h3 id="作用" tabindex="-1"><a class="header-anchor" href="#作用"><span>作用</span></a></h3><blockquote><p>可以不用必须有一个真实的DOM根标签了</p></blockquote><hr> ## 5. Context <h3 id="理解" tabindex="-1"><a class="header-anchor" href="#理解"><span>理解</span></a></h3><blockquote><p>一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信</p></blockquote><h3 id="使用-1" tabindex="-1"><a class="header-anchor" href="#使用-1"><span>使用</span></a></h3><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token number">1</span><span class="token punctuation">)</span> 创建Context容器对象：</span>
<span class="line"> <span class="token keyword">const</span> XxxContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span> </span>
<span class="line"> </span>
<span class="line"><span class="token number">2</span><span class="token punctuation">)</span> 渲染子组时，外面包裹xxxContext<span class="token punctuation">.</span>Provider<span class="token punctuation">,</span> 通过value属性给后代组件传递数据：</span>
<span class="line"> <span class="token operator"><</span>xxxContext<span class="token punctuation">.</span>Provider value<span class="token operator">=</span><span class="token punctuation">{</span>数据<span class="token punctuation">}</span><span class="token operator">></span></span>
<span class="line"> 子组件</span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>xxxContext<span class="token punctuation">.</span>Provider<span class="token operator">></span></span>
<span class="line"> </span>
<span class="line"><span class="token number">3</span><span class="token punctuation">)</span> 后代组件读取数据：</span>
<span class="line"></span>
<span class="line"> <span class="token comment">//第一种方式:仅适用于类组件 </span></span>
<span class="line"> <span class="token keyword">static</span> contextType <span class="token operator">=</span> xxxContext <span class="token comment">// 声明接收context</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token comment">// 读取context中的value数据</span></span>
<span class="line"> </span>
<span class="line"> <span class="token comment">//第二种方式: 函数组件与类组件都可以</span></span>
<span class="line"> <span class="token operator"><</span>xxxContext<span class="token punctuation">.</span>Consumer<span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token parameter">value</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token comment">// value就是context中的value数据</span></span>
<span class="line"> 要显示的内容</span>
<span class="line"> <span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>xxxContext<span class="token punctuation">.</span>Consumer<span class="token operator">></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="注意" tabindex="-1"><a class="header-anchor" href="#注意"><span>注意</span></a></h3><pre><code>在应用开发中一般不用context, 一般都它的封装react插件
</code></pre><hr> ## 6. 组件优化 <h3 id="component的2个问题" tabindex="-1"><a class="header-anchor" href="#component的2个问题"><span>Component的2个问题</span></a></h3><blockquote><ol><li><p>只要执行setState(),即使不改变状态数据, 组件也会重新render()</p></li><li><p>只当前组件重新render(), 就会自动重新render子组件 ==> 效率低</p></li></ol></blockquote><h3 id="效率高的做法" tabindex="-1"><a class="header-anchor" href="#效率高的做法"><span>效率高的做法</span></a></h3><blockquote><p>只有当组件的state或props数据发生改变时才重新render()</p></blockquote><h3 id="原因" tabindex="-1"><a class="header-anchor" href="#原因"><span>原因</span></a></h3><blockquote><p>Component中的shouldComponentUpdate()总是返回true</p></blockquote><h3 id="解决" tabindex="-1"><a class="header-anchor" href="#解决"><span>解决</span></a></h3><pre><code>办法1:
重写shouldComponentUpdate()方法
比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:
使用PureComponent
PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
注意:
只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化
</code></pre><hr> ## 7. render props <h3 id="如何向组件内部动态传入带内容的结构-标签" tabindex="-1"><a class="header-anchor" href="#如何向组件内部动态传入带内容的结构-标签"><span>如何向组件内部动态传入带内容的结构(标签)?</span></a></h3><pre><code>Vue中:
使用slot技术, 也就是通过组件标签体传入结构 <AA><BB/></AA>
React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构, 一般用render函数属性
</code></pre><h3 id="children-props" tabindex="-1"><a class="header-anchor" href="#children-props"><span>children props</span></a></h3><pre><code><A>
<B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到
</code></pre><h3 id="render-props" tabindex="-1"><a class="header-anchor" href="#render-props"><span>render props</span></a></h3><pre><code><A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}
</code></pre><hr> ## 8. 错误边界 <h4 id="理解-1" tabindex="-1"><a class="header-anchor" href="#理解-1"><span>理解：</span></a></h4><p>错误边界：用来捕获后代组件错误，渲染出备用页面</p><h4 id="特点" tabindex="-1"><a class="header-anchor" href="#特点"><span>特点：</span></a></h4><p>只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误</p><h5 id="使用方式" tabindex="-1"><a class="header-anchor" href="#使用方式"><span>使用方式：</span></a></h5><p>getDerivedStateFromError配合componentDidCatch</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 生命周期函数，一旦后台组件报错，就会触发</span></span>
<span class="line"><span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 在render之前触发</span></span>
<span class="line"> <span class="token comment">// 返回新的state</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token function">componentDidCatch</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 统计页面的错误。发送请求发送到后台去</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_9-组件通信方式总结" tabindex="-1"><a class="header-anchor" href="#_9-组件通信方式总结"><span>9. 组件通信方式总结</span></a></h2><h4 id="方式" tabindex="-1"><a class="header-anchor" href="#方式"><span>方式：</span></a></h4><pre><code> props：
(1).children props
(2).render props
消息订阅-发布：
pubs-sub、event等等
集中式管理：
redux、dva等等
conText:
生产者-消费者模式
</code></pre><h4 id="组件间的关系" tabindex="-1"><a class="header-anchor" href="#组件间的关系"><span>组件间的关系</span></a></h4><pre><code> 父子组件：props
兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理
祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)
</code></pre></div><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/shixindea/shixinde-notes/edit/main/React笔记/尚硅谷React扩展笔记.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 2914310412@qq.com">袁果锅</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E6%B5%81%E7%A8%8B.html" aria-label="6. React 项目配置流程.md"><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span>6. React 项目配置流程.md</span></div></a><a class="route-link auto-link next" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/%E5%B0%9A%E7%A1%85%E8%B0%B7react-redux%E7%AC%94%E8%AE%B0.html" aria-label="8. 尚硅谷react-redux笔记.md"><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span>8. 尚硅谷react-redux笔记.md</span></div></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!----><!--]--><!--]--></div>
<script type="module" src="/guoguo-notes/assets/app-Dx9bNbfq.js" defer></script>
</body>
</html>