<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>变量人生</title>
        <link>https://bianliangrensheng.cn/blog</link>
        <description>feedId:41215011978385457+userId:41840354283324416</description>
        <lastBuildDate>Thu, 15 Jan 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-CN</language>
        <copyright>Copyright © 2026 变量人生 Built with Docusaurus.&lt;p&gt;&lt;a href="https://beian.miit.gov.cn/" class="footer_lin"&gt;湘ICP备2025099656号-2&lt;/a&gt;&lt;/p&gt;</copyright>
        <item>
            <title><![CDATA[为何大部分公司数字化转型失败？]]></title>
            <link>https://bianliangrensheng.cn/blog/why-digital-transformation-fails</link>
            <guid>https://bianliangrensheng.cn/blog/why-digital-transformation-fails</guid>
            <pubDate>Thu, 15 Jan 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[深度解析企业数字化转型失败的根本原因，从老板的掌控欲、员工的真实想法到组织内部的矛盾博弈，揭示数字化转型的本质挑战。]]></description>
            <content:encoded><![CDATA[<p>很多公司搞数字化转型，最后都失败了。不是系统不行，也不是工具不先进，而是从一开始，这件事就注定很难落地。</p>
<div class="theme-admonition theme-admonition-danger admonition_Ax3r alert alert--danger"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>矛盾根源</div><div class="admonitionContent_VWDh"><p>最核心的原因只有一个：上下根本不齐心。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="老板为什么执着于数字化">老板为什么执着于数字化？<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E8%80%81%E6%9D%BF%E4%B8%BA%E4%BB%80%E4%B9%88%E6%89%A7%E7%9D%80%E4%BA%8E%E6%95%B0%E5%AD%97%E5%8C%96" class="hash-link" aria-label="老板为什么执着于数字化？的直接链接" title="老板为什么执着于数字化？的直接链接">​</a></h2>
<p>先说老板。老板想搞数字化，本质上不是为了"提效"，而是为了<strong>安全感</strong>。</p>
<p>他在公司里，就像个皇帝一样。每天坐在高位，看着一堆报表、听着各部门汇报，但心里总有一个挥之不去的疑问：他们有没有瞒着我？这个部门是不是藏单？这个负责人是不是没说真话？</p>
<p>这种不安全感，其实和古代皇帝一模一样——怕被蒙蔽，怕被架空，怕被人背后搞事情。</p>
<div class="theme-admonition theme-admonition-info admonition_Ax3r alert alert--info"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>数字化的吸引力</div><div class="admonitionContent_VWDh"><p>这时候，如果有人告诉他：有一种东西叫"数字化"，可以把所有员工的行为量化，把所有业务流放到线上，再给你做一个"数字化驾驶舱"，所有核心数据一眼就能看到。</p><p>老板会怎么想？</p><p>这玩意儿太对胃口了。</p><p>它精准地回应了老板对"掌控力"的需求。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="话术一变矛盾就出现了">话术一变，矛盾就出现了<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E8%AF%9D%E6%9C%AF%E4%B8%80%E5%8F%98%E7%9F%9B%E7%9B%BE%E5%B0%B1%E5%87%BA%E7%8E%B0%E4%BA%86" class="hash-link" aria-label="话术一变，矛盾就出现了的直接链接" title="话术一变，矛盾就出现了的直接链接">​</a></h2>
<p>但问题在于，当这件事要真正往下推的时候，话术就必须得变。你不能跟员工说："我要更好地盯着你们。"</p>
<p>于是就换了一套说法：帮助大家提效、帮助大家提升绩效、提升安全性、优化流程。听起来，全是为了员工好。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="员工的真实想法其实也很合理">员工的真实想法，其实也很合理<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E5%91%98%E5%B7%A5%E7%9A%84%E7%9C%9F%E5%AE%9E%E6%83%B3%E6%B3%95%E5%85%B6%E5%AE%9E%E4%B9%9F%E5%BE%88%E5%90%88%E7%90%86" class="hash-link" aria-label="员工的真实想法，其实也很合理的直接链接" title="员工的真实想法，其实也很合理的直接链接">​</a></h2>
<p>站在员工视角，他们的想法也完全说得通：工作是我在做，业务是我在管，哪效率低、哪里能提效，我自己最清楚。</p>
<p>那问题来了：既然是"帮我提效"，那数字化这件事，是不是应该我自己来决定、我自己来做？</p>
<p>有些老板一听，觉得也有道理："行，那数字化项目就放在业务部门吧。"看起来很民主，对吧？</p>
<p>但现实马上给你一巴掌。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="业务部门根本不可能把数字化放在第一优先级">业务部门根本不可能把数字化放在第一优先级<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E4%B8%9A%E5%8A%A1%E9%83%A8%E9%97%A8%E6%A0%B9%E6%9C%AC%E4%B8%8D%E5%8F%AF%E8%83%BD%E6%8A%8A%E6%95%B0%E5%AD%97%E5%8C%96%E6%94%BE%E5%9C%A8%E7%AC%AC%E4%B8%80%E4%BC%98%E5%85%88%E7%BA%A7" class="hash-link" aria-label="业务部门根本不可能把数字化放在第一优先级的直接链接" title="业务部门根本不可能把数字化放在第一优先级的直接链接">​</a></h2>
<p>我问你一个很现实的问题：<code>是先完成 KPI 重要，还是花时间想怎么系统性提效重要？</code>答案不用想，一定是先保 KPI。</p>
<p>业务部门每天被指标追着跑，根本不可能投入大量精力去想什么流程重构、系统设计。于是很快就变成了："我们也没系统啊，IT 部门你们去采购一套给我们吧。"业务继续冲业绩，数字化顺手"外包"给 IT。</p>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>现实困境</div><div class="admonitionContent_VWDh"><p>业务部门被指标追着跑，根本不可能投入大量精力去想什么流程重构、系统设计。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="it-部门我们也很冤">IT 部门：我们也很冤<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#it-%E9%83%A8%E9%97%A8%E6%88%91%E4%BB%AC%E4%B9%9F%E5%BE%88%E5%86%A4" class="hash-link" aria-label="IT 部门：我们也很冤的直接链接" title="IT 部门：我们也很冤的直接链接">​</a></h2>
<p>轮到 IT 这边，问题更大。IT 懂系统，但不懂业务。他们唯一能做的，就是等需求。</p>
<p>于是就出现了经典场面：<strong>IT 问：你们有什么数字化需求？</strong> <strong>业务答：……不知道</strong></p>
<p>很多业务部门，连"数字化到底是个什么概念"都说不清，更别提从哪里开始、要解决什么问题。会议一场接一场，提的全是零散需求。</p>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>IT 的困境</div><div class="admonitionContent_VWDh"><p>站在 IT 角度，你让他怎么做？好一点的：排期、慢慢来。差一点的：直接摆烂。但老板并不知道这些细节。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="半年过去老板直接崩溃">半年过去，老板直接崩溃<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E5%8D%8A%E5%B9%B4%E8%BF%87%E5%8E%BB%E8%80%81%E6%9D%BF%E7%9B%B4%E6%8E%A5%E5%B4%A9%E6%BA%83" class="hash-link" aria-label="半年过去，老板直接崩溃的直接链接" title="半年过去，老板直接崩溃的直接链接">​</a></h2>
<p>老板以为事情已经推下去了。结果半年过去，啥也没见着。</p>
<p>一问业务负责人："IT 不做。"</p>
<p>再问 IT："我们只是帮你们采购系统，是你们一直不提需求。"</p>
<p>到这一步，老板是真的崩了。</p>
<div class="theme-admonition theme-admonition-danger admonition_Ax3r alert alert--danger"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>沟通断层</div><div class="admonitionContent_VWDh"><p>老板以为事情已经推下去了，结果半年过去，啥也没见着。一问业务负责人："IT 不做。"再问 IT："是你们一直不提需求。"</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第三条路数字化办公室依然很危险">第三条路：数字化办公室，依然很危险<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E7%AC%AC%E4%B8%89%E6%9D%A1%E8%B7%AF%E6%95%B0%E5%AD%97%E5%8C%96%E5%8A%9E%E5%85%AC%E5%AE%A4%E4%BE%9D%E7%84%B6%E5%BE%88%E5%8D%B1%E9%99%A9" class="hash-link" aria-label="第三条路：数字化办公��室，依然很危险的直接链接" title="第三条路：数字化办公室，依然很危险的直接链接">​</a></h2>
<p>于是老板开始选第二条路：从外面招"懂数字化"的人、成立数字化办公室、直接向 CEO / 董事长汇报。听起来很专业，对吧？</p>
<p>但问题依旧。新来的人：不熟业务、不熟 IT、需要时间调研、推改革就一定会动到老员工的奶酪。</p>
<p>老员工会干嘛？私下去找老板，说你不懂业务、说你瞎折腾、说这样会影响今年业绩。</p>
<p>如果老板改革决心不够重，结果只有一个：**先稳业绩，改革缓一缓。**然后数字化再次烂尾。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="改革怎么可能不流血">改革怎么可能不流血？<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E6%94%B9%E9%9D%A9%E6%80%8E%E4%B9%88%E5%8F%AF%E8%83%BD%E4%B8%8D%E6%B5%81%E8%A1%80" class="hash-link" aria-label="改革怎么可能不流血？的直接链接" title="改革怎么可能不流血？的直接链接">​</a></h2>
<p>说一句不好听的：<strong>改革怎么可能不流血？改革怎么可能不死人？</strong></p>
<div class="theme-admonition theme-admonition-danger admonition_Ax3r alert alert--danger"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>改革的本质</div><div class="admonitionContent_VWDh"><p>数字化、信息化、智能化，对公司来说，本质上就是一次组织层面的深度改革。</p><p>它不是原有流程上加点系统，也不是原有管理上套个工具，而是<strong>翻天覆地的改变</strong>。</p><p>如果老板自己都没有这个决心，那就别谈数字化。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="就算成功了也还有两个坑">就算成功了，也还有两个坑<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E5%B0%B1%E7%AE%97%E6%88%90%E5%8A%9F%E4%BA%86%E4%B9%9F%E8%BF%98%E6%9C%89%E4%B8%A4%E4%B8%AA%E5%9D%91" class="hash-link" aria-label="就算成功了，也还有两个坑的直接链接" title="就算成功了，也还有两个坑的直接链接">​</a></h2>
<p>即便公司真的把数字化做成了，后面还有两个现实问题。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="兔死狗烹">兔死狗烹<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E5%85%94%E6%AD%BB%E7%8B%97%E7%83%B9" class="hash-link" aria-label="兔死狗烹的直接链接" title="兔死狗烹的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>做完数字化反而没价值了</div><div class="admonitionContent_VWDh"><p>很多做数字化的人，最后都会发现：数字化做完了，你在公司反而没价值了。因为数字化本身就是为了降本增效，而你，变成了"多出来的成本"。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="顽疾才是真正的深水区">顽疾，才是真正的深水区<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E9%A1%BD%E7%96%BE%E6%89%8D%E6%98%AF%E7%9C%9F%E6%AD%A3%E7%9A%84%E6%B7%B1%E6%B0%B4%E5%8C%BA" class="hash-link" aria-label="顽疾，才是真正的深水区的直接链接" title="顽疾，才是真正的深水区的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-danger admonition_Ax3r alert alert--danger"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>真正的挑战</div><div class="admonitionContent_VWDh"><p>数字化只是把问题暴露出来。真正难的是后面要不要去解决这些顽疾。而这些问题，往往涉及更深层的利益博弈。你解决不了，老板就会对你失去信任。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="最后一句实话">最后一句实话<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E6%9C%80%E5%90%8E%E4%B8%80%E5%8F%A5%E5%AE%9E%E8%AF%9D" class="hash-link" aria-label="最后一句实话的直接链接" title="最后一句实话的直接链接">​</a></h2>
<p>在做数字化之前，你必须想清楚几件事：</p>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>数字化前必想清单</div><div class="admonitionContent_VWDh"><ol>
<li>老板真正的意图是什么</li>
<li>公司现在的博弈结构是什么</li>
<li>你会动到谁的奶酪</li>
<li>你有没有足够的授权和信任</li>
<li>你到底下了多大的决心</li>
</ol></div></div>
<p>想明白了再做。想不明白，真的，别做。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="解决之道让懂业务�的人来做数字化">解决之道：让懂业务的人来做数字化<a href="https://bianliangrensheng.cn/blog/why-digital-transformation-fails#%E8%A7%A3%E5%86%B3%E4%B9%8B%E9%81%93%E8%AE%A9%E6%87%82%E4%B8%9A%E5%8A%A1%E7%9A%84%E4%BA%BA%E6%9D%A5%E5%81%9A%E6%95%B0%E5%AD%97%E5%8C%96" class="hash-link" aria-label="解决之道：让懂业务的人来做数字化的直接链接" title="解决之道：让懂业务的人来做数字化的直接链接">​</a></h2>
<p>说了这么多问题，那到底有没有可行的解决方法？</p>
<p>其实方法很简单，但需要老板下定决心：</p>
<p><strong>把最熟悉业务的部门负责人调入到 IT，给升职加薪，由 IT 牵头做数字化。</strong></p>
<p>这样做的好处是：</p>
<ol>
<li><strong>懂业务</strong>：从业务部门调来的人，最清楚业务流程和痛点在哪里</li>
<li><strong>有话语权</strong>：升职加薪后，在 IT 部门有足够的话语权和资源调配能力</li>
<li><strong>能协调</strong>：既懂业务又管 IT，能更好地协调两边的需求</li>
<li><strong>减少阻力</strong>：由业务出身的人来推动数字化，老员工更容易接受</li>
</ol>
<p>把懂业务的人放到 IT 的位置上，让他们来主导数字化进程，往往是最有效的路径。</p>
<p>前提是，老板真的愿意下这个决心。</p>]]></content:encoded>
            <category>数字化转型</category>
            <category>企业管理</category>
            <category>组织变革</category>
            <category>职场观察</category>
        </item>
        <item>
            <title><![CDATA[FRP内网穿透教程：轻松实现本地开发环境与公网的连接]]></title>
            <link>https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial</link>
            <guid>https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial</guid>
            <pubDate>Sun, 20 Jul 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍如何使用FRP实现内网穿透，解决本地开发环境接收支付回调的问题。包含服务器端与客户端的完整配置与启动方法，以及常见问题解答。]]></description>
            <content:encoded><![CDATA[<p>当我们在进行支付功能开发时，经常会遇到一个问题：支付平台（如支付宝、微信支付）需要向我们的服务器发送支付结果回调，但我们的开发环境通常在本地电脑上。这篇文章将介绍如何使用FRP这款强大的内网穿透工具，让你的本地开发环境能够接收到这些回调请求。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-frp简介">1. FRP简介<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#1-frp%E7%AE%80%E4%BB%8B" class="hash-link" aria-label="1. FRP简介的直接链接" title="1. FRP简介的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="11-什么是frp">1.1 什么是FRP<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#11-%E4%BB%80%E4%B9%88%E6%98%AFfrp" class="hash-link" aria-label="1.1 什么是FRP的直接链接" title="1.1 什么是FRP的直接链接">​</a></h3>
<p>FRP (Fast Reverse Proxy) 是一个高性能的反向代理应用，可以帮助我们将NAT或防火墙后面的本地服务器暴露到公网上。它支持TCP、UDP、HTTP、HTTPS等多种协议，特别适合开发环境中测试第三方回调的场景。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="12-为什么需要内网穿透">1.2 为什么需要内网穿透<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#12-%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F" class="hash-link" aria-label="1.2 为什么需要内网穿透的直接链接" title="1.2 为什么需要内网穿透的直接链接">​</a></h3>
<p>在开发支付功能时，支付平台完成用户支付后，会向我们预先设置的回调地址发送通知。但是：</p>
<ul>
<li>本地开发环境通常没有公网IP</li>
<li>即使有公网IP，家庭宽带通常会被运营商封锁常用端口</li>
<li>企业网络可能有严格的防火墙策略</li>
</ul>
<p>通过内网穿透，我们可以：</p>
<ul>
<li>将本地开发环境与公网连接</li>
<li>接收并处理支付回调请求</li>
<li>实时调试支付流程，而无需部署到正式服务器</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-环境准备">2. 环境准备<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#2-%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87" class="hash-link" aria-label="2. 环境准备的直接链接" title="2. 环境准备的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="21-所需资源">2.1 所需资源<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#21-%E6%89%80%E9%9C%80%E8%B5%84%E6%BA%90" class="hash-link" aria-label="2.1 所需资源的直接链接" title="2.1 所需资源的直接链接">​</a></h3>
<ul>
<li>一台有公网IP的服务器（阿里云、腾讯云等）</li>
<li>FRP客户端和服务端程序</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="22-下载frp">2.2 下载FRP<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#22-%E4%B8%8B%E8%BD%BDfrp" class="hash-link" aria-label="2.2 下载FRP的直接链接" title="2.2 下载FRP的直接链接">​</a></h3>
<p>从GitHub上下载最新版本的FRP：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># 官方下载地址</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">https://github.com/fatedier/frp/releases</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>根据你的操作系统选择对应的版本：</p>
<ul>
<li>Windows: frp_x.xx.x_windows_amd64.zip</li>
<li>Linux: frp_x.xx.x_linux_amd64.tar.gz</li>
<li>MacOS: frp_x.xx.x_darwin_amd64.tar.gz</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-服务器端配置">3. 服务器端配置<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#3-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="3. 服务器端配置的直接链接" title="3. 服务器端配置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="31-基本配置">3.1 基本配置<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#31-%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="3.1 基本配置的直接链接" title="3.1 基本配置的直接链接">​</a></h3>
<p>在服务器上，我们需要配置并运行frps（FRP Server）。</p>
<p>创建<code>frps.toml</code>配置文件：</p>
<div class="language-toml codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-toml codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># frps.toml</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">bindPort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">7000</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 设置访问frps的认证token</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">auth.token</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"1234567899"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 如果需要访问仪表盘（可选）</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">webServer.addr</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"0.0.0.0"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">webServer.port</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">7500</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">webServer.user</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"admin"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">webServer.password</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"admin"</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>配置说明：</p>
<ul>
<li><code>bindPort</code>: FRP服务端监听的端口，客户端将连接到这个端口</li>
<li><code>auth.token</code>: 用于客户端和服务端之间的认证</li>
<li><code>webServer</code>: 配置FRP的Web管理界面（可选）</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="32-启动服务">3.2 启动服务<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#32-%E5%90%AF%E5%8A%A8%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="3.2 启动服务的直接链接" title="3.2 启动服务的直接链接">​</a></h3>
<p>使用以下命令启动FRP服务端：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">./frps </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-c</span><span class="token plain"> frps.toml</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果你想让它在后台运行：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">nohup</span><span class="token plain"> ./frps </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-c</span><span class="token plain"> frps.toml </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&amp;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="33-设置开机自启可选">3.3 设置开机自启（可选）<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#33-%E8%AE%BE%E7%BD%AE%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF%E5%8F%AF%E9%80%89" class="hash-link" aria-label="3.3 设置开机自启（可选）的直接链接" title="3.3 设置开机自启（可选）的直接链接">​</a></h3>
<p>在Linux系统中，你可以创建一个systemd服务：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">vim</span><span class="token plain"> /etc/systemd/system/frps.service</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>添加以下内容：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token maybe-class-name">Unit</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">Description</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token maybe-class-name">Frp</span><span class="token plain"> </span><span class="token maybe-class-name">Server</span><span class="token plain"> </span><span class="token maybe-class-name">Service</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">After</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">network</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token maybe-class-name">Service</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">Type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">simple</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">User</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">nobody</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">Restart</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">on</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">failure</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">RestartSec</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">5s</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ExecStart</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">to</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">frps </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">c </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">to</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">frps</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">toml</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token maybe-class-name">Install</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">WantedBy</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">multi</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>然后启用并启动服务：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">enable</span><span class="token plain"> frps</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl start frps</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="4-客户端配置">4. 客户端配置<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#4-%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="4. 客户端配置的直接链接" title="4. 客户端配置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="41-windows环境配置">4.1 Windows环境配置<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#41-windows%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="4.1 Windows环境配置的直接链接" title="4.1 Windows环境配置的直接链接">​</a></h3>
<p>创建<code>frpc.toml</code>配置文件：</p>
<div class="language-toml codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-toml codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># frpc.toml</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">serverAddr</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"106.52.209.18"</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 你的服务器IP</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">serverPort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">7000</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">auth.token</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"1234567899"</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 必须与frps.toml中的token相同</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token table class-name" style="color:hsl(35, 99%, 36%)">proxies</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">name</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"web"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">type</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"tcp"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localIP</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"127.0.0.1"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localPort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">8080</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">remotePort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">9090</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 公网访问端口</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>配置说明：</p>
<ul>
<li><code>serverAddr</code>: 服务器的公网IP</li>
<li><code>serverPort</code>: FRP服务端监听的端口</li>
<li><code>auth.token</code>: 与服务端配置中相同的认证令牌</li>
<li><code>proxies</code>: 代理配置<!-- -->
<ul>
<li><code>name</code>: 代理名称</li>
<li><code>type</code>: 协议类型</li>
<li><code>localIP</code>: 本地服务IP</li>
<li><code>localPort</code>: 本地服务端口</li>
<li><code>remotePort</code>: 服务器上映射的端口</li>
</ul>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="42-启动客户端">4.2 启动客户端<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#42-%E5%90%AF%E5%8A%A8%E5%AE%A2%E6%88%B7%E7%AB%AF" class="hash-link" aria-label="4.2 启动客户端的直接链接" title="4.2 启动客户端的直接链接">​</a></h3>
<p>在Windows上，打开命令提示符或PowerShell，执行：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">frpc.exe </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-c</span><span class="token plain"> frpc.toml</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="43-httphttps协议配置">4.3 HTTP/HTTPS协议配置<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#43-httphttps%E5%8D%8F%E8%AE%AE%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="4.3 HTTP/HTTPS协议配置的直接链接" title="4.3 HTTP/HTTPS协议配置的直接链接">​</a></h3>
<p>如果你需要HTTP/HTTPS协议的支持（比如使用域名访问），可以使用以下配置：</p>
<div class="language-toml codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-toml codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># frpc.toml中添加</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token table class-name" style="color:hsl(35, 99%, 36%)">proxies</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">name</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"web-http"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">type</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"http"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localPort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">8080</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">customDomains</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token string" style="color:hsl(119, 34%, 47%)">"api.yourdomain.com"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>注意：使用HTTP/HTTPS协议需要在frps.toml中增加相应配置，并且需要将域名解析到服务器IP。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="5-支付回调测试">5. 支付回调测试<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#5-%E6%94%AF%E4%BB%98%E5%9B%9E%E8%B0%83%E6%B5%8B%E8%AF%95" class="hash-link" aria-label="5. 支付回调测试的直接链接" title="5. 支付回调测试的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="51-配置回调地址">5.1 配置回调地址<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#51-%E9%85%8D%E7%BD%AE%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80" class="hash-link" aria-label="5.1 配置回调地址的直接链接" title="5.1 配置回调地址的直接链接">​</a></h3>
<p>在支付平台（如支付宝、微信支付）的开发者后台，将回调地址设置为：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">http</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">你的服务器</span><span class="token constant" style="color:hsl(35, 99%, 36%)">IP</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token number" style="color:hsl(35, 99%, 36%)">9090</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">your</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">callback</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">path</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>或者使用HTTP类型代理时：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">http</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">api</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">yourdomain</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">com</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">your</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">callback</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">path</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="52-本地服务准备">5.2 本地服务准备<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#52-%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%87%86%E5%A4%87" class="hash-link" aria-label="5.2 本地服务准备的直接链接" title="5.2 本地服务准备的直接链接">​</a></h3>
<p>确保你的本地开发服务已经在配置的端口（如8080）上运行，并且有处理回调的路由。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="53-测试流程">5.3 测试流程<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#53-%E6%B5%8B%E8%AF%95%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="5.3 测试流程的直接链接" title="5.3 测试流程的直接链接">​</a></h3>
<ol>
<li>启动FRP服务端和客户端</li>
<li>启动本地开发服务</li>
<li>发起一笔测试支付</li>
<li>检查本地服务是否收到回调请求</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="6-安全性考虑">6. 安全性考虑<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#6-%E5%AE%89%E5%85%A8%E6%80%A7%E8%80%83%E8%99%91" class="hash-link" aria-label="6. 安全性考虑的直接链接" title="6. 安全性考虑的直接链接">​</a></h2>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>安全警告</div><div class="admonitionContent_VWDh"><p>内网穿透工具可能带来安全风险，建议：</p><ol>
<li>使用复杂的认证令牌（不要使用示例中的简单令牌）</li>
<li>只开放必要的端口</li>
<li>配置防火墙限制访问IP</li>
<li>仅在开发测试环境中使用，生产环境应使用正规部署方式</li>
<li>定期更换认证信息</li>
</ol></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="7-常见问题解答">7. 常见问题解答<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#7-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94" class="hash-link" aria-label="7. 常见问题解答的直接链接" title="7. 常见问题解答的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-客户端提示login-to-server-failed怎么办">Q: 客户端提示"login to server failed"怎么办？<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#q-%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%8F%90%E7%A4%BAlogin-to-server-failed%E6%80%8E%E4%B9%88%E5%8A%9E" class="hash-link" aria-label="Q: 客户端提示&quot;login to server failed&quot;怎么办？的直接链接" title="Q: 客户端提示&quot;login to server failed&quot;怎么办？的直接链接">​</a></h3>
<p>A: 检查服务端和客户端的token是否一致，以及服务器的IP和端口是否正确。另外，确保服务器防火墙已开放对应端口。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-如何确认frp连接是否正常">Q: 如何确认FRP连接是否正常？<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#q-%E5%A6%82%E4%BD%95%E7%A1%AE%E8%AE%A4frp%E8%BF%9E%E6%8E%A5%E6%98%AF%E5%90%A6%E6%AD%A3%E5%B8%B8" class="hash-link" aria-label="Q: 如何确认FRP连接是否正常？的直接链接" title="Q: 如何确认FRP连接是否正常？的直接链接">​</a></h3>
<p>A: 你可以通过访问公网IP:映射端口来测试连接是否成功。如果配置了Web管理界面，也可以登录查看连接状态。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-支付回调没有收到怎么办">Q: 支付回调没有收到怎么办？<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#q-%E6%94%AF%E4%BB%98%E5%9B%9E%E8%B0%83%E6%B2%A1%E6%9C%89%E6%94%B6%E5%88%B0%E6%80%8E%E4%B9%88%E5%8A%9E" class="hash-link" aria-label="Q: 支付回调没有收到怎么办？的直接链接" title="Q: 支付回调没有收到怎么办？的直接链接">​</a></h3>
<p>A: 请检查：</p>
<ol>
<li>FRP客户端和服务端是否正常运行</li>
<li>本地服务是否正常响应</li>
<li>回调URL是否配置正确</li>
<li>服务器防火墙是否开放了对应端口</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-如何在mac或linux上配置客户端">Q: 如何在Mac或Linux上配置客户端？<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#q-%E5%A6%82%E4%BD%95%E5%9C%A8mac%E6%88%96linux%E4%B8%8A%E9%85%8D%E7%BD%AE%E5%AE%A2%E6%88%B7%E7%AB%AF" class="hash-link" aria-label="Q: 如何在Mac或Linux上配置客户端？的直接链接" title="Q: 如何在Mac或Linux上配置客户端？的直接链接">​</a></h3>
<p>A: Mac/Linux配置与Windows类似，只是启动命令有所不同：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">./frpc </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-c</span><span class="token plain"> ./frpc.toml</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="8-进阶使用">8. 进阶使用<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#8-%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="8. 进阶使用的直接链接" title="8. 进阶使用的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="81-多服务映射">8.1 多服务映射<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#81-%E5%A4%9A%E6%9C%8D%E5%8A%A1%E6%98%A0%E5%B0%84" class="hash-link" aria-label="8.1 多服务映射的直接链接" title="8.1 多服务映射的直接链接">​</a></h3>
<p>你可以在一个客户端配置文件中设置多个代理：</p>
<div class="language-toml codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-toml codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token table class-name" style="color:hsl(35, 99%, 36%)">proxies</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">name</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"web1"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">type</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"tcp"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localIP</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"127.0.0.1"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localPort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">8080</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">remotePort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">9090</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token table class-name" style="color:hsl(35, 99%, 36%)">proxies</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">name</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"web2"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">type</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"tcp"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localIP</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"127.0.0.1"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">localPort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3000</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">remotePort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">9091</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="82-负载均衡集群模式">8.2 负载均衡（集群模式）<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#82-%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%9B%86%E7%BE%A4%E6%A8%A1%E5%BC%8F" class="hash-link" aria-label="8.2 负载均衡（集群模式）的直接链接" title="8.2 负载均衡（集群模式）的直接链接">​</a></h3>
<p>FRP支持集群模式，可以实现负载均衡：</p>
<div class="language-toml codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-toml codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># frps.toml</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token table class-name" style="color:hsl(35, 99%, 36%)">proxies</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">name</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"web-cluster"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">type</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"tcp"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">loadBalancer.group</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"web"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">loadBalancer.groupKey</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"123"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token key property" style="color:hsl(5, 74%, 59%)">remotePort</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">9090</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>多个客户端可以加入同一个组，共同提供服务。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="9-参考资源">9. 参考资源<a href="https://bianliangrensheng.cn/blog/frp-internal-network-penetration-tutorial#9-%E5%8F%82%E8%80%83%E8%B5%84%E6%BA%90" class="hash-link" aria-label="9. 参考资源的直接链接" title="9. 参考资源的直接链接">​</a></h2>
<ul>
<li><span style="display:inline-flex;gap:0.25rem"><span></span><a href="https://github.com/fatedier/frp/blob/master/README.md" target="_blank" rel="noopener noreferrer" class="link">FRP 官方文档</a></span></li>
<li><span style="display:inline-flex;gap:0.25rem"><span></span><a href="https://github.com/fatedier/frp/blob/master/README_zh.md" target="_blank" rel="noopener noreferrer" class="link">FRP 常见问题</a></span></li>
<li><a href="https://www.zhihu.com/question/59440538" target="_blank" rel="noopener noreferrer" class="link">内网穿透技术比较</a></li>
<li><a href="https://opendocs.alipay.com/open/270/105902" target="_blank" rel="noopener noreferrer" class="link">支付宝开发文档-回调机制</a></li>
<li><a href="https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7" target="_blank" rel="noopener noreferrer" class="link">微信支付开发文档-通知回调</a></li>
</ul>]]></content:encoded>
            <category>FRP</category>
            <category>内网穿透</category>
            <category>支付回调</category>
            <category>本地开发</category>
            <category>服务器配置</category>
        </item>
        <item>
            <title><![CDATA[UniApp支付宝沙箱支付问题解决：商家订单参数异常的终极方案]]></title>
            <link>https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution</link>
            <guid>https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution</guid>
            <pubDate>Tue, 15 Jul 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细解析UniApp集成支付宝沙箱环境支付时遇到"商家订单参数异常"错误的解决方案，包含完整代码示例与实现步骤。]]></description>
            <content:encoded><![CDATA[<p>在开发UniApp应用的支付功能时，我们通常会先使用支付宝沙箱环境进行测试，避免在真实环境中频繁发起测试交易。但很多开发者可能会遇到一个令人头疼的问题：明明参数看起来都正确，却总是提示"商家订单参数异常，请重新发起付款"，接着报出一堆看不懂的错误代码。今天，我就来分享一下我踩过的坑和最终的解决方案。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-问题描述">1. 问题描述<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#1-%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0" class="hash-link" aria-label="1. 问题描述的直接链接" title="1. 问题描��述的直接链接">​</a></h2>
<p>在我们使用UniApp开发的安卓App中集成支付宝支付功能时，按照官方文档配置了参数，后端也返回了支付字符串，但在沙箱环境下总是遇到以下错误：</p>
<div class="language-json codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-json codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"errMsg"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"requestPayment:fail [payment支付宝:62009]未知错误"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"errCode"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">-100</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"code"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">-100</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>同时，支付宝APP上会弹出提示："商家订单参数异常，请重新发起付款。"</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-排查过程">2. 排查过程<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#2-%E6%8E%92%E6%9F%A5%E8%BF%87%E7%A8%8B" class="hash-link" aria-label="2. 排查过程的直接链接" title="2. 排查过程的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="21-检查unirequestpayment参数">2.1 检查uni.requestPayment参数<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#21-%E6%A3%80%E6%9F%A5unirequestpayment%E5%8F%82%E6%95%B0" class="hash-link" aria-label="2.1 检查uni.requestPayment参数的直接链接" title="2.1 检查uni.requestPayment参数的直接链接">​</a></h3>
<p>首先我查看了uni.requestPayment的调用参数，按照官方文档，支付宝支付只需要两个参数：</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">requestPayment</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">provider</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'alipay'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">orderInfo</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'orderInfo'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 后端返回的支付宝订单数据</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">success</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'success:'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">JSON</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">stringify</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">fail</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'fail:'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">JSON</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">stringify</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="22-验证支付字符串">2.2 验证支付字符串<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#22-%E9%AA%8C%E8%AF%81%E6%94%AF%E4%BB%98%E5%AD%97%E7%AC%A6%E4%B8%B2" class="hash-link" aria-label="2.2 验证支付字符串的直接链接" title="2.2 验证支付字符串的直接链接">​</a></h3>
<p>我怀疑是后端返回的orderInfo字符串有问题，于是进行了客户端调试：</p>
<ul>
<li>复制了后端返回的订单字符串</li>
<li>使用支付宝官方提供的工具验证签名</li>
<li>确认orderInfo内容格式无误</li>
</ul>
<p>甚至在正式环境中，使用相同的调用方式和类似的参数是可以正常支付的。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-解决方案揭秘">3. 解决方案揭秘<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#3-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E6%8F%AD%E7%A7%98" class="hash-link" aria-label="3. 解决方案揭秘的直接链接" title="3. 解决方案揭秘的直接链接">​</a></h2>
<p>经过反复测试和查阅资料，我终于发现了问题所在：<strong>在支付宝沙箱环境中，我们需要特别设置SDK的环境变量！</strong></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="31-关键代码">3.1 关键代码<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#31-%E5%85%B3%E9%94%AE%E4%BB%A3%E7%A0%81" class="hash-link" aria-label="3.1 关键代码的直接链接" title="3.1 关键代码的直接链接">​</a></h3>
<p>在调用支付前，需要添加以下关键代码：</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 导入支付宝SDK的环境工具类</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">var</span><span class="token plain"> </span><span class="token maybe-class-name">EnvUtils</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> plus</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">android</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">importClass</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'com.alipay.sdk.app.EnvUtils'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置为沙箱环境</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setEnv</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">EnvEnum</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">SANDBOX</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>就是这短短两行代码，解决了困扰许久的问题！</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="32-完整的实现方案">3.2 完整的实现方案<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#32-%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88" class="hash-link" aria-label="3.2 完整的实现方案的直接链接" title="3.2 完整的实现方案的直接链接">​</a></h3>
<p>下面是一个更完整、更健壮的支付宝支付方法实现：</p>
<div class="language-typescript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-typescript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)">/**</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> * 启动支付宝支付流程</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> * </span><span class="token doc-comment comment keyword" style="color:hsl(301, 63%, 40%)">@param</span><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> </span><span class="token doc-comment comment parameter" style="color:hsl(230, 4%, 64%)">payOrderInfo</span><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> 支付字符串</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> * </span><span class="token doc-comment comment keyword" style="color:hsl(301, 63%, 40%)">@param</span><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> </span><span class="token doc-comment comment parameter" style="color:hsl(230, 4%, 64%)">isSandbox</span><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> 是否沙箱环境</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> * </span><span class="token doc-comment comment keyword" style="color:hsl(301, 63%, 40%)">@param</span><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> </span><span class="token doc-comment comment parameter" style="color:hsl(230, 4%, 64%)">callbacks</span><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> 回调函数集合</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doc-comment comment" style="color:hsl(230, 4%, 64%)"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">startAlipayPayment</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  payOrderInfo</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">string</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  isSandbox</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">boolean</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  callbacks</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    onSuccess</span><span class="token operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">result</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">any</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">void</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    onFail</span><span class="token operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">error</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">any</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">void</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">void</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> onSuccess</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> onFail </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> callbacks</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'最终支付字符串:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> payOrderInfo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'环境类型:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> isSandbox </span><span class="token operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付宝沙箱环境'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付宝正式环境'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// #ifdef APP-PLUS</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如果是沙箱环境，需要配置支付宝SDK的环境变量</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">isSandbox</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'配置支付宝SDK为沙箱环境'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 导入支付宝SDK的环境工具类</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// @ts-ignore</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">var</span><span class="token plain"> EnvUtils </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> plus</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">android</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">importClass</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'com.alipay.sdk.app.EnvUtils'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置为沙箱环境</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// @ts-ignore</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">setEnv</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">EnvEnum</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">SANDBOX</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付宝SDK环境配置成功'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'配置支付宝SDK环境失败:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// #endif</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 调用支付</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">requestPayment</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    provider</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'alipay'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    orderInfo</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> payOrderInfo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">success</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">onSuccess</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">onSuccess</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">fail</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">onFail</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">onFail</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如果是取消支付，不尝试二次支付</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">errMsg</span><span class="token operator" style="color:hsl(221, 87%, 60%)">?.</span><span class="token function" style="color:hsl(221, 87%, 60%)">includes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'62001'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 尝试使用另一种方法重新唤起支付</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如果传统方法失败，尝试提前解码再传递</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> decodedOrderInfo </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">decodeURIComponent</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">payOrderInfo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'解码后重试支付字符串:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> decodedOrderInfo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// #ifdef APP-PLUS</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 二次尝试前重新配置沙箱环境</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">isSandbox</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// @ts-ignore</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">var</span><span class="token plain"> EnvUtils </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> plus</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">android</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">importClass</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'com.alipay.sdk.app.EnvUtils'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// @ts-ignore</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">setEnv</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">EnvEnum</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">SANDBOX</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'二次尝试配置沙箱环境失败:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// #endif</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">requestPayment</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            provider</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'alipay'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            orderInfo</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> decodedOrderInfo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">success</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'二次尝试支付成功:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">onSuccess</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">onSuccess</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">fail</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'二次尝试也失败:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 这里不再调用失败回调，因为第一次失败已经调用了</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="4-工作原理解析">4. 工作原理解析<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#4-%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90" class="hash-link" aria-label="4. 工作原理解析的直接链接" title="4. 工作原理解析的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="41-为什么需要设置环境变量">4.1 为什么需要设置环境变量?<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#41-%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E8%AE%BE%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F" class="hash-link" aria-label="4.1 为什么需要设置环境变量?的直接链接" title="4.1 为什么需要设置环境变量?的直接链接">​</a></h3>
<p>支付宝SDK默认连接正式环境的服务器，而沙箱环境需要连接到不同的服务器地址。通过<code>EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX)</code>这行代码，我们告诉SDK使用沙箱环境的服务器地址。</p>
<p>如果不设置这个环境变量，即使你的订单参数是沙箱环境的，SDK仍然会尝试连接正式环境服务器，导致"商家订单参数异常"的错误。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="42-二次尝试机制">4.2 二次尝试机制<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#42-%E4%BA%8C%E6%AC%A1%E5%B0%9D%E8%AF%95%E6%9C%BA%E5%88%B6" class="hash-link" aria-label="4.2 二次尝试机制的直接链接" title="4.2 二次尝试机制的直接链接">​</a></h3>
<p>代码中还实现了一个二次尝试机制：</p>
<ol>
<li>如果第一次支付失败（且不是用户取消）</li>
<li>对订单字符串进行解码处理</li>
<li>重新配置沙箱环境</li>
<li>再次尝试支付</li>
</ol>
<p>这是因为有时候后端返回的订单字符串可能已经被URL编码，而支付宝SDK在某些情况下需要原始字符串。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="5-使用方法">5. 使用方法<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#5-%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" class="hash-link" aria-label="5. 使用方法的直接链接" title="5. 使用方法的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="51-简单调用示例">5.1 简单调用示例<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#51-%E7%AE%80%E5%8D%95%E8%B0%83%E7%94%A8%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="5.1 简单调用示例的直接链接" title="5.1 简单调用示例的直接链接">​</a></h3>
<div class="language-typescript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-typescript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 引入支付工具类</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> PaymentUtil </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'@/utils/payment'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 调用支付方法</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">PaymentUtil</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">startAlipayPayment</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  orderInfoFromBackend</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 后端返回的支付宝订单字符串</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置为沙箱环境</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">onSuccess</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付成功'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> result</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">showToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> title</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付成功'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">onFail</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token builtin" style="color:hsl(119, 34%, 47%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付失败'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">showToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> title</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'支付失败'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'none'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="52-注意事项">5.2 注意事项<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#52-%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="5.2 注意事项的直接链接" title="5.2 注意事项的直接链接">​</a></h3>
<ul>
<li>该解决方案仅适用于App端（安卓），不适用于H5或小程序支付</li>
<li>在发布正式版本时，记得根据环境设置<code>isSandbox</code>参数</li>
<li>沙箱账号只能在沙箱环境使用，正式账号只能在正式环境使用</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="6-常见问题解答">6. 常见问题解答<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#6-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94" class="hash-link" aria-label="6. 常见问题解答的直接链接" title="6. 常见问题解答的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-设置了环境变量还是报错怎么办">Q: 设置了环境变量还是报错怎么办？<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#q-%E8%AE%BE%E7%BD%AE%E4%BA%86%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E8%BF%98%E6%98%AF%E6%8A%A5%E9%94%99%E6%80%8E%E4%B9%88%E5%8A%9E" class="hash-link" aria-label="Q: 设置了环境变量还是报错怎么办？的直接链接" title="Q: 设置了环境变量还是报错怎么办？的直接链接">​</a></h3>
<p>A: 检查你的支付宝SDK版本是否最新，有些旧版本的SDK可能不支持沙箱环境设置。另外，确认后端返回的订单字符串确实是沙箱环境生成的。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-沙箱环境测试通过但正式环境还是有问题">Q: 沙箱环境测试通过，但正式环境还是有问题？<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#q-%E6%B2%99%E7%AE%B1%E7%8E%AF%E5%A2%83%E6%B5%8B%E8%AF%95%E9%80%9A%E8%BF%87%E4%BD%86%E6%AD%A3%E5%BC%8F%E7%8E%AF%E5%A2%83%E8%BF%98%E6%98%AF%E6%9C%89%E9%97%AE%E9%A2%98" class="hash-link" aria-label="Q: 沙箱环境测试通过，但正式环境还是有问题？的直接链接" title="Q: 沙箱环境测试通过，但正式环境还是有问题？的直接链接">​</a></h3>
<p>A: 记得在切换到正式环境时，将<code>isSandbox</code>参数设置为<code>false</code>，并使用正式的支付宝应用。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-如何判断是否是沙箱环境">Q: 如何判断是否是沙箱环境？<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#q-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF%E6%B2%99%E7%AE%B1%E7%8E%AF%E5%A2%83" class="hash-link" aria-label="Q: 如何判断是否是沙箱环境？的直接链接" title="Q: 如何判断是否是沙箱环境？的直接链接">​</a></h3>
<p>A: 可以根据环境变量或API地址判断，例如：</p>
<div class="language-typescript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-typescript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> isSandbox </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> process</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">env</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">NODE_ENV</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">!==</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'production'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="q-如何获取沙箱环境的测试账号">Q: 如何获取沙箱环境的测试账号？<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#q-%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E6%B2%99%E7%AE%B1%E7%8E%AF%E5%A2%83%E7%9A%84%E6%B5%8B%E8%AF%95%E8%B4%A6%E5%8F%B7" class="hash-link" aria-label="Q: 如何获取沙箱环境的测试账号？的直接链接" title="Q: 如何获取沙箱环境的测试账号？的直接链接">​</a></h3>
<p>A: 登录支付宝开放平台，在"沙箱环境"中可以查看和管理沙箱账号。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="7-总结">7. 总结<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#7-%E6%80%BB%E7%BB%93" class="hash-link" aria-label="7. 总结的直接链接" title="7. 总结的直接链接">​</a></h2>
<p>在UniApp中集成支付宝沙箱支付时，除了常规的参数配置外，还需要特别注意设置SDK的环境变量。这个看似简单的步骤却很容易被忽略，希望这篇文章能够帮助到遇到类似问题的开发者。</p>
<p>记住关键代码：</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">var</span><span class="token plain"> </span><span class="token maybe-class-name">EnvUtils</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> plus</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">android</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">importClass</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'com.alipay.sdk.app.EnvUtils'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setEnv</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">EnvUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">EnvEnum</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">SANDBOX</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>有了这个，相信你的支付宝沙箱测试将会一帆风顺！</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="8-参考资源">8. 参考资源<a href="https://bianliangrensheng.cn/blog/uniapp-alipay-sandbox-payment-solution#8-%E5%8F%82%E8%80%83%E8%B5%84%E6%BA%90" class="hash-link" aria-label="8. 参考资源的直接链接" title="8. 参考资源的直接链接">​</a></h2>
<ul>
<li><a href="https://uniapp.dcloud.net.cn/api/plugins/payment.html" target="_blank" rel="noopener noreferrer" class="link">UniApp官方文档-App支付</a></li>
<li><a href="https://opendocs.alipay.com/open/200/105311" target="_blank" rel="noopener noreferrer" class="link">支付宝开发文档-沙箱环境</a></li>
<li><a href="https://opendocs.alipay.com/open/54/104509" target="_blank" rel="noopener noreferrer" class="link">支付宝SDK文档</a></li>
<li><a href="https://ask.dcloud.net.cn/article/71237" target="_blank" rel="noopener noreferrer" class="link">UniApp支付相关问题汇总</a></li>
</ul>]]></content:encoded>
            <category>UniApp</category>
            <category>支付宝支付</category>
            <category>沙箱环境</category>
            <category>App开发</category>
            <category>支付集成</category>
        </item>
        <item>
            <title><![CDATA[科学高效的体重管理：轻卡记让健康生活更简单]]></title>
            <link>https://bianliangrensheng.cn/blog/weight-management-apps</link>
            <guid>https://bianliangrensheng.cn/blog/weight-management-apps</guid>
            <pubDate>Tue, 01 Jul 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[作为健康生活的践行者，我将分享自己使用和体验过的体重管理软件。特别是"轻卡记"这款应用如何帮助我建立科学饮食习惯，实现健康体重管理目标。]]></description>
            <content:encoded><![CDATA[<p>当下市场上有不少体重管理软件，但如果你想真正实现科学健康的体重管理，我强烈推荐"轻卡记"这款应用。作为一名注重健康的现代人，我尝试过多款同类应用后发现，轻卡记不仅仅是简单的卡路里计算器，它是真正能帮助实现科学健康体重管理的全能工具。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="为什么需要专业的体重管理软件">为什么需要专业的体重管理软件？<a href="https://bianliangrensheng.cn/blog/weight-management-apps#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E4%B8%93%E4%B8%9A%E7%9A%84%E4%BD%93%E9%87%8D%E7%AE%A1%E7%90%86%E8%BD%AF%E4%BB%B6" class="hash-link" aria-label="为什么需要专业的体重管理软件？的直接链接" title="为什么需要专业的体重管理软件？的直接链接">​</a></h2>
<p>没有科学指导的体重管理往往会带来一系列问题。很多人盲目减重导致营养不均衡、体重频繁反弹、肌肉流失而非脂肪减少，甚至免疫力下降和心理压力增加。我自己之前也走过不少弯路，直到使用专业软件才真正理解科学管理体重的重要性。</p>
<p>通过使用"轻卡记"这款专业的体重管理软件，我的生活发生了明显改变。营养更加均衡让我精力充沛，合理控制热量帮我维持了肌肉量，改善的饮食结构甚至提高了我的睡眠质量。最重要的是，我建立了健康的饮食习惯，不再为体重问题感到焦虑。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="轻卡记的核心功能">轻卡记的核心功能<a href="https://bianliangrensheng.cn/blog/weight-management-apps#%E8%BD%BB%E5%8D%A1%E8%AE%B0%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="轻卡记的核心功能的直接链接" title="轻卡记的核心功能的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="智能食物识别功能">智能食物识别功能<a href="https://bianliangrensheng.cn/blog/weight-management-apps#%E6%99%BA%E8%83%BD%E9%A3%9F%E7%89%A9%E8%AF%86%E5%88%AB%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="智能食物识别功能的直接链接" title="智能食物识别功能的直接链接">​</a></h3>
<p>"轻卡记"最让我惊艳的是它的智能食物识别功能。只需拍摄食物照片，AI就能在3秒内快速识别食物种类并自动计算热量和营养成分。这完全解决了手动记录的繁琐问题！我经常一拍就能识别出多种食物，再也不用一项项查询输入了。对于经常吃的食物，还可以复制曾经吃过的食物，减少手工录入的繁琐，真的非常方便。</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/qingka-app-recognize.png" alt="智能食物识别功能截图" class="img_LIWi"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="数据可视化报告">数据可视化报告<a href="https://bianliangrensheng.cn/blog/weight-management-apps#%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96%E6%8A%A5%E5%91%8A" class="hash-link" aria-label="数据可视化报告的直接链接" title="数据可视化报告的直接链接">​</a></h3>
<p>数据可视化也是我每天都会查看的功能。应用提供详细的热量摄入与消耗对比、三大营养素比例分析。长期使用后，我可以清晰看到自己的体重变化曲线、饮食习惯评分和营养均衡情况。这些直观的数据让我对自己的饮食状况有了全面了解，知道该如何调整才更健康。</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/qingka-meal-details.png" alt="数据可视化报告截图" class="img_LIWi"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="vip个性化饮食推荐">VIP个性化饮食推荐<a href="https://bianliangrensheng.cn/blog/weight-management-apps#vip%E4%B8%AA%E6%80%A7%E5%8C%96%E9%A5%AE%E9%A3%9F%E6%8E%A8%E8%8D%90" class="hash-link" aria-label="VIP个性化饮食推荐的直接链接" title="VIP个性化饮食推荐的直接链接">​</a></h3>
<p>升级到VIP后，个性化饮食推荐成为我的"私人营养师"。根据我设定的减脂目标，软件会推荐适合的餐单，每个推荐餐点都包含详细的热量、营养成分、食材清单和烹饪指南。5000多个健康食谱让我的饮食不再单调。</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/qingka-app-recommend.png" alt="VIP个性化饮食推荐截图" class="img_LIWi"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="ai营养顾问服务">AI营养顾问服务<a href="https://bianliangrensheng.cn/blog/weight-management-apps#ai%E8%90%A5%E5%85%BB%E9%A1%BE%E9%97%AE%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="AI营养顾问服务的直接链接" title="AI营养顾问服务的直接链接">​</a></h3>
<p>最让我感到贴心的是AI营养顾问服务。无论何时何地，我都可以向它咨询饮食相关问题，获得个性化的营养建议。从饮食计划调整到特殊饮食需求指导，从营养知识普及到饮食误区纠正，就像随身携带一位专业营养师。外出就餐时它会推荐健康菜品，遇到食物替代需求时它会给出替代方案，特殊节日也有控制热量的小技巧，甚至在减重停滞期还会提供突破瓶颈的专业方案。</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/qingka-ai.png" alt="AI营养顾问服务截图" class="img_LIWi"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="使用技巧分享">使用技巧分享<a href="https://bianliangrensheng.cn/blog/weight-management-apps#%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7%E5%88%86%E4%BA%AB" class="hash-link" aria-label="使用技巧分享的直接链接" title="使用技巧分享的直接链接">​</a></h2>
<p>使用"轻卡记"这么久，我发现要想达到最佳效果，坚持每天记录是关键。定期查看数据报告可以及时调整饮食策略，结合运动效果会更加显著。不过要避免过度限制某类食物，这样反而不利于长期坚持。</p>
<p>我个人的进阶使用方法是将轻卡记与运动记录结合使用，设定合理的周目标而非苛刻的日目标。利用提醒功能帮助养成记录习惯，参与社区挑战增强动力也很有效。通过长期数据分析，我发现了自己的饮食模式，识别出导致体重波动的关键食物，优化了进食时间，还调整了营养素比例，这些都是数据带给我的宝贵见解。</p>
<p>很多人担心记录饮食会很麻烦，但有了AI识别功能，拍照3秒就能完成记录，比手动输入快多了。我还会批量复制常吃食物，一次设置就能长期使用。</p>
<p>至于如何保持记录动力，我的经验是设定阶段性目标，关注进步而非完美。邀请朋友共同使用形成互相监督，完成目标后给自己一些小奖励也能增强坚持的动力。</p>
<p>"轻卡记"作为一款专业的体重管理工具，真正优势在于它的智能化和便捷性。AI智能识别极大提高了记录效率，数据可视化让我清晰掌握饮食状况，个性化建议科学指导减重增肌，AI营养师随时解答专业问题。如果你正在寻找一款既科学又便捷的体重管理工具，强烈推荐尝试"轻卡记"！它不仅能帮你记录每日饮食，还能成为你健康生活的智能助手！</p>
<p>现在使用，即可体验这些强大功能，开启你的健康管理之旅！如果你有任何体重管理的经验或问题，也欢迎在评论区分享交流！</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/qingka-miniprogram-code.jpg" alt="轻卡记小程序二维码" class="img_LIWi"></p>]]></content:encoded>
            <category>生活方式</category>
            <category>健康管理</category>
            <category>饮食控制</category>
        </item>
        <item>
            <title><![CDATA[轻卡记会员服务协议]]></title>
            <link>https://bianliangrensheng.cn/blog/qingkaji-vip-policy</link>
            <guid>https://bianliangrensheng.cn/blog/qingkaji-vip-policy</guid>
            <pubDate>Sat, 17 May 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[轻卡记会员服务协议详细说明了您成为轻卡记会员后所享有的权益和义务，以及会员服务的使用规则和注意事项]]></description>
            <content:encoded><![CDATA[<p>版本发布日期：2025年04月17日<br>
<!-- -->版本生效日期：2025年04月17日</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="会员服务协议">会员服务协议<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E4%BC%9A%E5%91%98%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE" class="hash-link" aria-label="会员服务协议的直接链接" title="会员服务协议的直接链接">​</a></h2>
<p>请认真阅读并理解以下内容，其中以加粗方式显著标识的文字，请着重阅读、慎重考虑。</p>
<p>本协议是您（以下或称"用户"）与轻卡记App（以下简称"轻卡记"）的运营者吉首极客软件开发工作室（下称"我们"或"公司"）之间就轻卡记会员所订立的契约。请您仔细阅读本协议，您点击"同意并继续"按钮后，本协议即构成对双方有约束力的法律文件。</p>
<p>本协议是基于《用户协议》以及《轻卡记隐私政策》等相关协议规范制定，是其不可分割的一部分；本协议如与前述协议发生冲突的，以本协议为准。已有的和未来不时发布的与会员服务相关的协议、各类公告、页面说明和规范流程、问题解答等内容均构成本协议的一部分，与本协议具有同等法律效力。我们与会员均应受本协议以及《用户协议》以及《轻卡记隐私政策》的约束。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第1条-相关定义">第1条 相关定义<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC1%E6%9D%A1-%E7%9B%B8%E5%85%B3%E5%AE%9A%E4%B9%89" class="hash-link" aria-label="第1条 相关定义的直接链接" title="第1条 相关定义的直接链接">​</a></h2>
<p>本协议的会员采用订阅制模式，包含普通会员和高级会员两种类型：</p>
<p>普通会员指在轻卡记App完成注册并在轻卡记绑定手机号的用户，可免费使用基础功能。</p>
<p>高级会员是指在轻卡记App完成注册并在轻卡记绑定手机号的同时/之后，通过支付订阅费用或兑换码等方式订阅会员服务，在订阅期内持续享受会员专属增值功能与服务的用户（具体以会员中心展示的权益内容为准）。高级会员订阅可按月、季度或年度等不同周期进行付费，订阅期满后若未续订，相关会员权益将自动失效。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第2条-本站服务条款的确认和接纳">第2条 本站服务条款的确认和接纳<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC2%E6%9D%A1-%E6%9C%AC%E7%AB%99%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE%E7%9A%84%E7%A1%AE%E8%AE%A4%E5%92%8C%E6%8E%A5%E7%BA%B3" class="hash-link" aria-label="第2条 本站服务条款的确认和接纳的直接链接" title="第2条 本站服务条款的确认和接纳的直接链接">​</a></h2>
<p>2.1 本站所提供的高级会员活动的所有权和运作权归轻卡记所有。</p>
<p>请您理解，轻卡记App仅面向18周岁以上的成年人提供服务，如您未满18周岁，您将无法使用轻卡记App及相关服务。</p>
<p>2.3 <strong>用户点击同意本协议的，即视为用户确认自已同意接受会员相关服务的条款，且同意按本协议内容履行，如产生用户相关责任的，同意承担相应法律责任。</strong></p>
<p>2.4 轻卡记保留在中华人民共和国大陆地区法施行之法律允许的范围内独自决定拒绝服务、关闭用户账户、清除或编辑内容等相关权利。</p>
<p>2.5 <strong>会员开通后，会员权益仅限本人使用，不可转赠他人，如因账号问题需要迁移权益，需注销后方可迁移到新账号。</strong></p>
<p>2.6 我们在为会员提供多项专属特权和增值服务时，可能会获取会员的部分信息，我们深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控（详情请见《轻卡记隐私政策》）。</p>
<p>如您继续开通会员服务将视为您理解并同意接受本协议及《轻卡记隐私政策》的全部约定内容。</p>
<p>2.7 如您是高级会员且开通自动续费服务（具体请见《轻卡记自动续费服务协议》），即视为您与我们已达成协议并同意接受本协议及《自动续费服务协议》的全部约定内容，并依照执行。如您不希望自动扣款，则您应在我们收取高级会员会费前指定时间内自行取消相关服务。</p>
<p>2.8 <strong>请您知悉并同意：轻卡记高级会员服务属于虚拟商品，是一项特殊的服务，一旦开通不支持7天无理由退货。在已开通的高级会员服务有效期内，若您中途主动取消或终止会员资格的，将不会获得高级会员开通费用的退还，公司存在过错的情况除外。请您务必仔细阅读并慎重考量后再予开通。</strong></p>
<p>如您购买高级会员后需开具发票，可联系在线客服处理。</p>
<p>2.9 高级会员服务为有偿服务，相关资费以开通页面公示为准。若您选择开通轻卡记高级会员，则您的高级会员在开通成功后立即生效，高级会员服务周期自成功开通之日起算。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第3条-会员权益">第3条 会员权益<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC3%E6%9D%A1-%E4%BC%9A%E5%91%98%E6%9D%83%E7%9B%8A" class="hash-link" aria-label="第3条 会员权益的直接链接" title="第3条 会员权益的直接链接">​</a></h2>
<p>您成为会员后，可享受多项会员服务，具体以会员页面展示的权益内容为准。为更好的向会员提供服务，公司会基于业务发展需要不时对会员权益内容进行调整，相关变动或调整将公布在会员页面上，请予以关注。若您选择继续使用本服务，表示您同意更新后的内容。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第4条-会员使用注意事项">第4条 会员使用注意事项<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC4%E6%9D%A1-%E4%BC%9A%E5%91%98%E4%BD%BF%E7%94%A8%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="第4条 会员使用注意事项的直接链接" title="第4条 会员使用注意事项的直接链接">​</a></h2>
<p>4.1 如您的会员注册资料如有变动的，应及时更新注册资料。如果会员提供的注册资料不合法、不真实、不准确、不详尽，则需承担因此引起的相应责任及后果。</p>
<p>4.2 会员服务开通后，用户应谨慎合理的保存、使用其用户名和密码，不得将在轻卡记注册获得的账户借给他人使用，否则应承担由此产生的全部责任，同时公司在该种情况下有权做出独立判断，可采取暂停或关闭用户参与资格等措施。</p>
<p>4.3 <strong>会员用户同意，其应合理使用其享有的会员权益，除为实现用户自身的会员利益外，不得利用其享有的权益非法获利，不得以任何形式售卖其所享有的权益，不得滥用其所享有的权益，如因用户不当行为致我们合理怀疑的或判定的，我们有权暂停或关闭用户该活动的权益，此外，用户需承担因此引起的相应责任及后果。</strong></p>
<p>4.4 为方便您使用会员服务，您同意并授权我们将您在账户注册/激活、使用会员服务过程中提供、形成的信息传递给向您提供其他服务的关联公司，或从提供其他服务的关联公司处获取您在注册/激活、使用其他服务期间提供、形成的信息。您可以通过阅读《轻卡记隐私政策》了解个人信息收集、处理相关的详细规则。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第5条-协议更新及用户关注义务">第5条 协议更新及用户关注义务<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC5%E6%9D%A1-%E5%8D%8F%E8%AE%AE%E6%9B%B4%E6%96%B0%E5%8F%8A%E7%94%A8%E6%88%B7%E5%85%B3%E6%B3%A8%E4%B9%89%E5%8A%A1" class="hash-link" aria-label="第5条 协议更新及用户关注义务的直接链接" title="第5条 协议更新及用户关注义务的直接链接">​</a></h2>
<p>根据国家法律法规变化及运营需要，我们有权以公告的方式进行不定期地制定、修改本协议及/或相关服务规则，暂停、取消和修改本协议条款。修改后的协议一旦被公告后立即生效，并代替原来的协议。用户应及时关注不时发布的各项服务规则及本协议的变更。若不同意相关规则及条款修改的，应及时终止与轻卡记的协议。如用户继续使用我们提供的服务的，即视为同意更新后的协议。我们建议您在使用之前阅读本协议及轻卡记的公告。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第6条-法律管辖和适用">第6条 法律管辖和适用<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC6%E6%9D%A1-%E6%B3%95%E5%BE%8B%E7%AE%A1%E8%BE%96%E5%92%8C%E9%80%82%E7%94%A8" class="hash-link" aria-label="第6条 法律管辖和适用的直接链接" title="第6条 法律管辖和适用的直接链接">​</a></h2>
<p>本协议的订立、执行和解释及争议的解决均应适用在中华人民共和国大陆地区适用之有效法律（但不包括其冲突法规则）。如发生本协议与适用之法律相抵触时，则这些条款将完全按法律规定重新解释，而其它有效条款继续有效。如缔约方就本协议内容或其执行发生任何争议，双方应尽力友好协商解决；协商不成时，任何一方均可向吉首极客软件开发工作室所在地人民法院提起诉讼。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第7条-其他">第7条 其他<a href="https://bianliangrensheng.cn/blog/qingkaji-vip-policy#%E7%AC%AC7%E6%9D%A1-%E5%85%B6%E4%BB%96" class="hash-link" aria-label="第7条 其他的直接链接" title="第7条 其他的直接链接">​</a></h2>
<p>7.1 如因不可抗力或其它轻卡记无法控制的原因使轻卡记所涉活动服务无法及时提供或无法按本协议进行的，轻卡记会合理地尽力协助处理善后事宜。</p>
<p>7.2 用户除遵守本会员服务协议外，仍应同时遵守《轻卡记用户协议》。</p>
<p>7.3 本协议内容中以黑体、加粗、下划线、斜体等方式显著标识的条款，请用户着重阅读。</p>]]></content:encoded>
            <category>会员协议</category>
            <category>健康管理</category>
            <category>会员服务</category>
        </item>
        <item>
            <title><![CDATA[轻卡记隐私协议]]></title>
            <link>https://bianliangrensheng.cn/blog/qingkaji-privacy-policy</link>
            <guid>https://bianliangrensheng.cn/blog/qingkaji-privacy-policy</guid>
            <pubDate>Fri, 16 May 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[轻卡记隐私协议详细说明了我们如何收集、使用、存储和保护您的个人信息，以及您对个人信息的控制权限]]></description>
            <content:encoded><![CDATA[<p>版本发布日期：2025年04月16日<br>
<!-- -->版本生效日期：2025年04月16日</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="提示条款"><strong>提示条款</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E6%8F%90%E7%A4%BA%E6%9D%A1%E6%AC%BE" class="hash-link" aria-label="提示条款的直接链接" title="提示条款的直接链接">​</a></h2>
<p>您的信任对我们非常重要，我们深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最小必要原则、确保安全原则、主体参与原则、公开透明原则等。同时，我们承诺，我们将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。鉴于此，【轻卡记】服务提供者（以下简称"我们"）制定本《轻卡记隐私协议》（下称"本协议/本隐私协议"）并提醒您：</p>
<p><strong>本协议适用于我们提供的所有功能或服务。如我们及关联公司（范围详见定义部分）的功能或服务中使用了轻卡记提供的功能或服务（例如使用轻卡记账户登录）但未设独立隐私协议的，则本协议同样适用于该部分功能或服务。我们及关联公司就其向您提供的功能或服务单独设立有隐私协议的，则相应功能或服务适用相应隐私协议。</strong></p>
<p><strong>请您在使用轻卡记的各项功能或服务前，仔细阅读并透彻理解本协议，特别是以粗体/下划线标识的条款，请您务必重点阅读，在确认充分理解并同意后再开始使用。如对本协议内容有任何疑问、意见或建议，您可通过本隐私协议"如何联系我们"中提供的方式与我们联系。</strong></p>
<p><strong>请您注意，本协议不适用于您通过我们的产品/服务而接入的其他第三方产品/服务("其他第三方"，包括您的交易相对方、任何第三方网站以及第三方服务提供者等)，具体规定请参照该第三方的隐私协议或类似声明。</strong></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第一部分-定义"><strong>第一部分 定义</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E7%AC%AC%E4%B8%80%E9%83%A8%E5%88%86-%E5%AE%9A%E4%B9%89" class="hash-link" aria-label="第一部分-定义的直接链接" title="第一部分-定义的直接链接">​</a></h2>
<p>轻卡记平台：指吉首极客软件开发工作室提供的互联网信息及软件技术产品和服务，包括轻卡记APP、轻卡记微信小程序以及随技术发展出现的新形态向您提供的各项产品和服务。</p>
<p>用户：指所有直接或间接获取和使用轻卡记平台的使用者，包括自然人、法人或其他组织等。在本隐私协议中称为"用户"或称"您"。</p>
<p>服务提供者：指轻卡记平台的互联网信息及软件技术服务提供者。本产品的服务提供者为吉首极客软件开发工作室。</p>
<p>关联公司：指吉首极客软件开发工作室直接或间接控股或投资的公司。</p>
<p>轻卡记：指吉首极客软件开发工作室开发并运营的产品——轻卡记App。</p>
<p>轻卡记子产品：指除轻卡记APP外的其他轻卡记平台。</p>
<p>轻卡记账户：是指您创建的轻卡记及子产品的账户。</p>
<p>个人信息：指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。</p>
<p>个人敏感信息：指包括身份证件号码、个人生物识别信息、银行账号、财产信息、行踪轨迹、健康生理信息、交易信息、14岁以下（含）儿童信息等的个人信息（我们将在本隐私协议中对具体个人敏感信息以下划线进行显著标识）。</p>
<p>基本信息：包含性别、年龄/出生年月日、身高、体重、孕产情况/特殊阶段、健康问题/特殊情况。</p>
<p>个人信息删除：指在实现日常业务功能所涉及的系统中去除个人信息的行为，使其保持不可被检索、访问的状态。</p>
<p>个人信息匿名化：指提供对个人信息的技术处理，使得个人信息主体无法被识别或关联，且处理后的信息不能被复原的过程。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="第二部分-隐私协议"><strong>第二部分 隐私协议</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86-%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE" class="hash-link" aria-label="第二部分-隐私协议的直接链接" title="第二部分-隐私协议的直接链接">​</a></h2>
<p>本隐私协议部分将帮助您了解以下内容：</p>
<p>一、我们如何收集和使用您的个人信息<br>
<!-- -->二、我们如何共享、转让、公开披露您的个人信息<br>
<!-- -->三、我们如何存储您的个人信息<br>
<!-- -->四、我们如何保护您的个人信息<br>
<!-- -->五、您的权利<br>
<!-- -->六、第三方产品/服务提供者<br>
<!-- -->七、我们如何使用 Cookie 和同类技术<br>
<!-- -->八、我们如何处理未成年人的个人信息<br>
<!-- -->九、您的个人信息如何在全球范围转移<br>
<!-- -->十、本隐私协议如何更新<br>
<!-- -->十一、如何联系我们</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一我们如何收集和使用您的个人信息"><strong>一、我们如何收集和使用您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%80%E6%88%91%E4%BB%AC%E5%A6%82%E4%BD%95%E6%94%B6%E9%9B%86%E5%92%8C%E4%BD%BF%E7%94%A8%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="一我们如何收集和使用您的个人信息的直接链接" title="一我们如何收集和使用您的个人信息的直接链接">​</a></h2>
<p>在您使用我们的产品及/或服务时，我们需要/可能需要收集和使用的您的个人信息的场景包括：</p>
<p>（1）为了向您提供我们产品/服务的基本功能，您须授权我们收集、使用的必要的信息。如您拒绝提供相应信息，您将无法正常使用我们的产品及/或服务；</p>
<p>（2）为了向您提供我们产品及/或服务的拓展功能，您可选择授权我们收集、使用的信息。如您拒绝提供，您将无法正常使用相关拓展功能或无法达到我们拟达到的功能效果，但并不会影响您正常使用我们产品及/或服务的基本功能。</p>
<p><strong>您理解并同意：</strong></p>
<p><strong>1、我们致力于打造多样的产品和服务以满足您的需求。因我们向您提供的产品和服务种类众多，且不同用户选择使用的具体产品/服务范围存在差异，相应的，不同功能收集使用的个人信息类型、范围等会有所区别，请以具体的产品/服务功能为准。</strong></p>
<p><strong>2、为给您带来更好的产品和服务体验，我们在持续努力改进我们的技术，随之我们可能会不时推出新的或优化后的功能，可能需要收集、使用新的个人信息或变更个人信息使用目的或方式。对此，我们将通过更新本协议、弹窗、页面提示、公告等方式另行向您说明对应信息的收集目的、范围及使用方式，并在征得您的同意后收集、使用。</strong></p>
<p><strong>我们提供服务时，会根据正当、合法、透明、最小必要的原则，基于本协议的目的，收集和使用您的个人信息。</strong></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一基本功能服务"><strong>（一）基本功能服务</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%80%E5%9F%BA%E6%9C%AC%E5%8A%9F%E8%83%BD%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="一基本功能服务的直接链接" title="一基本功能服务的直接链接">​</a></h3>
<p>我们提供的基本功能服务包括：食物热量分析、记录日常饮食与运动，我们需要收集您的设备信息，具体包括设备名称、设备型号、设备识别码（包含 IDFA、Android_ID、MAC、OAID、Advertising ID、Serial Number、UAID、ICCID、硬件序列号UUID、IDFA）、移动应用列表、操作系统和应用程序版本、语言设置、唯一设备标识符、运营商网络类型此类软硬件特征信息，下同。和网络信息。如您拒绝提供相应信息，您将无法正常使用我们的产品及/或服务。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二扩展功能服务"><strong>（二）扩展功能服务</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%8C%E6%89%A9%E5%B1%95%E5%8A%9F%E8%83%BD%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="二扩展功能服务的直接链接" title="二扩展功能服务的直接链接">​</a></h3>
<p>我们提供的扩展功能主要服务包括：注册及登录、创建个人档案、创建目标计划、使用健康评测、使用记录工具、商品/服务购买/支付、客户服务、广告服务，具体如下。为了向您提供更优质的产品和服务，在您使用扩展功能服务时，我们可能收集下述的信息。如您拒绝提供，您将无法正常使用相关扩展功能服务或无法达到我们拟达到的功能效果。</p>
<p><strong>1、账户注册及登录</strong></p>
<p>1.1、当您注册、登录轻卡记App时，您可以通过手机号码创建账号，并且您可以完善相关的个人资料（包括头像、昵称、密码），收集这些信息是为了帮助您完成注册、登录。如不提供前述信息，则无法完成通过手机号码注册、登录轻卡记账户。</p>
<p>如您未登录，则您无法使用轻卡记的拓展功能服务。</p>
<p><strong>2、创建个人档案</strong></p>
<p>2.1、创建个人档案</p>
<p>您需要通过填写新手测评完成您本人的健康档案创建，您需要提供您的基本信息。收集这类信息是为了给予您健康方案和健康建议。若您无法提供这类信息，您将无法创建个人档案，并无法正常使用记录工具及健康工具功能，但不影响您使用轻卡记的其他功能。</p>
<p><strong>3、使用健康测评</strong></p>
<p>在您使用健康测评功能时，您需要提供被测评人的性别、生日、身高、体重，并基于不同的评测，提供相应的信息（您可以通过测评页面，了解不同测评需要获取的信息，并决定是否提供相应信息完成测评）。收集这类信息是为了完成健康测评并向您提供更准确的测评结果和更到位的健康建议。若您无法提供测评所需要的信息，相关测评将无法进行，但不影响您使用轻卡记的其他功能。</p>
<p><strong>4、使用记录工具</strong></p>
<p>在您需要使用记录工具时，您可主动选择记录您的体重数据（若您选择连接体脂秤进行测量，还会上传体脂秤测算出的身体数据）、饮食数据、运动数据、睡眠数据、喝水数据、身体围度数据等。收集这些信息是为了便于您了解自己的身体变化情况，我们也会根据您记录的部分数据为您提供相关建议。若您不提供，则无法使用记录工具。</p>
<p><strong>5、搜索查询功能</strong></p>
<p>当您使用搜索查询功能时，我们会收集您主动输入的信息（包括您输入的文字信息、语音信息、语音转文字信息），收集这些信息是为了获取您要查询的内容并进行搜索。若您不提供前述信息，则无法使用搜索查询功能，但不影响您使用轻卡记的其他功能。</p>
<p><strong>6、客户服务</strong></p>
<p>6.1、当您联系我们的客服时，我们可能会收集您与我们的沟通记录（可能包括您与我们的线上沟通记录、电话录音、您的账户信息以及您为了证明相关事实而提供的图片/视频/文字信息及有关信息）以及您的联系方式，以便尽快为您解决问题和改进我们的产品与/或服务。为了您的账户与系统安全，我们可能需要您提供相关个人信息与您之前提供的个人信息相匹配以验证您的用户身份。如您不提供上述信息，我们的客服将无法为您提供前述服务，但不影响您使用我们提供的其他服务。</p>
<p>我们可能通过站内信及相关方式主动联系您进行沟通，必要时也可能直接使用您在注册时提供的手机号码以电话、短信的形式与您联系。</p>
<p><strong>8、账户安全和系统运行安全</strong></p>
<p>在您使用我们的服务过程中，为了了解产品适配性、保障您的账户安全与系统运行安全，判断您的账户风险，保障我们为您正常提供服务，统计、排查异常信息，我们会收集您使用的服务以及使用方式的相关信息，包括您在使用记录工具相关功能、发表评论或者参与活动、绑定及使用智能设备相关服务、进行个性化推荐时可能产生的相关信息。此类信息包括:</p>
<p>8.1、设备信息：我们会根据您在软件安装及使用中授予的具体权限，接收并记录您所使用的设备信息。设备信息包括设备名称、设备型号、设备识别码（包含 IDFA、Android_ID、MAC、OAID、Advertising ID、Serial Number、UAID、ICCID、硬件序列号UUID、IDFA）、移动应用列表、操作系统和应用程序版本、语言设置、唯一设备标识符、运营商网络类型此类软硬件特征信息。若您拒绝提供设备信息的，您可能无法正常使用我们的服务。</p>
<p>8.2、日志信息：设备或软件信息（包括您的移动设备、网页浏览器或用于接入我们服务的其他程序）所提供的配置信息、您的IP地址和移动设备所用的版本和设备识别码（包括IDFA、IDFV、 IMEI、AndroidID、OAID、IMSI、ICCID、GAID、MEID、 AAID、VAID）、在使用我们服务时搜索或浏览的信息（包括您使用的网页搜索词语，以及您在使用我们服务时浏览或要求提供的其他信息和内容详情）。</p>
<p><strong>9、广告服务</strong></p>
<p>为了向您提供更便捷、更符合您个性化需求的信息展示、搜索及推送服务，我们可能会通过电话、短信、站内信、资源位的方式，合理地向您发送和展示商业性服务/促销信息、平台最新的有关管理、商品内容及其他认为有必要告知注册用户的服务通知。我们努力保障您的浏览体验，如果您不想接受我们给您发送的商业广告，您可以通过短信提示回复退订或通过【我的】右上角的【设置】按钮在【消息设置】中进行关闭。</p>
<p>在部分广告服务中，为提升您使用服务的便捷性及趣味性，部分页面需要您摇晃、晃动您的移动设备浏览商业信息（如开屏广告中提示"摇一摇"等，具体以实际页面提示为准）。在此业务情形下，我们将收集并使用您的设备传感器信息，用以识别判断您的设备状态，以便为您提供前述服务。</p>
<p>为了向您提供更加优质的服务与用户体验，我们可能会将已收集的您的操作/使用记录（包括浏览、搜索、点击）、您主动提供的信息（评价、反馈），日志信息，IP地址，位置信息，设备信息（包括设备型号、操作系统版本、设备设置、设备环境、MAC地址、IDFA、OAID设备标识符、移动应用列表、电信运营商软硬件特征信息）进行关联并进行数据分析以形成用户画像，用来向您推荐您感兴趣的商品、内容、广告或服务。我们保证在未获得您的授权同意情况下，不会将您的画像信息提供给任何第三方向您推送个性化展示的广告信息。</p>
<p>如您未登录，我们将不会为您做个性化推荐。</p>
<p><strong>10、运动数据同步</strong></p>
<p>在充分告知第三方软件（包括苹果运动健康、华为运动健康）同步至轻卡记的身体数据和运动数据类型并获得您授权的前提下，我们将从第三方软件获取您在第三方软件中生成的身体数据和运动数据并同步至您的轻卡记账户。在您授权关联第三方软件的数据后，轻卡记将自动从相应第三方软件同步您的前述数据。收集这类信息是为了简化您的记录流程、更好的为您提供服务。</p>
<p>其中，可能从苹果健康同步的数据包括：步数、步行+跑步距离、活动能量、膳食能量、水、睡眠数据、体脂率、体重；可能从华为运动健康同步的数据包括：步数数据、热量数据、锻炼记录概要、体脂数据、睡眠数据，并可手动设置是否同步历史数据。</p>
<p>若您不同意数据关联的，可在【我的】-【设置】-【数据同步设置】中取消同步。当您取消同步后，我们将不再收集相关信息，也无法再为您提供与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的存储或处理。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三app获取的权限"><strong>（三）App获取的权限</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%89app%E8%8E%B7%E5%8F%96%E7%9A%84%E6%9D%83%E9%99%90" class="hash-link" aria-label="三app获取的权限的直接链接" title="三app获取的权限的直接链接">​</a></h3>
<p><strong>1、存储权限</strong></p>
<p>（1）READ_EXTERNAL_STORAGE（读取外置存储器）：在你上传图片、视频时，经过您的授权，我们的客户端会将您主动上传的视频、图片加密上传到服务器进行外置存储；可能会收集您设备中的软件名、版本号，通过加密上传到服务器进行处理、存储。</p>
<p>（2）WRITE_EXTERNAL_STORAGE（写入外置存储器）：在你下载图片、视频时，经过您的授权，我们将下载图片或者视频。</p>
<p>您也可以随时通过相关功能设置拒绝/取消该权限。拒绝提供该权限仅会使您无法使用上述功能，但不影响轻卡记其他功能与服务的正常使用；但当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的存储或处理。</p>
<p><strong>2、相册权限</strong></p>
<p>您在上传已有照片、视频时，可通过开启相册的权限进行操作，我们的客户端会将您主动上传的照片、视频加密上传到服务器进行存储。您也可以随时通过相关功能设置拒绝/取消该权限，拒绝提供该权限仅会使您无法使用上述功能，但不影响轻卡记其他功能与服务的正常使用。当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的存储或处理。</p>
<p><strong>3、相机权限</strong></p>
<p>您在扫码、拍摄上传照片及/或视频功能时，需要您授权开启设备的相机权限。如您拒绝提供权限和内容的，仅会使您无法使用该功能，但并不影响您正常使用轻卡记的其他功能。同时，您也可以随时通过相关功能设置取消该权限。当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理、存储。</p>
<p><strong>4、位置权限</strong></p>
<p>您在使用我们基于位置提供的相关服务（智能秤相关功能）时，需要您授权开启设备的位置权限。同时，您也可以随时通过相关功能设置取消该权限。当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理、存储。</p>
<p><strong>5、麦克风权限</strong></p>
<p>您在使用语音输入功能时，需要您授权开启您的麦克风权限。如您拒绝提供的，仅会使您无法使用该功能，但并不影响您正常使用轻卡记的其他功能。同时，您也可以随时通过相关功能设置取消该权限。但当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理、存储。</p>
<p><strong>6、网络权限</strong></p>
<p>您开通该权限后，轻卡记APP可以访问或获取WLAN和本地蜂窝网络，以保证您正常使用本软件。您也可以随时通过相关功能设置取消该权限。如您拒绝开通网络权限，将无法正常使用轻卡记平台，我们将不再收集相应信息，也无法再为您提供服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理。</p>
<p><strong>7、通知权限</strong></p>
<p>您开通该权限后，我们即可向您推送记录工具使用提醒、活动通知相关消息提醒。您也可以随时通过相关功能设置取消该权限，如您拒绝开通该权限，将无法接收相关通知。</p>
<p><strong>8、蓝牙权限</strong></p>
<p>您在绑定、使用智能设备时，需要您授权开启蓝牙的权限。如您拒绝提供的，仅会使您无法使用该功能，但并不影响您正常使用轻卡记的其他功能。同时，您也可以随时通过相关功能设置取消该权限。但当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理、存储。</p>
<p><strong>9、语音识别权限</strong></p>
<p>您在通过语音转文字的方式进行搜索查询时，需要您授权开启您的语音识别权限。如您拒绝提供的，仅会使您无法使用该功能，但并不影响您正常使用轻卡记的其他功能。同时，您也可以随时通过相关功能设置取消该权限。当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理、存储。</p>
<p><strong>10、运动健身权限</strong></p>
<p>您在使用步数记录功能，同步手机的步数数据时，需要您授权开启您的运动健身权限（仅安卓手机）。如您拒绝提供，仅会使您在使用步数记录功能时无法直接同步手机的步数数据，但并不影响您正常使用轻卡记的其他功能。同时，您也可以随时通过相关功能设置取消该权限。当您取消该授权后，我们将不再收集该信息，也无法再为您提供上述与之对应的服务；但除非您依照法律的规定删除了您的信息，否则您的取消行为不会影响我们基于您之前的授权进行的信息的处理、存储。</p>
<p>您可以在您的手机设置中管理前述1-10项权限。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="四非个人信息"><strong>（四）非个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%9B%9B%E9%9D%9E%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="四非个人信息的直接链接" title="四非个��人信息的直接链接">​</a></h3>
<p>我们还可能收集其他无法识别到特定个人、不属于个人信息的信息，例如您使用特定服务时产生的统计类数据。收集此类信息的目的在于改善我们向您提供的服务。所收集信息的类别和数量取决于您如何使用我们产品或服务。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="五我们的承诺"><strong>（五）我们的承诺</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%94%E6%88%91%E4%BB%AC%E7%9A%84%E6%89%BF%E8%AF%BA" class="hash-link" aria-label="五我们的承诺的直接链接" title="五我们的承诺的直接链接">​</a></h3>
<p><strong>1、请您理解，我们向您提供的功能和服务是不断更新和发展的，如果某一功能或服务未在前述说明中且收集了您的信息，我们会通过页面提示、交互流程、公告等方式另行向您说明信息收集的内容、范围和目的，以征得您的同意。</strong></p>
<p><strong>2、请您注意，在未取得您的授权之前，我们不会主动从第三方获取您的个人信息。如未来为业务发展需要从第三方间接获取您个人信息，我们会在获取前向您明示您个人信息的来源、类型及使用范围，如我们开展业务需进行的个人信息处理活动超出您原本向第三方提供个人信息时的授权同意范围，我们将在处理您的该等个人信息前，征得您的明示同意；此外，我们也将会严格遵守相关法律法规的规定，并要求第三方保障其提供的信息的合法性。</strong></p>
<p><strong>3、除非取得您的同意，我们在任何时候、任何情况下，都不会擅自向任何第三方传输或共享您的个人信息。</strong></p>
<p><strong>4、在收集到您的个人信息后，我们将通过技术手段及时对数据进行匿名化处理。在不泄露您个人信息的前提下，我们有权对匿名化处理后的用户数据库进行挖掘、分析和利用（包括商业性使用），有权对产品/服务使用情况进行统计并与公众/第三方共享脱敏的统计信息。</strong></p>
<p><strong>5、我们不会根据敏感类别(例如种族、宗教、性取向或健康状)况)向您展示广告。</strong></p>
<p><strong>6、我们不会与广告主分享可用于识别您个人身份的信息，例如您的姓名或电子邮件地址(经您授权同意的除外)。</strong></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二我们如何共享转让公开披露您的个人信息"><strong>二、我们如何共享、转让、公开披露您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%8C%E6%88%91%E4%BB%AC%E5%A6%82%E4%BD%95%E5%85%B1%E4%BA%AB%E8%BD%AC%E8%AE%A9%E5%85%AC%E5%BC%80%E6%8A%AB%E9%9C%B2%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="二我们如何共享转让公开披露您的个人信息的直接链接" title="二我们如何共享转让公开披露您的个人信息的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一委托处理"><strong>（一）委托处理</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%80%E5%A7%94%E6%89%98%E5%A4%84%E7%90%86" class="hash-link" aria-label="一委托处理的直接链接" title="一委托处理的直接链接">​</a></h3>
<p>为了提高效率、降低成本，我们可能会委托关联方代表我们来处理信息，例如我们会聘请我们的关联方为我们提供基础设施技术服务、客户支持服务。对我们委托处理个人信息的公司、组织和个人，我们会通过书面协议、现场审计方式要求其遵守严格的保密义务并采取有效的保密措施，要求其只能在委托范围内处理您的信息，而不得出于其自身利益使用您的信息，并对受托人的个人信息处理活动进行监督。在委托合同不生效、无效、被撤销或者终止时，我们会要求受托方返还个人信息或者将个人信息予以删除，不得保留。</p>
<p>我们的关联方（受托方）包括:</p>
<p>1、应用内推送服务的授权合作伙伴：推送合作伙伴会在我们提供的服务中使用SDK（软件程序开发包），可能将访问诸如您的设备平台、设备厂商用于生成唯一的推送目标ID（CID）和设备ID（GID）、设备品牌、设备型号、设备识别码、应用列表信息、网络信息。这些信息是为了用于创建内部用户编号以帮助我们更好地进行精准的信息推送，避免重复投递信息，对您造成信息干扰。</p>
<p>2、统计服务的授权合作伙伴：统计合作伙伴会在我们提供的服务中使用SDK（软件程序开发包），可能将访问诸如您的网络类型、网络信息、设备信息、IP地址。这些信息是为了用于帮助我们分析产品功能的使用情况，以更好地改进我们的产品和/或服务，提高您的用户体验。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二共享"><strong>（二）共享</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%8C%E5%85%B1%E4%BA%AB" class="hash-link" aria-label="二共享的直接链接" title="二共享的直接链接">​</a></h3>
<p>除我们主动收集的个人信息，您通过轻卡记平台发布的文字、上传的照片和视频，以及使用社交网络服务过程中上传的信息，我们仅作为数据存储于服务器。按照法律法规、监管政策要求，我们不会将您的这些信息进行收集用于其他商业目的或信息分享，但当符合国家相关法律法规、政策要求或国家相关部们的要求时，我们会在法律允许的范围内使用您的这些信息，例如检索、筛选您的这些信息中是否存在不符合法律、法规、违反公序良俗等情形的内容，并向国家相关部门提交涉嫌违反相关法律法规规定的信息。</p>
<p>我们不会与其他任何公司、组织和个人分享您的个人信息，除非获得您的明确同意。目前，我们需要您授权同意共享的情形如下：</p>
<p>1、在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。</p>
<p>2、在法定情形下的共享：我们可能会根据法律法规规定、诉讼、争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。</p>
<p>3、只有共享您的信息，才能实现我们的产品与/或服务的核心功能或提供您需要的服务。我们只会共享必要的个人信息，且受本隐私协议约束。</p>
<p>4、与我们的关联公司共享：您的个人信息可能会与我们关联公司共享。我们只会共享必要的个人信息，且受本隐私协议中所声明目的的约束。关联公司如要改变个人信息的处理目的，将再次征求您的授权同意。</p>
<p>5、与授权合作伙伴共享：仅为实现本隐私协议中声明的目的，我们的某些服务将由授权合作伙伴提供。我们可能会与合作伙伴共享您的某些个人信息，以提供更好的客户服务和用户体验。在这种情况下，这些公司必须遵守我们的数据隐私和安全要求。我们仅会出于合法、正当、最小必要且明确的目的与第三方分享您的个人信息，并且只会共享提供服务所必要的个人信息。如果第三方改变或超越您原同意范围处理您的个人信息，我们会要求第三方再次征得您的同意。对我们与之共享个人信息的公司、组织和个人，我们会要求其严格遵守我们关于数据隐私保护的措施和要求，包括但不限于根据数据保护协议、承诺书及相关数据处理政策进行个人信息的处理，保障隐私安全。</p>
<p>目前，我们的合作伙伴包括以下类型：</p>
<p>（1）第三方SDK类合作方。我们可能会与第三方SDK（软件工具开发包）或其他类似的应用程序类服务商分享您的个人信息，以保证轻卡记App的稳定运行、功能实现。</p>
<p>（2）统计分析服务的合作伙伴。我们可能会与委托我们进行数据分析的合作伙伴共享处理后的设备信息（包括设备名称、设备型号、操作系统和应用程序版本、语言设置、唯一设备标识符、运营商网络类型），用于分析、衡量产品功能的使用情况，更好地改进我们的产品和服务。但我们不会提供您的个人身份信息，或者我们将这些信息进行汇总，以便它不会识别您个人。</p>
<p>6、对我们与之共享个人信息的公司、组织和个人，我们会与其签署严格的保密协议，要求他们按照我们的说明、本隐私协议以及法律规定进行保密和采取安全措施来处理个人信息。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三转让"><strong>（三）转让</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%89%E8%BD%AC%E8%AE%A9" class="hash-link" aria-label="三转让的直接链接" title="三转让的直接链接">​</a></h3>
<p>我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：</p>
<p>1、在获取您明确同意的情况下转让；获得您的明确同意后，我们会向其他方转让您的个人信息；</p>
<p>2、如果我们合并、分立、解散或破产清算等原因需要转移个人信息的，我们会向您告知接收方的名称或者姓名和联系方式，并会要求新的持有您个人信息的公司、组织继续受此个人信息保护政策的约束，否则我们将要求该公司、组织重新向您征求授权同意。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="四公开披露"><strong>（四）公开披露</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%9B%9B%E5%85%AC%E5%BC%80%E6%8A%AB%E9%9C%B2" class="hash-link" aria-label="四公开披露的直接链接" title="四公开披露的直接链接">​</a></h3>
<p>我们仅会在以下情况下，公开披露您的个人信息：</p>
<p>1、获得您明确同意或基于您的主动选择，我们可能会公开披露您的个人信息。</p>
<p><strong>2、如果我们确定您出现违反法律法规或严重违反轻卡记平台相关协议及规则的情况，或为保护轻卡记平台用户或公众的人身财产安全免遭侵害，我们可能披露关于您的个人信息，包括相关违规行为以及轻卡记平台已对您采取的措施。</strong></p>
<p>3、在法律、法律程序、诉讼或政府主管部门强制性要求的情况下，我们可能会公开披露您的个人信息。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="五停止运营"><strong>（五）停止运营</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%94%E5%81%9C%E6%AD%A2%E8%BF%90%E8%90%A5" class="hash-link" aria-label="五停止运营的直接链接" title="五停止运营的直接链接">​</a></h3>
<p>如果我们停止运营产品及/或服务，将及时停止继续收集您的个人信息。我们会逐一送达通知或以公告的形式向您发送停止运营的告知，并对我们所持有的与已关停的产品及/或服务相关的个人信息按照本隐私协议的约定进行删除或匿名化处理。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="六依法豁免征得您授权同意的情形"><strong>（六）依法豁免征得您授权同意的情形</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%85%AD%E4%BE%9D%E6%B3%95%E8%B1%81%E5%85%8D%E5%BE%81%E5%BE%97%E6%82%A8%E6%8E%88%E6%9D%83%E5%90%8C%E6%84%8F%E7%9A%84%E6%83%85%E5%BD%A2" class="hash-link" aria-label="六依法豁免征得您授权同意的情形的直接链接" title="六依法豁免征得您授权同意的情形的直接链接">​</a></h3>
<p>根据相关法律法规及国家标准，以下情形中，我们可能会公开、共享您的相关个人信息无需征求您的授权同意：</p>
<p>1、根据您的要求订立或履行合同所必需。</p>
<p>2、为履行法定职责或者法定义务所必需（例如根据法律法规、行政及司法部门强制性要求进行提供）。</p>
<p>3、为应对突发公共卫生事件，或者紧急情况下为保护自然人的生命健康和财产安全所必需。</p>
<p>4、为公共利益实施新闻报道、舆论监督等行为，在合理的范围内处理个人信息。</p>
<p>5、在合理的范围内处理您自行公开的个人信息，或者其他已经合法公开的个人信息（如合法的新闻报道、政府信息公开等渠道合法公开的个人信息）。</p>
<p>6、法律法规规定的其他情形。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三我们如何存储您的个人信息"><strong>三、我们如何存储您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%89%E6%88%91%E4%BB%AC%E5%A6%82%E4%BD%95%E5%AD%98%E5%82%A8%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="三我们如何存储您的个人信息的直接链接" title="三我们如何存储您的个人信息的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一信息存储的地点"><strong>（一）信息存储的地点</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%80%E4%BF%A1%E6%81%AF%E5%AD%98%E5%82%A8%E7%9A%84%E5%9C%B0%E7%82%B9" class="hash-link" aria-label="一信息存储的地点的直接链接" title="一信息存储的地点的直接链接">​</a></h3>
<p>我们在中华人民共和国境内运营过程中收集的用户个人信息，存储于中华人民共和国境内。目前，我们暂时不存在向境外提供您的个人信息的情况。如果确有必要进行数据的跨境传输，我们会单独向您明确告知（包括数据出境的目的、接收方、使用方式与范围、使用内容、安全保障措施、安全风险等），并征得您的明确授权同意，我们会确保数据接收方有充足的数据保护能力来保护您的个人信息，并严格按照适用法律法规的规定执行。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二信息存储的期限"><strong>（二）信息存储的期限</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%8C%E4%BF%A1%E6%81%AF%E5%AD%98%E5%82%A8%E7%9A%84%E6%9C%9F%E9%99%90" class="hash-link" aria-label="二信息存储的期限的直接链接" title="二信息存储的期限的直接链接">​</a></h3>
<p>我们只会在达成本协议所述目的所需的期限内保留您的个人信息，法律法规有强制性留存要求的情况除外。例如《中华人民共和国电子商务法》要求商品和服务信息、交易信息保存时间自交易完成之日起不少于三年。</p>
<p>我们判断个人信息的存储期限主要依据以下标准：</p>
<p>（1）完成与您相关的交易目的、维护相应交易及业务记录，以应对您可能的查询或投诉；</p>
<p>（2）保证我们为您提供服务的安全和质量；</p>
<p>（3）您是否同意更长的留存期间；</p>
<p>（4）根据诉讼时效的相关需要；</p>
<p>（5）是否存在关于保留期限的其他特别约定或法律法规规定。</p>
<p>在超出保留期间后，我们会根据适用法律的要求删除或匿名化处理您的个人信息。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="四我们如何保护您的个人信息"><strong>四、我们如何保护您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%9B%9B%E6%88%91%E4%BB%AC%E5%A6%82%E4%BD%95%E4%BF%9D%E6%8A%A4%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="四我们如何保护您的个人信息的直接链接" title="四我们如何保护您的个人信息的直接链接">​</a></h2>
<p>（一）我们已使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，保护您的个人信息。例如，我们对我们网站提供https安全浏览方式；我们会使用加密技术确保您个人信息相关数据的保密性；我们会使用受信赖的保护机制防止数据遭到恶意攻击；我们会部署访问控制机制，确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。</p>
<p>（二）我们已采取符合业界标准、合理可行的安全防护措施保护您的信息，使用的技术手段包括但不限于网络防火墙、加密传输、加密存储、去标识化或匿名化处理、脱敏显示、访问控制措施和主机网络隔离等。</p>
<p>（三）我们会采取一切合理可行的措施，确保未收集无关的个人信息。我们只会在达成本协议所述目的所需的期限内保留您的个人信息，除非需要延长保留期或受到法律的允许。</p>
<p><strong>（四）我们将采取有效措施确保您的信息安全，但请您理解，由于技术的限制以及可能存在的各种恶意手段，在互联网行业，即便竭尽所能加强安全措施，也不可能始终保证信息百分之百的安全。您接入轻卡记所用的系统和通讯网络，有可能因轻卡记可控范围外的因素而出现问题。因此，您应采取积极措施保护个人信息的安全，如：使用复杂密码、定期修改密码、不将自己的账户密码等个人信息透露给他人。</strong></p>
<p>（五）互联网环境并非百分之百安全，我们将尽力确保或担保您发送给我们的任何信息的安全性。如果我们的物理、技术、或管理防护设施遭到破坏，导致信息被非授权访问、公开披露、篡改、或毁坏，导致您的合法权益受损，我们将承担相应的法律责任。</p>
<p>（六）在不幸发生个人信息安全事件后，我们将按照法律法规的要求，及时向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。同时，我们还将按照监管部门要求，主动上报个人信息安全事件的处置情况。</p>
<p>（七）账户安全风险防范：</p>
<p>请您妥善保护自己的个人信息，除非必要，不向他人披露您的登录密码或账号信息，您可以为轻卡记账户设置唯一的密码，以防止其他网站密码泄露危害您在轻卡记平台的账号安全。无论何时,请不要向任何人(包括自称是轻卡记平台客服的人士)透露您收到的验证码。如您在他人的手机或公共互联网终端上登录时，使用结束时请注意及时退出登录。</p>
<p>轻卡记平台不对因您未能保持个人信息的私密性而导致第三方访问您的个人信息进而造成的安全疏漏承担责任。如果您发现任何互联网用户未经授权使用您账号、担心自己的个人信息尤其是您的账户或密码发生泄露、或其他任何安全全漏洞，请您应立即通知我们。您的协助将有助于我们保护您个人信息的私密性。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="五您的权利"><strong>五、您的权利</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%94%E6%82%A8%E7%9A%84%E6%9D%83%E5%88%A9" class="hash-link" aria-label="五您的权利的直接链接" title="五您的权利的直接链接">​</a></h2>
<p>按照中国相关的法律、法规、标准，以及其他国家、地区的通行做法，我们保障您对自己的个人信息行使以下权利：</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一访问您的个人信息"><strong>（一）访问您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%80%E8%AE%BF%E9%97%AE%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="一访问您的个人信息的直接链接" title="一访问您的个人信息的直接链接">​</a></h3>
<p>您有权访问您的个人信息，法律法规规定的例外情况除外。具体设置方式如下：</p>
<p>账号信息——您可在【我的】点击【个人主页】按钮在【个人主页】中访问、修改、管理您的头像、昵称、<u>账户密码，绑定的手机号码、第三方账号。</u></p>
<p>消息设置——您可在【我的】点击【个人主页】按钮在【个人主页】中访问、修改、管理您的消息接收设置。</p>
<p>除法律法规另有规定或协议另有约定的情况外，您的上述操作一般在您完成修改、删除后将立即生效。但修改头像、昵称时需要我们后台审核通过后才生效。</p>
<p>如果您无法通过上述方式访问相关个人信息的，您可以随时在【我的】-【帮助中心】-【联系客服】中联系我们，或根据本协议第十一条载明的方式联系我们。我们将在15天内回复您的请求。</p>
<p>对于您在使用我们的功能或服务过程中产生的其他个人信息，只要我们不需要过多投入，我们会向您提供。如果您想行使数据访问权，请发送电子邮件至我们的客服邮箱。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二更正您的个人信息"><strong>（二）更正您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%8C%E6%9B%B4%E6%AD%A3%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="二更正您的个人信息的直接链接" title="二更正您的个人信息的直接链接">​</a></h3>
<p>当您发现我们处理的关于您的个人信息有错误时，您有权要求我们做出更正。您可以通过"（一）访问您的个人信息"中罗列的方式提出更正申请，更正完成后将立即生效。</p>
<p>如果您无法通过上述方式更正这些个人信息，您可以随时在【我的】-【帮助中心】-【联系客服】中联系我们，或根据本协议第十一条载明的方式联系我们。我们将在15天内回复您的更正请求。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三删除您的个人信息"><strong>（三）删除您的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%89%E5%88%A0%E9%99%A4%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="三删除您的个人信息的直接链接" title="三删除您的个人信息的直接链接">​</a></h3>
<p>在以下情形中，您可以向我们提出删除个人信息的请求：</p>
<p>1、如果我们处理个人信息的行为违反法律法规；</p>
<p>2、如果我们收集、使用您的个人信息，却未征得您的同意；</p>
<p>3、如果我们处理个人信息的行为违反了与您的约定；</p>
<p>4、如果您不再使用我们的产品或服务，或您注销了账户；</p>
<p>5、如果我们不再为您提供产品或服务。</p>
<p>若我们决定响应您的删除请求，我们还将同时通知从我们获得您的个人信息的实体，要求其及时删除，除非法律法规另有规定，或这些实体获得您的独立授权。</p>
<p>当您从我们的服务中删除信息后，我们可能不会立即在备份系统中删除相应的信息，但会在备份更新时删除这些信息。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="四个人信息主体注销账户"><strong>（四）个人信息主体注销账户</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%9B%9B%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E4%B8%BB%E4%BD%93%E6%B3%A8%E9%94%80%E8%B4%A6%E6%88%B7" class="hash-link" aria-label="四个人信息主体注销账户的直接链接" title="四个人信息主体注销账户的直接链接">​</a></h3>
<p>我们为您提供账户的注销权限，您随时可注销账户，您可以通过【我的】右上角的【设置】按钮进入【个人主页】-【注销账号】自行操作，您的账户将立即注销，但法律法规另有规定的或本协议另有约定的情况除外。<strong>您可以自主选择注销轻卡记账户或仅注销轻卡记APP账户服务。在您选择注销账户前，请务必仔细阅读注销页面的相关提示及说明。您的账户一旦注销将无法恢复，您将无法继续使用相关产品的功能或服务且自动放弃已有的权益，因此请您谨慎操作。除法律法规另有规定外，账户注销之后，我们将删除您的相关个人信息或进行匿名化处理。</strong></p>
<p>当您注销账户时一般可即时注销，若您的账户存在本条第（八）款中规定的无法响应的情况的，我们将无法响应您的账户注销申请，如您对此有任何异议的，可在线咨询我们的客服，待您无法注销的情况消失后，您可再次发起注销申请。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="五个人信息主体获取个人信息副本"><strong>（五）个人信息主体获取个人信息副本</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%94%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E4%B8%BB%E4%BD%93%E8%8E%B7%E5%8F%96%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E5%89%AF%E6%9C%AC" class="hash-link" aria-label="五个人信息主体获取个人信息副本的直接链接" title="五个人信息主体获取个人信息副本的直接链接">​</a></h3>
<p>您有权复制您的个人信息，法律法规另有规定的情况除外。您可以根据本协议第十一条载明的方式联系我们，我们将在15天内回复您的获取副本请求。</p>
<p>在技术可行的前提下，如数据接口已匹配，我们还可以按照您的要求，直接将以下类型的信息副本传输给您指定的第三方：</p>
<p>1.您的基本信息
2.您通过记录工具记录的信息</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="六约束信息系统自动决策"><strong>（六）约束信息系统自动决策</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%85%AD%E7%BA%A6%E6%9D%9F%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E8%87%AA%E5%8A%A8%E5%86%B3%E7%AD%96" class="hash-link" aria-label="六约束信息系统自动决策的直接链接" title="六约束信息系统自动决策的直接链接">​</a></h3>
<p>在某些业务功能中，我们可能仅依据信息系统、算法等在内的非人工自动决策机制做出决定。如果这些决定显著影响您的合法权益，您有权要求我们作出解释，我们也将在收到您的需求后15天内提供适当的救济方式。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="七响应您的上述请求"><strong>（七）响应您的上述请求</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%83%E5%93%8D%E5%BA%94%E6%82%A8%E7%9A%84%E4%B8%8A%E8%BF%B0%E8%AF%B7%E6%B1%82" class="hash-link" aria-label="七响应您的上述请求的直接链接" title="七响应您的上述请求的直接链接">​</a></h3>
<p>为保障安全，您可能需要提供书面请求，或以其他方式证明您的身份。我们可能会先要求您验证自己的身份，然后再处理您的请求，处理时限一般不超过十五天。如遇特殊情况，我们将可能会延长处理时限，您可以通过联系客服了解详情。如您不满意，还可以向消费者权益保护部门投诉，也可以向有管辖权的人民法院提起诉讼。</p>
<p>对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将视情收取一定成本费用。对于那些无端重复、需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或者非常不切实际（例如，涉及备份磁带上存放的信息）的请求，我们可能会予以拒绝。</p>
<p>在以下情形中，按照法律法规要求，我们将无法响应您的请求：</p>
<p>1、与我们履行法律法规规定的义务相关的；</p>
<p>2、与国家安全、国防安全直接相关的；</p>
<p>3、与公共安全、公共卫生、重大公共利益直接相关的；</p>
<p>4、与刑事侦查、起诉、审判和执行判决等直接相关的；</p>
<p>5、有充分证据表明您存在主观恶意或滥用权利的；</p>
<p>6、出于维护您或其他个人的生命、财产等重大合法权益但又很难得到您本人同意的；</p>
<p>7、响应您的请求将导致您或其他个人、组织的合法权益受到严重损害的；</p>
<p>8、涉及商业秘密的；</p>
<p>9、其他法律法规规定的情形。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="六第三方产品服务提供者"><strong>六、第三方产品/服务提供者</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%85%AD%E7%AC%AC%E4%B8%89%E6%96%B9%E4%BA%A7%E5%93%81%E6%9C%8D%E5%8A%A1%E6%8F%90%E4%BE%9B%E8%80%85" class="hash-link" aria-label="六第三方产品服务提供者的直接链接" title="六第三方产品服务提供者的直接链接">​</a></h2>
<p>为方便您的访问并丰富您的体验，可能会有第三方提供的产品或服务。您可以选择是否访问这类内容或链接，或是否使用该第三方的产品或服务。但我们对于第三方提供的产品或服务没有控制权。我们无法控制第三方掌握的您的任何个人信息。您在使用第三方产品或服务过程中的信息保护问题，不适用于本协议的管理。本协议也不适用于您自行选择提供给第三方的任何信息。请您查看该第三方的隐私保护政策。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="七我们如何使用-cookie-和同类技术"><strong>七、我们如何使用 Cookie 和同类技术</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%83%E6%88%91%E4%BB%AC%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-cookie-%E5%92%8C%E5%90%8C%E7%B1%BB%E6%8A%80%E6%9C%AF" class="hash-link" aria-label="七我们如何使用-cookie-和同类技术的直接链接" title="七我们如何使用-cookie-和同类技术的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一cookie"><strong>（一）Cookie</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%80cookie" class="hash-link" aria-label="一cookie的直接链接" title="一cookie的直接链接">​</a></h3>
<p>为确保网站正常运转，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。借助于 Cookie，网站能够存储您的偏好或购物篮内的商品数据。</p>
<p>我们不会将 Cookie 用于本协议所述目的之外的任何用途。您可以清除轻卡记上保存的所有 Cookie，大部分网络浏览器都设有阻止 Cookie 的功能。但如果您这么做，则需要在每一次访问我们的网站时亲自更改用户设置。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二网站信标和像素标签"><strong>（二）网站信标和像素标签</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%BA%8C%E7%BD%91%E7%AB%99%E4%BF%A1%E6%A0%87%E5%92%8C%E5%83%8F%E7%B4%A0%E6%A0%87%E7%AD%BE" class="hash-link" aria-label="二网站信标和像素标签的直接链接" title="二网站信标和像素标签的直接链接">​</a></h3>
<p>除Cookie外，我们还会在网站上使用网站信标和像素标签等其他同类技术。例如，我们向您发送的电子邮件可能含有链接至我们网站内容的点击URL。如果您点击该链接，我们则会跟踪此次点击，帮助我们了解您的功能或服务偏好并改善客户服务。网站信标通常是一种嵌入到网站或电子邮件中的透明图像。借助于电子邮件中的像素标签，我们能够获知电子邮件是否被打开。如果您不希望自己的活动以这种方式被追踪，则可以随时从我们的寄信名单中退订。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三do-not-track请勿追踪"><strong>（三）Do Not Track（请勿追踪）</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B8%89do-not-track%E8%AF%B7%E5%8B%BF%E8%BF%BD%E8%B8%AA" class="hash-link" aria-label="三do-not-track请勿追踪的直接链接" title="三do-not-track请勿追踪的直接链接">​</a></h3>
<p>很多网络浏览器均设有DoNotTrack功能，该功能可向网站发布DoNotTrack请求。目前，主要互联网标准组织尚未设立相关政策来规定网站应如何应对此类请求。但如果您的浏览器启用了DoNotTrack，那么我们将会尊重您的选择。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="八我们如何处理未成年人的个人信息"><strong>八、我们如何处理未成年人的个人信息</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%85%AB%E6%88%91%E4%BB%AC%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E6%9C%AA%E6%88%90%E5%B9%B4%E4%BA%BA%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="八我们如何处理未成年人的个人信息的直接链接" title="八我们如何处理未成年人的个人信息的直接链接">​</a></h2>
<p><strong>我们深知保护未成年人信息的重要性，我们仅对已满18周岁的成人提供服务。我们不会故意收集未成年人的任何个人信息。不满18周岁的未成年人不得创建自己的轻卡记账户，如您为未成年人，请您即刻停止您的注册/使用行为，我们不承担任何不遵守这一要求的责任。</strong></p>
<p><strong>我们鼓励父母和法定监护人采取适当措施，防止18周岁以下未成年人使用本应用。</strong></p>
<p><strong>对于您使用家人档案相关功能时，我们仅会收集您作为父母或监护人主动提供的未成年人个人信息，我们不会收集您主动提供的信息以外的未成年人个人信息。对于未成年人的个人信息，我们只会在受到法律允许、监护人同意或者保护未成年人所必要的情况下使用、共享、转让或披露此信息。如果我们发现自己在未事先获得您同意的情况下收集了未成年人的个人信息，则会设法尽快删除相关数据。</strong></p>
<p><strong>除法律法规或监管部门另有规定外，我们仅在本协议所述目的所必需且最短时限内存储未成年人的个人信息。如我们终止服务或运营，我们将及时停止继续收集未成年人个人信息的活动，同时会遵守相关法律法规要求提前向您进行通知，并在终止服务或运营后对未成年人个人信息进行删除或匿名化处理，但法律法规或监管部门另有规定的除外。</strong></p>
<p><strong>对于可能涉及的<u>不满14周岁的儿童个人信息</u>，这些信息属于个人敏感信息，我们进一步采取以下措施予以保护：</strong></p>
<p><strong>（1）对于我们收集到的儿童个人信息，我们除遵守本隐私协议的约定外，还会秉持正当必要、知情同意、目的明确、安全保障、依法利用的原则，严格遵循法律法规的要求进行存储、使用、披露，且不会超过实现收集、使用目的所必须的期限，到期后我们会对儿童个人信息进行删除或匿名化处理。我们会指定专人负责儿童个人信息保护事宜。</strong></p>
<p><strong>（2）您有权随时访问和更正您提供的<u>儿童个人信息</u>，还可以向我们提出更正和删除的请求。如您对儿童个人信息相关事宜有任何意见、建议或投诉、举报，请联系我们，我们会随时为您提供帮助。</strong></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="九您的个人信息如何在全球范围转移"><strong>九、您的个人信息如何在全球范围转移</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E4%B9%9D%E6%82%A8%E7%9A%84%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E5%A6%82%E4%BD%95%E5%9C%A8%E5%85%A8%E7%90%83%E8%8C%83%E5%9B%B4%E8%BD%AC%E7%A7%BB" class="hash-link" aria-label="九您的个人信息如何在全球范围转移的直接链接" title="九您的个人信息如何在全球范围转移的直接链接">​</a></h2>
<p>原则上，我们在中华人民共和国境内收集和产生的个人信息，将存储在中华人民共和国境内，以下情形除外：</p>
<p>1、适用的法律有明确规定；</p>
<p>2、获得您的明确授权。</p>
<p>针对以上情形，我们会确保依据本隐私协议及相关法律法规的规定，对您的个人信息提供足够的保护。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十本隐私协议如何更新"><strong>十、本隐私协议如何更新</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%8D%81%E6%9C%AC%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE%E5%A6%82%E4%BD%95%E6%9B%B4%E6%96%B0" class="hash-link" aria-label="十本隐私协议如何更新的直接链接" title="十本隐私协议如何更新的直接链接">​</a></h2>
<p>我们的个人信息保护政策可能变更。</p>
<p>未经您明确同意，我们不会削减您按照本个人信息保护政策所应享有的权利。我们会在本页面上发布对本协议所做的任何变更。</p>
<p>对于重大变更，我们还会提供更为显著的通知（包括对于某些服务，我们会通过以在线公告、系统通知等方式发送通知，说明个人信息保护政策的具体变更内容）。</p>
<p>本协议所指的重大变更包括但不限于：</p>
<p>1、我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式等；</p>
<p>2、我们在所有权结构、组织架构等方面发生重大变化。如业务调整、破产并购等引起的所有者变更等；</p>
<p>3、个人信息共享、转让或公开披露的主要对象发生变化；</p>
<p>4、您参与个人信息处理方面的权利及其行使方式发生重大变化；</p>
<p>5、我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；</p>
<p>6、个人信息安全影响评估报告表明存在高风险时。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十一如何联系我们"><strong>十一、如何联系我们</strong><a href="https://bianliangrensheng.cn/blog/qingkaji-privacy-policy#%E5%8D%81%E4%B8%80%E5%A6%82%E4%BD%95%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC" class="hash-link" aria-label="十一如何联系我们的直接链接" title="十一如何联系我们的直接链接">​</a></h2>
<p>如果您对本隐私协议有任何疑问、意见或建议，通过以下方式与我们联系：</p>
<p>电子邮箱：<a href="mailto:aaron6666@2925.com" target="_blank" rel="noopener noreferrer" class="link">aaron6666@2925.com</a></p>
<p>我们会在15个工作日内回复您的请求。</p>
<p>如果您对我们的回复不满意，特别是您认为我们的个人信息处理行为损害了您的合法权益，您还可以通过向被告住所地有管辖权的法院提起诉讼来寻求解决方案。</p>]]></content:encoded>
            <category>隐私协议</category>
            <category>健康管理</category>
            <category>数据保护</category>
        </item>
        <item>
            <title><![CDATA[轻卡记用户协议]]></title>
            <link>https://bianliangrensheng.cn/blog/qingkaji-user-policy</link>
            <guid>https://bianliangrensheng.cn/blog/qingkaji-user-policy</guid>
            <pubDate>Thu, 15 May 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[轻卡记用户协议详细说明了您使用轻卡记APP的权利和义务，以及我们为您提供服务的各项规则和注意事项]]></description>
            <content:encoded><![CDATA[<p>版本发布日期：2025年04月15日<br>
<!-- -->版本生效日期：2025年04月15日</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="提示条款">【提示条款】<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E6%8F%90%E7%A4%BA%E6%9D%A1%E6%AC%BE" class="hash-link" aria-label="【提示条款】的直接链接" title="【提示条款】的直接链接">​</a></h2>
<p>为了更好地为您提供服务，请您仔细阅读《用户协议》（以下简称"本协议"）。在您开始使用"轻卡记"APP及相关服务之前，<strong>请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体标识，您应重点阅读。如您未满18周岁，请您在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后使用轻卡记提供的服务。如您对于本条款的任何内容表示异议，或者无法准确理解本条款，请不要注册、登陆轻卡记APP或使用相关服务。当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容，承诺作为本协议的一方当事人接受协议的约束，如果您不愿意接受本协议的任一条款，您应立即停止注册轻卡记的功能与服务。</strong></p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一定义">一、定义<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E4%B8%80%E5%AE%9A%E4%B9%89" class="hash-link" aria-label="一、定义的直接链接" title="一、定义的直接链接">​</a></h2>
<ol>
<li>
<p>本协议是您与轻卡记的运营商吉首极客软件开发工作室及其关联公司（在本协议中简称为"公司"或"我们"）之间就您下载、安装、注册、登录、使用"轻卡记"APP，并获得"轻卡记"APP提供的相关服务所订立的协议。</p>
</li>
<li>
<p>"用户"指所有直接或间接获取和使用"轻卡记"APP及相关服务的使用者，包括自然人、法人或其他组织等。在本协议中称为"用户"或称"您"。</p>
</li>
<li>
<p>"轻卡记"指吉首极客软件开发工作室开发并运营的产品——轻卡记APP。在本协议中称为"轻卡记"或"APP"。</p>
</li>
<li>
<p>"轻卡记子产品"指轻卡记微信小程序、轻卡记鸿蒙应用等，轻卡记子产品是为了满足您只需使用轻卡记的部分功能而开发的简化版轻卡记，子产品不具有独立的账户，仅拥有轻卡记的部分服务或功能，您可根据实际需求选择使用轻卡记或轻卡记的子产品。</p>
</li>
<li>
<p>"轻卡记账户"是指您创建的轻卡记及子产品的账户，您可自主选择在轻卡记或轻卡记的任一子产品中注册，无论您是在哪一个产品中注册的账户，均可用以登录其他产品。</p>
</li>
<li>
<p>轻卡记服务提供者：指轻卡记的互联网信息及软件技术服务提供者：吉首极客软件开发工作室。</p>
</li>
<li>
<p>关联公司：指吉首极客软件开发工作室直接或间接控股或投资的公司。</p>
</li>
<li>
<p>个人信息：指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。</p>
</li>
<li>
<p>个人敏感信息：指包括身份证件号码、个人生物识别信息、银行账号、财产信息、行踪轨迹、健康生理信息、交易信息、14岁以下（含）儿童信息等的个人信息（我们将在本隐私权政策中对具体个人敏感信息以粗体进行显著标识）。</p>
</li>
<li>
<p>个人信息删除：指在实现日常业务功能所涉及的系统中去除个人信息的行为，使其保持不可被检索、访问的状态。</p>
</li>
<li>
<p>个人信息匿名化：指提供对个人信息的技术处理，使得个人信息主体无法被识别或关联，且处理后的信息不能被复原的过程。</p>
</li>
<li>
<p>普通会员：指在轻卡记app完成注册并在轻卡记绑定手机号的用户。高级会员：指在轻卡记APP完成注册并在轻卡记绑定手机号的同时/之后，通过支付费用或兑换码等方式进行升级，享受"高级会员专享"增值服务的用户（具体服务规则以《轻卡记会员服务协议》及相关页面介绍为准）。普通会员和高级会员统称为会员。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二本协议及条款的修改">二、本协议及条款的修改<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E4%BA%8C%E6%9C%AC%E5%8D%8F%E8%AE%AE%E5%8F%8A%E6%9D%A1%E6%AC%BE%E7%9A%84%E4%BF%AE%E6%94%B9" class="hash-link" aria-label="二、本协议及条款的修改的直接链接" title="二、本协议及条款的修改的直接链接">​</a></h2>
<ol>
<li>
<p>由于互联网行业高速发展，本协议列明的条款并不能完整罗列并覆盖您与我们的所有权利与义务，现有的约定也不能保证完全符合未来发展的需求。因此，本协议的内容还应包括所有已经发布的、或未来可能发布和更新的各类规则。所有规则一经发布并以适当的方式送达后（在线公告、系统通知等），即成为本协议不可分割的组成部分，与本协议正文具有同等法律效力；法律另有强制性规定或双方另有特别约定的，依其规定。</p>
</li>
<li>
<p>我们有权根据需要不时地修订本协议及各类规则（包括但不限于制定新的条款和修改既有条款），并以在线公告、系统通知等方式进行变更公告，无须另行单独通知您。修订后的用户协议和规则一经公布，立即或在公告明确的特定时间自动生效，修订后的用户协议和规则生效后，如您选择同意并继续使用轻卡记，即意味着您同意接受更新后的用户协议和规则。如您不同意变更后的用户协议和规则，请您立即停止使用。</p>
</li>
<li>
<p>您有权通过以下任一方式终止本协议：</p>
<ul>
<li>（1）您通过轻卡记注销您的账户的；</li>
<li>（2）变更事项生效前您停止使用并明示不愿接受变更事项的。</li>
</ul>
</li>
<li>
<p>出现以下情况时，我们有权通过本协议所规定的方式通知您终止本协议：</p>
<ul>
<li>（1）您违反本协议约定，轻卡记依据违约条款终止本协议的；</li>
<li>（2）您转让本人账户、盗用他人账户、发布违禁内容和信息、骗取他人财物、采取不正当手段谋利等行为，轻卡记依据相应的规则对您的账户予以查封的；</li>
<li>（3）除上述情形外，因您多次违反本协议或轻卡记的相关使用规则且情节严重，我们有权依据相关规则对您的账户予以查封的；</li>
<li>（4）您在轻卡记有侵犯他人合法权益或其他严重违法违约行为的；</li>
<li>（5）其它根据相关法律法规轻卡记应当终止服务的情况。</li>
</ul>
</li>
<li>
<p>本协议终止后，除法律有明确规定外，轻卡记无义务向您或您指定的第三方披露您账户中的任何信息。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三轻卡记功能及服务">三、轻卡记功能及服务<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E4%B8%89%E8%BD%BB%E5%8D%A1%EF%BF%BD%EF%BF%BD%E8%AE%B0%E5%8A%9F%E8%83%BD%E5%8F%8A%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="三、轻卡记功能及服务的直接链接" title="三、轻卡记功能及服务的直接链接">​</a></h2>
<ol>
<li>
<p>您使用轻卡记的软件及相关服务，可以通过预装、轻卡记官方网站以及我们已授权的第三方下载等方式获取轻卡记客户端应用程序。若您并非从我们或经我们授权的第三方获取本软件的，我们无法保证非官方版本的轻卡记软件能够正常使用，您因此遭受的损失与我们无关。</p>
</li>
<li>
<p>轻卡记仅提供在线服务，除此之外与网络服务有关的设备（如手机及其他与接入互联网或移动网有关的装置）及所需的费用（如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费）均应由您自行负担。</p>
</li>
<li>
<p>为更好的提升用户体验及服务，我们将不定期提供轻卡记软件更新与改变（包括但不限于软件升级替换、修改、功能强化、版本升级等）。我们也可能随时调整公司的整体运营策略，而对软件的功能进行更新或者对软件的部分功能进行改变或限制、中断或终止运营。您理解并同意，我们有权不向您特别通知而进行以上改变。如果我们对软件进行升级或修改的，在新版本发布后，旧版本的部分功能可能无法正常使用，为了便于您更好的使用我们的服务，请您随时核对并下载最新版本。</p>
</li>
<li>
<p>您不得使用任何装置、软件或程序干预或试图干预轻卡记的正常运行。除法律另有强制性规定外，未经我们明确授权的，您不得以任何方式非法地全部或部分复制、转载、引用、链接、抓取或以其他方式使用轻卡记的信息内容，否则，我们有权追究您的法律责任。</p>
</li>
<li>
<p>除您与轻卡记另有约定外，您不得对轻卡记中的任何数据/资料作商业性利用，包括但不限于在未经我们事先书面同意的情况下，以复制、传播等任何方式使用轻卡记中展示的所有资料和内容。</p>
</li>
<li>
<p>您无需注册也可开始使用轻卡记软件，但部分功能或服务可能会受到影响。同时，您也理解，为使您更好地使用轻卡记软件及相关服务，保障您的帐号安全，某些功能和/或某些单项服务项目（如饮食记录、社区等）将要求您按照国家相关法律法规的规定，提供真实的身份信息实名注册并登录后方可使用。</p>
</li>
<li>
<p>轻卡记的部分服务需付费使用，您使用此类服务需要支付一定的费用。对于收费的服务，我们会在您使用之前给予明确的提示，只有您根据提示确认其愿意并支付相关费用，您才能使用该等收费服务。如您拒绝支付相关费用，则我们有权拒绝向您提供该等收费服务。</p>
</li>
<li>
<p>轻卡记为您提供多种在线功能与服务，主要包括如下模块：</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1健康工具">（1）健康工具<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#1%E5%81%A5%E5%BA%B7%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="（1）健康工具的直接链接" title="（1）健康工具的直接链接">​</a></h3>
<p>为满足您对健康管理的需求，轻卡记特向您提供食物热量查询、饮食分析与方案、健康评测、饮食记录、运动追踪、个人健康档案管理等免费或付费的健康工具服务。</p>
<p>在您使用轻卡记提供的运动追踪或者采纳轻卡记提供的运动建议或方案之前，请您咨询健康专家或其他专业人士该项目是否适合您的个人需要和健康状况。我们提供的部分运动建议或方案可能具有一定的强度和难度，您必须根据自身的健康情况进行慎重选择，因参加任何训练或运动而引起的一切风险、损害及责任等，由您自行承担。</p>
<p>轻卡记提供的功能与服务不涉及任何医疗手段和用途，若您患有相关疾病，您必须在使用我们的功能或服务前咨询健康专家或执业医师，并根据自身的健康状况进行慎重选择。轻卡记提供的健康管理服务主要是针对成年人，任何针对未成年人的分析、方案与建议、评测结果等仅供参考，未成年人请在成人的指导下使用，并评估自身健康状况进行慎重选择，必要时请咨询专业医师。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2会员服务">（2）会员服务<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#2%E4%BC%9A%E5%91%98%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="（2）会员服务的直接链接" title="（2）会员服务的直接链接">​</a></h3>
<p>轻卡记为普通会员提供普通会员服务，为高级会员提供了权益更为丰富的高级会员服务，普通会员服务与高级会员服务统称为会员服务。其中，高级会员服务为付费服务，使用该服务前需要支付相应的会员服务费用或使用普通会员兑换码进行兑换（具体规则以兑换页面说明为准）。高级会员服务的收费标准由轻卡记根据自身运营策略独立决定（包括费用调整），并在高级会员费用支付页面向您显示；若您在自动续费时/之前，高级会员服务价格发生调整的，应以轻卡记APP上公示的现时有效的价格为准。您同意您继续操作的行为（包括但不限于点击同意、或继续购买、或完成支付行为等），即视为您知悉并同意该收费标准；若您对价格存在异议，可以随时取消自动续费。</p>
<p>由于协议篇幅的限制，前述会员服务（含普通会员服务及高级会员服务）相关服务规则、权利、限制、责任等内容，轻卡记会通过《会员服务协议》及相关规范说明（如有）向您展示与说明，其均构成本协议的补充内容，是本协议不可分割的一部分。本协议（包括《轻卡记会员服务协议》、规范说明等）构成您获取和使用会员服务的必要前提条件，您应当在仔细阅读并同意本协议的全部内容后获取和使用会员服务，您的使用行为（包括但不限于支付行为/接受赠与、或完成了成为会员的全部程序而在此过程中未向轻卡记提出关于本协议的任何异议、或使用会员服务等）将视为同意本协议（包括《会员服务协议》、规范说明等）的约束。</p>
<p>您可以通过【我的-设置-协议与条款】查看《会员服务协议》。我们也会在普通会员登录及高级会员购买页面向您展示《会员服务协议》，请您留意查阅，并在阅读全部内容后再购买高级会员服务。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="四轻卡记账户的注册使用及注销">四、轻卡记账户的注册、使用及注销<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%9B%9B%E8%BD%BB%E5%8D%A1%E8%AE%B0%E8%B4%A6%E6%88%B7%E7%9A%84%E6%B3%A8%E5%86%8C%E4%BD%BF%E7%94%A8%E5%8F%8A%E6%B3%A8%E9%94%80" class="hash-link" aria-label="四、轻卡记账户的注册、使用及注销的直接链接" title="四、轻卡记账户的注册、使用及注销的直接链接">​</a></h2>
<ol>
<li>
<p>轻卡记为您提供了注册通道，您有权选择合法的字符组合、邮箱或者手机号码作为自己的账户名称，并自行设置符合安全要求的密码。账户的所有权归我们所有，您仅拥有使用权。</p>
</li>
<li>
<p>您设置的账户名称、密码是您用以登录并以注册用户身份使用轻卡记提供的相关服务的凭证。您的账户只限您本人使用，未经轻卡记书面同意，您不得以任何形式赠与、借用、出租、转让、售卖或以其他方式许可他人使用该账号。您应当妥善保管您的帐号和密码，如因您保管不当等自身原因或其他不可抗因素导致遭受盗号或密码丢失，您将自行承担相应责任。若发现他人未经许可使用您的账号或发生其他任何安全漏洞问题时，您应当立即通知我们的客服，否则您应对凭您的账户密码登录轻卡记所发生的所有行为负责。</p>
</li>
<li>
<p>在若您遗忘密码时，您可在登录页面的【找回密码】通过手机验证码进行找回。您理解并认可，我们的密码找回机制仅需要识别所填资料与系统记录资料具有一致性，而无法识别申请人是否系真正帐号有权使用者。</p>
</li>
<li>
<p>您有权设置并修改账户昵称、头像、个人简介等注册信息。但应保证您设置或修改的信息不得违反国家法律法规及公司的相关规则，不得实施任何侵害国家利益、损害其他公民合法权益，有害社会道德风尚的行为，您的帐号名称、头像和简介等注册信息及其他个人信息中不得出现违法和不良信息，未经他人许可不得用他人名义（包括但不限于冒用他人姓名、名称、字号、头像等足以让人引起混淆的方式）开设帐号，不得恶意注册轻卡记帐号（包括但不限于频繁注册、批量注册帐号等行为）。公司有权对你提交的信息进行审核。</p>
</li>
<li>
<p>您在注册、使用和管理轻卡记账号时，您应保证填写的身份信息的真实性，请您在注册、管理账号时使用真实、准确、合法、有效的身份证明材料及必要信息，并保证上述资料系您本人的真实资料，不得冒用他人身份或使用他人资料注册轻卡记账号。依照国家相关法律法规的规定，在使用轻卡记软件及相关服务的部分功能时，您需要填写真实的身份信息，请您按照相关法律规定完成实名认证，并注意及时更新上述相关信息。若您提交的材料或提供的信息不规范或不符合要求的，则我们有权拒绝为您提供相关功能，您可能无法使用轻卡记软件及相关服务或在使用过程中部分功能受到限制。</p>
</li>
<li>
<p>除自行注册轻卡记帐号外，您也可授权使用其实名注册的第三方软件用户帐号登录使用轻卡记软件及相关服务，但第三方软件或平台对此有限制或禁止的除外。当您以前述已有帐号登录使用的，应保证相应帐号已进行实名注册登记，并同样适用本协议中的相关条款。</p>
</li>
<li>
<p>您理解并同意，除您登录、使用轻卡记软件及相关服务外，您还可以用轻卡记帐号登录使用轻卡记的子产品。</p>
</li>
<li>
<p>轻卡记为您提供用户账号注销权，您随时可注销此前注册的账户，您可以通过账号设置自行操作（但法律法规另有规定的或本协议另有约定的除外），一旦您注销账号，将无法使用轻卡记提供的全线用户产品的服务且自动放弃已有的权益，包括未到期的会员权益，因此请您谨慎操作。除法律法规另有规定外，注销账号之后，轻卡记将停止为您提供轻卡记所有的功能与服务，您曾通过该账号使用的轻卡记的功能与服务下的所有内容、信息、数据、记录将会被删除或匿名化处理。</p>
</li>
<li>
<p>您注销轻卡记账号或者本协议依照相关约定终止后，我们将立即停止收集和使用您的个人信息，您在注销账号前或本协议终止前所产生的个人信息，我们将依据本协议及《隐私政策》的约定采取删除或匿名化处理。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="五用户行为规范">五、用户行为规范<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E4%BA%94%E7%94%A8%E6%88%B7%E8%A1%8C%E4%B8%BA%E8%A7%84%E8%8C%83" class="hash-link" aria-label="五、用户行为规范的直接链接" title="五、用户行为规范的直接链接">​</a></h2>
<ol>
<li>
<p>您应当对使用轻卡记及相关服务的行为负责，不得使用未经我们授权或许可的任何插件、外挂、系统或第三方工具对轻卡记及相关服务的正常运行进行干扰、破坏、修改或施加其他影响。</p>
</li>
<li>
<p>您不得利用或针对轻卡记及相关服务进行任何危害计算机网络安全的行为，包括但不限于：</p>
<ul>
<li>（1）非法侵入他人网络、干扰他人网络正常功能、窃取网络数据等危害网络安全的活动；</li>
<li>（2）提供专门用于从事侵入网络、干扰网络正常功能及防护措施、窃取网络数据等危害网络安全活动的程序、工具；</li>
<li>（3）明知他人从事危害网络安全的活动的，为其提供技术支持、广告推广、支付结算等帮助；</li>
<li>（4）使用未经许可的数据或进入未经许可的服务器/账号；</li>
<li>（5）未经允许进入公众计算机网络或者他人计算机系统并删除、修改、增加存储信息；</li>
<li>（6）未经许可，企图探查、扫描、测试轻卡记系统或网络的弱点或其它实施破坏网络安全的行为；</li>
<li>（7）企图干涉、破坏轻卡记系统或网站的正常运行，故意传播恶意程序或病毒以及其他破坏干扰正常网络信息服务的行为；</li>
<li>（8）伪造TCP/IP数据包名称或部分名称；</li>
<li>（9）对轻卡记及相关服务进行反向工程、反向汇编、编译或者以其他方式尝试发现本软件的源代码；</li>
<li>（10）恶意注册轻卡记及相关服务的帐号，包括但不限于频繁、批量注册帐号；</li>
<li>（11）违反法律法规、本协议、公司的相关规则及侵犯他人合法权益的其他行为。</li>
</ul>
</li>
<li>
<p>您在轻卡记上发布、传播或评论的内容应自觉遵守宪法法律、法规、遵守公共秩序，尊重社会公德、社会主义制度、国家利益、公民合法权益、道德风尚和信息真实性等要求，不得发布以下违法信息或不良信息，亦不得通过刻意使用字符组合等方式逃避技术审核：</p>
<ul>
<li>(1)反对宪法所确定的基本原则的；</li>
<li>(2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
<li>(3)损害国家荣誉和利益的；</li>
<li>(4)歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉的；</li>
<li>(5)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动的；</li>
<li>(6)煽动民族仇恨、民族歧视，破坏民族团结的；</li>
<li>(7)破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
<li>(8)散布谣言，扰乱经济秩序和社会秩序的；</li>
<li>(9)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
<li>(10)侮辱或者诽谤他人，侵害他人名誉权、隐私权、知识产权和其他合法权益的；</li>
<li>(11)使用夸张标题，内容与标题严重不符的；</li>
<li>(12)炒作绯闻、丑闻、劣迹等的；</li>
<li>(13)不当评述自然灾害、重大事故等灾难的；</li>
<li>(14)带有性暗示、性挑逗等易使人产生性联想的；</li>
<li>(15)展现血腥、惊悚、残忍等致人身心不适的；</li>
<li>(16)煽动人群歧视、地域歧视等的；</li>
<li>(17)宣扬低俗、庸俗、媚俗内容的；</li>
<li>(18)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好等的；</li>
<li>(19)其他对网络生态造成不良影响的内容；</li>
<li>(20）法律、行政法规禁止的其他内容。</li>
</ul>
</li>
<li>
<p>您同意在使用轻卡记服务过程中，遵守以下法律法规：《中华人民共和国网络安全法》、《中华人民共和国著作权法》、《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《互联网电子公告服务管理规定》、《信息网络传播权保护条例》、《互联网用户账号名称管理规定》、《网络信息内容生态治理规定》等有关计算机及互联网规定的法律、法规。在任何情况下，我们一旦合理地认为您的行为可能违反上述法律、法规，可以在任何时候，不经事先通知终止向您提供服务。</p>
</li>
<li>
<p><strong>若您发布或传播的内容含有本协议规定的禁止发布内容的，我们有权视具体情况采取冻结账号、限制账户部分功能、拒绝服务、屏蔽或删除相关内容或者直接删除账户等措施，并可依法追究您的法律责任。因您的违法、侵权或违约等行为导致我们及其关联公司向任何第三方赔偿或遭受国家机关处罚的，您还应足额赔偿我们及其关联公司因此遭受的全部损失（包括且不限于财产损害赔偿、名誉损害赔偿、律师费、交通费等维权费用）。</strong></p>
</li>
<li>
<p><strong>您应尊重第三方的名誉权、姓名权、隐私权、知识产权等合法权益，您在使用轻卡记及相关服务时，不得侵犯任何第三方的合法权益。否则我们有权在收到权利方或者相关方通知的情况下删除涉嫌侵权的内容。针对第三方提出的全部权利主张或诉讼索赔，您应自行处理并承担全部可能由此引起的法律责任；如因此给我们造成不利后果的，您应负责消除影响，并且赔偿我们因此导致的一切损失（包括且不限于财产损害赔偿、名誉损害赔偿、律师费、交通费等维权费用。</strong></p>
</li>
<li>
<p><strong>我们设立了公众投诉、举报的通道，您可通过本协议约定的联系方式或者通过轻卡记设置中的【投诉举报】板块向我们投诉、举报各类违法违规或侵权的行为、违法传播活动、违法有害信息等内容，我们将及时受理和处理您的投诉举报，以共同营造风清气正的网络空间。</strong></p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="六用户信息的保护">六、用户信息的保护<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%85%AD%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%E7%9A%84%E4%BF%9D%E6%8A%A4" class="hash-link" aria-label="六、用户信息的保护的直接链接" title="六、用户信息的保护的直接链接">​</a></h2>
<ol>
<li>
<p>您在下载、安装、启动、浏览、注册、登录、使用轻卡记及相关服务时，我们将按照轻卡记APP公布的《轻卡记隐私政策》的约定处理和保护您的个人信息，因此希望您能够仔细阅读、充分理解《轻卡记隐私政策》的全文，并在需要时，按照《轻卡记隐私政策》的指引，作出您认为适当的选择。</p>
</li>
<li>
<p>您应当在仔细阅读、充分理解《轻卡记隐私政策》后使用轻卡记及相关服务，如果您不同意隐私政策的内容，您应立即停止访问/使用轻卡记及相关服务。您使用或继续使用轻卡记及相关服务的行为，都表示您充分理解和同意《轻卡记隐私政策》（包括更新版本）的全部内容。</p>
</li>
<li>
<p>轻卡记深知个人信息对您的重要性，因此轻卡记非常重视保护您的隐私和个人信息，亦将您的个人信息以高度审慎的义务对待和处理。更多关于个人信息处理和保护规则、您对个人信息的控制权等内容，请您查阅《轻卡记隐私政策》。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="七广告">七、广告<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E4%B8%83%E5%B9%BF%E5%91%8A" class="hash-link" aria-label="七、广告的直接链接" title="七、广告的直接链接">​</a></h2>
<ol>
<li>
<p>您充分理解并同意，在使用轻卡记及相关服务过程中，我们可能会向您推送具有相关性的信息、广告发布或品牌推广服务。您同意我们有权在轻卡记上展示轻卡记及相关服务相关和/或第三方供应商、合作伙伴的商业广告、推广或信息（包括商业或非商业信息）。</p>
</li>
<li>
<p>在您使用轻卡记及相关服务时，我们可能会基于您的偏好、兴趣等方面向您推送个性化推荐，您可以在账号设置中关闭个性化推荐，如果您选择关闭的，您看到的广告数量可能会保持不变，但广告的相关性会降低。</p>
</li>
<li>
<p>您选择接受本协议，表明您同意我们在提供服务的过程中以各种方式投放商业性广告或其他任何类型的商业信息（包括但不限于在轻卡记的任何位置上投放广告），您同意接受我们通过电子邮件、手机短信、语音电话、系统通知或公告或其他方式向您发送促销或其他相关商业信息。</p>
</li>
<li>
<p>我们依照法律规定履行广告及推广相关义务，您应当自行判断该广告或推广信息的真实性和可靠性并为自己的判断行为负责。除法律法规明确规定外，您因该广告或推广信息进行的购买、交易或因前述内容遭受的损害或损失，应自行承担，我们不予承担责任。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="八知识产权">八、知识产权<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%85%AB%E7%9F%A5%E8%AF%86%E4%BA%A7%E6%9D%83" class="hash-link" aria-label="八、知识产权的直接链接" title="八、知识产权的直接链接">​</a></h2>
<ol>
<li>
<p>轻卡记及相关服务中提供的内容（包括但不限于软件、技术、程序、网页、文字、图片、图像、音频、视频、图表、版面设计、电子文档等）的知识产权属于我们所有。我们提供相关服务时所依托的软件的著作权、专利权及其他知识产权均归我们所有。未经我们书面许可，任何人不得擅自使用（包括但不限于通过任何机器人、蜘蛛等程序或设备监视、复制、传播、展示、镜像、上载、下载）轻卡记及相关服务中的内容。</p>
</li>
<li>
<p>我们拥有轻卡记内容及资源的版权，受国家知识产权保护，享有对轻卡记各种协议、声明的修改权；未经我们的明确书面许可，任何第三方不得为任何非私人或商业目的获取或使用轻卡记的任何部分或通过轻卡记可直接或间接获得的任何内容、服务或资料。</p>
</li>
<li>
<p>您在任何情况下都不要私自使用我们的包括但不限于"轻卡记"等在内的任何商标、服务标记、商号、域名、网站名称或其他显著品牌特征等（以下统称为"标识"）。未经我们事先书面同意，您不得将本条款前述标识以单独或结合任何方式展示、使用或申请注册商标、进行域名注册等，也不得实施向他人明示或暗示有权展示、使用、或其他有权处理该些标识的行为。由于您违反本协议使用上述商标、标识等给轻卡记或他人造成损失的，由您承担全部法律责任。</p>
</li>
<li>
<p>您理解并同意，在使用轻卡记及相关服务时发布上传的文字、图片、视频、音频等均由您原创或已获合法授权。</p>
</li>
<li>
<p>您在使用轻卡记及相关服务时发布上传的文字、图片、视频、音频等内容的所有权归您本人所有。</p>
</li>
<li>
<p><strong>您接受本协议，即表明您同意将您在轻卡记发表的图片、视频、文字等内容授权给我们及我们的关联公司在全球范围内、免费、非独家、永久、可再许可（通过多层次）的权利（包括但不限于复制权、信息网络传播权、改编权、汇编权、修改权、翻译权、制作衍生品、表演和展示等权利），使用范围包括但不限于在轻卡记及所有子产品、轻卡记官网、应用程序、产品或终端设备等。您在此确认并同意，上述权利的授予包括在轻卡记及子产品、公司品牌有关的任何的宣传、推广、广告和/或相关营销中使用和以其他方式开发内容（全部或部分）的权利和许可。为避免疑惑，您同意，上述权利的授权包括许可使用、复制、展示、传播您拥有或被许可使用并植入内容中的个人形象、肖像、姓名及其他物料、素材等。您授权轻卡记有权就任何主体对以上授权内容的侵权而单独提起诉讼，并获得全部赔偿。本协议已经构成《著作权法》所规定的书面协议，其效力及于您在轻卡记发布的任何受著作权法保护的作品内容，无论该内容形成于本协议签订前还是本协议签订后。</strong></p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="九未成年人使用条款">九、未成年人使用条款<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E4%B9%9D%E6%9C%AA%E6%88%90%E5%B9%B4%E4%BA%BA%E4%BD%BF%E7%94%A8%E6%9D%A1%E6%AC%BE" class="hash-link" aria-label="九、未成年人�使用条款的直接链接" title="九、未成年人使用条款的直接链接">​</a></h2>
<ol>
<li>
<p>若您未满18周岁，您应在监护人监护、指导并获得监护人同意情况下阅读本协议和使用轻卡记及相关服务。</p>
</li>
<li>
<p><strong>请您理解，轻卡记上的减肥、运动、健康评测等相关内容主要是针对成年人设计的，未成年人仅供参考，请您务必在监护人及执业医师的指导下使用。</strong></p>
</li>
<li>
<p>我们重视对未成年人个人信息的保护，未成年用户在填写个人信息时，请加强个人保护意识并谨慎对待，请在监护人指导时正确使用轻卡记相关服务。如因您违反法律法规、本协议内容，则您及您的监护人应依照法律规定承担因此而导致的一切后果。</p>
</li>
<li>
<p>使用轻卡记及相关服务应该在其监护人的监督指导下，在合理范围内正确学习使用网络，避免沉迷虚拟的网络空间，养成良好上网习惯。并遵守如下规则：</p>
<ul>
<li>（1）要善于网上学习，不浏览不良信息；</li>
<li>（2）要诚实友好交流，不侮辱欺诈他人；</li>
<li>（3）要增强自护意识，不随意约会网友；</li>
<li>（4）要维护网络安全，不破坏网络秩序；</li>
<li>（5）要有益身心健康，不沉溺虚拟时空。</li>
</ul>
</li>
<li>
<p>为更好的保护未成年人隐私权益，您应慎重发布包含未成年人素材的内容，一经发布，即视为您同意轻卡记及相关服务展示未成年人的信息、肖像、声音等，且允许轻卡记依据本协议使用、处理该等与未成年人相关的内容。</p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十侵权投诉与处理">十、侵权投诉与处理<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%8D%81%E4%BE%B5%E6%9D%83%E6%8A%95%E8%AF%89%E4%B8%8E%E5%A4%84%E7%90%86" class="hash-link" aria-label="十、侵权投诉与处理的直接链接" title="十、侵权投诉与处理的直接链接">​</a></h2>
<ol>
<li>
<p>任何第三人据相关法律法规的规定，认为轻卡记上任何用户发布的内容存在侵犯其合法权益的行为，应当向我们提交书面的侵权投诉申请并提供相关证明材料，侵权投诉申请一经核实，我们将会采取删除、屏蔽、断开链接等必要措施维护他人合法权益。</p>
</li>
<li>
<p>侵权投诉必须包含下述信息：</p>
<ul>
<li>（1）被侵权人对被侵权内容享有相应权利的证明材料。</li>
<li>（2）侵权信息或作品在轻卡记的具体链接或截图。</li>
<li>（3）被侵权人的诉求。</li>
<li>（4）侵权投诉人的联络方式，以便我们能及时回复您的投诉，最好包括电子邮件地址、电话号码或手机等。</li>
<li>（5）投诉内容须纳入以下声明："本人/本公司秉承诚信原则，有证据认为该对象侵害本人或他人的合法权益。本人/本公司承诺投诉全部信息真实、准确，否则自愿承担一切后果。"</li>
<li>（6）本人亲笔签字并注明日期，投诉人为公司的，还需要有公司的公章，如代理他人投诉的，必须出具授权人本人签字或盖章的授权书。</li>
</ul>
</li>
<li>
<p><strong>轻卡记建议您在提起投诉之前咨询法律顾问或律师，您应当确保提供的投诉信息真实、准确。轻卡记提请您注意：如果对侵权投诉不实，则您可能承担因此而产生的法律责任。</strong></p>
</li>
<li>
<p><strong>我们对投诉内容不负有实质审查义务，若投诉人提交的内容形式上满足上述要求的，我们会将投诉内容及要求发送给被投诉人，如果被投诉人未在规定时间内提供相反的证明材料或者提供的材料无法证明不存在侵权事实的，我们将会根据投诉人的请求采取相应的措施，因被投诉人怠于提供证据材料而导致信息被删、屏蔽等造成的损失，有被投诉人自行承担。</strong></p>
</li>
</ol>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十一免责�条款">十一、免责条款<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%8D%81%E4%B8%80%E5%85%8D%E8%B4%A3%E6%9D%A1%E6%AC%BE" class="hash-link" aria-label="十一、免责条款的直接链接" title="十一、免责条款的直接链接">​</a></h2>
<p><strong>1. 我们将尽力提供畅通无阻的在线服务，基于互联网的特殊性，轻卡记的网络接入服务可能受多种因素的影响出现链接受阻、受限或被终止，由此给您带来的损失、不便，除非我们有故意或重大过失，否则我们将不负任何责任。</strong></p>
<p><strong>2. 您理解并同意，在使用轻卡记及相关服务过程中，可能会遇到不可抗力等因素（不可抗力是指不能预见、不能克服并不能避免的客观事件），包括但不限于政府行为、自然灾害、网络原因、黑客攻击、战争或任何其它类似事件。出现不可抗力情况时，我们将努力在第一时间及时修复，但若不可抗力给您造成了损失，同意轻卡记不承担责任。</strong></p>
<p><strong>3. 我们不对您所发布信息的保存、修改、删除或储存失败负责。对轻卡记上的非因我们故意所导致的排字错误、疏忽等不承担责任。</strong></p>
<p><strong>4. 除非我们以书面形式明确约定，我们对于您以任何方式（包括但不限于包含、经由、连接或下载）从本软件所获得的任何内容信息，包括但不限于广告、健康减肥知识、成功故事、其他用户发布的动态等，不保证其准确性、完整性、可靠性；对于您因轻卡记上的内容信息而开展的任何行为，我们不承担责任。您应自行承担使用轻卡记上的信息内容所导致的风险。</strong></p>
<p><strong>5. 因个人体质差异，我们不保证轻卡记提供的饮食与运动方案、运动课程、健康评测等内容适合所有人，也不保证售卖的所有商品或服务的效果都能够满足您的预期效果，您应当根据自身健康状况和需求进行慎重选择，必要时请咨询专业医师。</strong></p>
<p><strong>6. 轻卡记内所有用户所发表的成功故事、动态和评论，仅代表用户个人观点，并不表示我们赞同其观点或证实其描述，我们不承担用户发表的内容引发的任何法律责任。</strong></p>
<p><strong>7. 轻卡记我们有权直接删除轻卡记内各类不符合法律或协议规定的内容，而保留不通知用户的权利。</strong></p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十二通知与通告">十二、通知与通告<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%8D%81%E4%BA%8C%E9%80%9A%E7%9F%A5%E4%B8%8E%E9%80%9A%E5%91%8A" class="hash-link" aria-label="十二、通知与通告的直接链接" title="十二、通知与通告的直接链接">​</a></h2>
<ol>
<li>所有轻卡记发送给您的通知或通告都可采用通过电子邮件、轻卡记广播或公告、微信公众号推送、短信等方式。</li>
</ol>
<p><strong>2. 轻卡记通过上述任何一种方式发送通知或通告的，除非有明确的的证据表明该等通知或通告被退回，否则将视为自发出后的24小时内（紧急通知为发出后30分钟内）您已经收到该等通知或通告。如果因为您更改联系方式而未及时更新注册信息或者其提供的注册信息是虚假的，从而导致该等通知或通告未能被您及时接收的，则视为您已经收到该等通知并应由您承担相应的责任。</strong></p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十三争议解决条款">十三、争议解决条款<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%8D%81%E4%B8%89%E4%BA%89%E8%AE%AE%E8%A7%A3%E5%86%B3%E6%9D%A1%E6%AC%BE" class="hash-link" aria-label="十三、争议解决条款的直接链接" title="十三、争议解决条款的直接链接">​</a></h2>
<ol>
<li>本协议之订立、生效、解释、修订、补充、终止、执行与争议解决均适用中华人民共和国法律；如法律无相关规定的，参照商业惯例及/或行业惯例。</li>
</ol>
<p><strong>2. 您因使用轻卡记服务所产生及与轻卡记服务有关的争议，应当友好协商解决。协商不成时，任何一方均可向吉首极客软件开发工作室所在地有管辖权的人民法院提起诉讼。且胜诉方有权要求败诉一方承担与诉讼相关的合理的交通、住宿费用、诉讼费、律师费等。</strong></p>
<p><strong>3. 轻卡记所自行维护运营或者委托第三方维护的服务器内的数据库及数据可以在诉讼中作为证据使用，您不得以该等数据库、数据为电子形式而否定其法律效力。同时，您放弃要求轻卡记对该等数据库、数据的表现形式进行公证的要求。</strong></p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="十四其他">十四、其他<a href="https://bianliangrensheng.cn/blog/qingkaji-user-policy#%E5%8D%81%E5%9B%9B%E5%85%B6%E4%BB%96" class="hash-link" aria-label="十四、其他的直接链接" title="十四、其他的直接链接">​</a></h2>
<ol>
<li>
<p>我们将视向您所提供服务内容和相应产品之特性，要求您在接受轻卡记提供的有关特定服务或产品时，遵守特定的条件和条款；如该等特定条件与条款与本协议服务条款有任何不一致之处，则以该等特定条件和条款为准。</p>
</li>
<li>
<p>本协议任一条款被视为废止、无效或不可执行，该条应视为可分的且并不影响本协议其余条款的有效性及可执行性。</p>
</li>
<li>
<p>如您对本协议或使用轻卡记及相关服务有任何问题（包括问题咨询、投诉等），请通过设置中的投诉与建议进行反馈。</p>
</li>
<li>
<p>您对本协议或者轻卡记及相关服务有任何疑问、意见、建议或者需要我们协助处理的事项，也可通过以下方式与我们联系：</p>
<ul>
<li>邮箱：<a href="mailto:aaron6666@2925.com" target="_blank" rel="noopener noreferrer" class="link">aaron6666@2925.com</a></li>
<li>微信：little_xiangzi</li>
<li>联系地址：湖南省吉首市石家冲街道西郊嘉苑</li>
</ul>
</li>
</ol>]]></content:encoded>
            <category>用户协议</category>
            <category>健康管理</category>
            <category>服务条款</category>
        </item>
        <item>
            <title><![CDATA[Ubuntu Java安装和配置环境变量：完整指南]]></title>
            <link>https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup</link>
            <guid>https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup</guid>
            <pubDate>Fri, 02 May 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍在Ubuntu Server上安装Java JDK并正确配置环境变量的完整步骤，帮助开发者快速搭建Java开发环境]]></description>
            <content:encoded><![CDATA[<p>在现代软件开发中，Java仍然是最重要的编程语言之一。作为开发者，在Ubuntu系统上正确安装Java并配置环境变量是基础技能。本文将分享个人实践经验，帮助你在Ubuntu系统上顺利完成Java环境搭建。</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-安装环境概述">🖥️ 安装环境概述<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#%EF%B8%8F-%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="🖥️ 安装环境概述的直接链接" title="🖥️ 安装环境概述的直接链接">​</a></h2>
<p>在开始安装前，先了解下我们的操作环境：</p>
<table><thead><tr><th>项目</th><th>详情</th></tr></thead><tbody><tr><td>操作系统</td><td>Ubuntu Server 22.04 LTS 64bit</td></tr><tr><td>安装包路径</td><td>/download/jdk-8u202-linux-x64.tar.gz</td></tr><tr><td>目标安装路径</td><td>/model/jdk8</td></tr></tbody></table>
<p>接下来，我会分步骤详细讲解如何完成安装和配置。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-安装步骤详解">🚀 安装步骤详解<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🚀 安装步骤详解的直接链接" title="🚀 安装步骤详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一创建安装目录">📂 一、创建安装目录<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E4%B8%80%E5%88%9B%E5%BB%BA%E5%AE%89%E8%A3%85%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="📂 一、创建安装目录的直接链接" title="📂 一、创建安装目录的直接链接">​</a></h3>
<p>首先，我们需要创建一个专门的目录来存放JDK：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/jdk8</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>使用 <code>-p</code> 参数可以确保即使父目录不存在也能一并创建，这是一个很实用的小技巧。</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二解压jdk安装包">📦 二、解压JDK安装包<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E4%BA%8C%E8%A7%A3%E5%8E%8Bjdk%E5%AE%89%E8%A3%85%E5%8C%85" class="hash-link" aria-label="📦 二、解压JDK安装包的直接链接" title="📦 二、解压JDK安装包的直接链接">​</a></h3>
<p>有了目标目录后，接下来将下载好的JDK压缩包解压到该目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">tar</span><span class="token plain"> --strip-components</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-xzvf</span><span class="token plain"> /download/jdk-8u202-linux-x64.tar.gz </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-C</span><span class="token plain"> /model/jdk8</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>命令参数说明</div><div class="admonitionContent_VWDh"><p><code>--strip-components=1</code> 参数很重要，它可以去掉压缩包内的顶层目录，直接将内容解压到目标目录，避免多余的嵌套目录。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-环境变量配置">⚙️ 环境变量配置<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#%EF%B8%8F-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="⚙️ 环境变量配置的直接链接" title="⚙️ 环境变量配置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-创建环境变量配置文件">🔧 创建环境变量配置文件<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E5%88%9B%E5%BB%BA%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" class="hash-link" aria-label="🔧 创建环境变量配置文件的直接链接" title="🔧 创建环境变量配置文件的直接链接">​</a></h3>
<p>Java安装完成后，最关键的步骤是配置环境变量，让系统能够找到Java命令：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /etc/profile.d/jdk8.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>你可以使用其他文本编辑器如vim来代替nano，根据个人习惯选择即可。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-编写环境变量内容">📝 编写环境变量内容<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E7%BC%96%E5%86%99%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E5%86%85%E5%AE%B9" class="hash-link" aria-label="📝 编写环境变量内容的直接链接" title="📝 编写环境变量内容的直接链接">​</a></h3>
<p>在打开的编辑器中，你需要添加以下内容：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">export</span><span class="token plain"> </span><span class="token assign-left variable" style="color:hsl(221, 87%, 60%)">JAVA_HOME</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">/model/jdk8</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">export</span><span class="token plain"> </span><span class="token assign-left variable environment constant" style="color:hsl(35, 99%, 36%)">PATH</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token variable" style="color:hsl(221, 87%, 60%)">$JAVA_HOME</span><span class="token plain">/bin:</span><span class="token environment constant" style="color:hsl(35, 99%, 36%)">$PATH</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>保存并退出编辑器（在nano中，按Ctrl+O保存，然后Ctrl+X退出）。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-使环境变量配置生效">🔄 使环境变量配置生效<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E4%BD%BF%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE%E7%94%9F%E6%95%88" class="hash-link" aria-label="🔄 使环境变量配置生效的直接链接" title="🔄 使环境变量配置生效的直接链接">​</a></h3>
<p>配置文件创建后，需要赋予执行权限并使其立即生效：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> +x /etc/profile.d/jdk8.sh</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">source</span><span class="token plain"> /etc/profile.d/jdk8.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-验证安装成功">✅ 验证安装成功<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E9%AA%8C%E8%AF%81%E5%AE%89%E8%A3%85%E6%88%90%E5%8A%9F" class="hash-link" aria-label="✅ 验证安装成功的直接链接" title="✅ 验证安装成功的直接链接">​</a></h2>
<p>安装完成后，可以通过以下命令验证Java是否安装成功：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">java</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-version</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">javac </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-version</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果显示了版本信息，说明Java安装和环境变量配置成功了！</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-常见问题解决">🔍 常见问题解决<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3" class="hash-link" aria-label="🔍 常见问题解决的直接链接" title="🔍 常见问题解决的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-环境变量不生效">❓ 环境变量不生效<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E4%B8%8D%E7%94%9F%E6%95%88" class="hash-link" aria-label="❓ 环境变量不生效的直接链接" title="❓ 环境变量不生效的直接链接">​</a></h3>
<p>如果执行<code>java -version</code>命令时提示找不到命令，可能是环境变量没有生效：</p>
<ul>
<li>检查<code>/etc/profile.d/jdk8.sh</code>文件内容是否正确</li>
<li>确认该文件有执行权限</li>
<li>尝试重新登录或重启系统</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-权限不足问题">❓ 权限不足问题<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E6%9D%83%E9%99%90%E4%B8%8D%E8%B6%B3%E9%97%AE%E9%A2%98" class="hash-link" aria-label="❓ 权限不足问题的直接链接" title="❓ 权限不足问题的直接链接">​</a></h3>
<p>在安装过程中可能遇到权限不足的问题，记得在命令前加上<code>sudo</code>。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结ubuntu上安装java的关键点">📌 总结：Ubuntu上安装Java的关键点<a href="https://bianliangrensheng.cn/blog/ubuntu-java-installation-environment-setup#-%E6%80%BB%E7%BB%93ubuntu%E4%B8%8A%E5%AE%89%E8%A3%85java%E7%9A%84%E5%85%B3%E9%94%AE%E7%82%B9" class="hash-link" aria-label="📌 总结：Ubuntu上安装Java的关键点的直接链接" title="📌 总结：Ubuntu上安装Java的关键点的直接链接">​</a></h2>
<p>回顾整个安装过程，成功安装Java的关键在于：</p>
<ol>
<li>正确创建和选择安装目录</li>
<li>正确解压JDK安装包</li>
<li>科学配置环境变量</li>
<li>验证安装结果</li>
</ol>
<p>通过这篇指南，你应该已经成功在Ubuntu Server 22.04上安装了Java 8并配置好了环境变量。这为你后续的Java开发工作打下了良好的基础。</p>
<hr>
<p>你有什么Java环境配置的问题或心得？欢迎在评论区分享！</p>]]></content:encoded>
            <category>Ubuntu</category>
            <category>Java</category>
            <category>环境配置</category>
        </item>
        <item>
            <title><![CDATA[Ubuntu MySQL8安装并配置环境变量：完整指南]]></title>
            <link>https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup</link>
            <guid>https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup</guid>
            <pubDate>Fri, 02 May 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍在Ubuntu Server上手动安装MySQL8数据库并正确配置环境变量的完整步骤，帮助开发者快速搭建MySQL数据库环境]]></description>
            <content:encoded><![CDATA[<p>在后端开发和数据应用中，MySQL仍然是最流行的关系型数据库之一。本文将分享如何在Ubuntu系统上手动安装MySQL8并正确配置环境变量，这种方式虽然比使用apt安装复杂，但能让你更好地理解MySQL的工作原理和配置细节。</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-安装环境概述">🖥️ 安装环境概述<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#%EF%B8%8F-%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="🖥️ 安装环境概述的直接链接" title="🖥️ 安装环境概述的直接链接">​</a></h2>
<p>在开始安装前，先了解下我们的操作环境和规划：</p>
<table><thead><tr><th>项目</th><th>详情</th></tr></thead><tbody><tr><td>操作系统</td><td>Ubuntu Server 22.04 LTS 64bit</td></tr><tr><td>安装包路径</td><td>/download/mysql-8.0.36-linux-glibc2.28-x86_64.tar.xz</td></tr><tr><td>目标安装路径</td><td>/model/mysql8</td></tr><tr><td>数据存储路径</td><td>/model/mysql8/data</td></tr><tr><td>日志路径</td><td>/model/mysql8/logs</td></tr></tbody></table>
<blockquote>
<p><strong>注意</strong>：这种手动安装方式比使用 apt 安装（<code>sudo apt install mysql-server</code>）要复杂，且不会自动处理依赖、系统集成（如 AppArmor）、服务管理脚本更新等问题。建议在了解其含义的情况下进行操作。</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-安装步骤详解">🚀 安装步骤详解<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🚀 安装步骤详解的直接链接" title="🚀 安装步骤详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一安装依赖">📦 一、安装依赖<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E4%B8%80%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96" class="hash-link" aria-label="📦 一、安装依赖的直接链接" title="📦 一、安装依赖的直接链接">​</a></h3>
<p>MySQL 二进制发行版需要一些基础库才能正常运行：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">apt</span><span class="token plain"> update</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">apt</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> libaio1 libncurses5 </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-y</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二创建-mysql-用户和组">👥 二、创建 MySQL 用户和组<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E4%BA%8C%E5%88%9B%E5%BB%BA-mysql-%E7%94%A8%E6%88%B7%E5%92%8C%E7%BB%84" class="hash-link" aria-label="👥 二、创建 MySQL 用户和组的直接链接" title="👥 二、创建 MySQL 用户和组的直接链接">​</a></h3>
<p>为安全起见，MySQL应该以专用的非特权用户身份运行：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">groupadd</span><span class="token plain"> mysql</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useradd</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-r</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> mysql </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-s</span><span class="token plain"> /bin/false mysql</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p><code>-r</code>选项创建系统用户，<code>-s /bin/false</code>禁止该用户登录系统，提高安全性。</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三创建所需目录">📂 三、创建所需目录<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E4%B8%89%E5%88%9B%E5%BB%BA%E6%89%80%E9%9C%80%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="📂 三、创建所需目录的直接链接" title="📂 三、创建所需目录的直接链接">​</a></h3>
<p>按规划创建安装、数据和日志目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/mysql8/data /model/mysql8/logs</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-四解压-mysql-压缩包">📦 四、解压 MySQL 压缩包<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%9B%9B%E8%A7%A3%E5%8E%8B-mysql-%E5%8E%8B%E7%BC%A9%E5%8C%85" class="hash-link" aria-label="📦 四、解压 MySQL 压缩包的直接链接" title="📦 四、解压 MySQL 压缩包的直接链接">​</a></h3>
<p>将下载好的安装包解压到目标目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># 注意：.tar.xz 文件使用 'xvf'，而不是 'z'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">tar</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-xvf</span><span class="token plain"> /download/mysql-8.0.36-linux-glibc2.28-x86_64.tar.xz --strip-components</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-C</span><span class="token plain"> /model/mysql8</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>命令参数说明</div><div class="admonitionContent_VWDh"><p><code>--strip-components=1</code> 参数可以去掉压缩包内的顶层目录，直接将内容解压到目标目录，避免多余的嵌套目录。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-五设置目录所有权和权限">🔐 五、设置目录所有权和权限<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E4%BA%94%E8%AE%BE%E7%BD%AE%E7%9B%AE%E5%BD%95%E6%89%80%E6%9C%89%E6%9D%83%E5%92%8C%E6%9D%83%E9%99%90" class="hash-link" aria-label="🔐 五、设置目录所有权和权限的直接链接" title="🔐 五、设置目录所有权和权限的直接链接">​</a></h3>
<p>确保MySQL用户对相关目录有适当权限：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chown</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-R</span><span class="token plain"> mysql:mysql /model/mysql8</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 确保mysql用户对数据和日志目录有完全权限，但其他用户（组外）没有访问权限</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-R</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">750</span><span class="token plain"> /model/mysql8/data</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-R</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">750</span><span class="token plain"> /model/mysql8/logs</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-六创建mysql配置文件mycnf">⚙️ 六、创建MySQL配置文件(my.cnf)<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#%EF%B8%8F-%E5%85%AD%E5%88%9B%E5%BB%BAmysql%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6mycnf" class="hash-link" aria-label="⚙️ 六、创建MySQL配置文件(my.cnf)的直接链接" title="⚙️ 六、创建MySQL配置文件(my.cnf)的直接链接">​</a></h3>
<p>创建并编辑配置文件：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /model/mysql8/my.cnf</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>将以下内容粘贴到编辑器中：</p>
<div class="language-ini codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-ini codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[mysqld]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># General settings</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">user                    = mysql</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">port                    = 3306</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">basedir                 = /model/mysql8</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">datadir                 = /model/mysql8/data</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">socket                  = /tmp/mysql.sock</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">pid-file                = /model/mysql8/mysql.pid</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># Logging</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">log-error               = /model/mysql8/logs/error.log</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># slow_query_log        = 1</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># slow_query_log_file   = /model/mysql8/logs/slow-query.log</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># long_query_time       = 2</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># log_queries_not_using_indexes = ON</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># Character sets</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">character-set-server    = utf8mb4</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">collation-server        = utf8mb4_unicode_ci</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># Other settings (adjust as needed)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">max_connections         = 151</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># innodb_buffer_pool_size = 1G  # Adjust based on your system RAM</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># default_authentication_plugin=caching_sha2_password # Default in MySQL 8</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[client]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">socket                  = /tmp/mysql.sock</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">default-character-set   = utf8mb4</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[mysql]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">default-character-set   = utf8mb4</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>设置配置文件所有权和权限：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chown</span><span class="token plain"> mysql:mysql /model/mysql8/my.cnf</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">644</span><span class="token plain"> /model/mysql8/my.cnf</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>配置文件说明</div><div class="admonitionContent_VWDh"><ul>
<li>默认使用utf8mb4字符集，支持完整的Unicode字符（包括表情符号）</li>
<li>日志文件位置已配置，但慢查询日志默认关闭（可取消注释开启）</li>
<li>可根据服务器内存调整InnoDB缓冲池大小（innodb_buffer_pool_size）</li>
</ul></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-七初始化mysql数据库">🗃️ 七、初始化MySQL数据库<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#%EF%B8%8F-%E4%B8%83%E5%88%9D%E5%A7%8B%E5%8C%96mysql%E6%95%B0%E6%8D%AE%E5%BA%93" class="hash-link" aria-label="🗃️ 七、初始化MySQL数据库的直接链接" title="🗃️ 七、初始化MySQL数据库的直接链接">​</a></h3>
<p>初始化数据目录并生成临时root密码：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> /model/mysql8/bin/mysqld --defaults-file</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">/model/mysql8/my.cnf </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">--initialize</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">--user</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">mysql</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>查看生成的临时密码（初始化过程中会自动生成）：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">grep</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'temporary password'</span><span class="token plain"> /model/mysql8/logs/error.log</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>记住这个临时密码，首次登录时需要用它来设置新密码。</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-八配置systemd服务">🔄 八、配置Systemd服务<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%85%AB%E9%85%8D%E7%BD%AEsystemd%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="🔄 八、配置Systemd服务的直接链接" title="🔄 八、配置Systemd服务的直接链接">​</a></h3>
<p>创建systemd服务文件，便于系统管理MySQL服务：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /etc/systemd/system/mysql.service</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>粘贴以下内容：</p>
<div class="language-ini codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-ini codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[Unit]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Description=MySQL Community Server (Manual Install)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">After=network.target</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[Service]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">User=mysql</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Group=mysql</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Type=simple</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">WorkingDirectory=/model/mysql8</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># Specify the full path to mysqld and the config file</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">ExecStart=/model/mysql8/bin/mysqld --defaults-file=/model/mysql8/my.cnf</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Restart=on-failure</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">RestartSec=5s</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">PIDFile=/model/mysql8/mysql.pid</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># LimitNOFILE=65535 # Uncomment if you need more file descriptors</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[Install]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">WantedBy=multi-user.target</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>重新加载systemd配置并设置开机自启：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl daemon-reload</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">enable</span><span class="token plain"> mysql.service</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-九启动mysql服务">▶️ 九、启动MySQL服务<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#%EF%B8%8F-%E4%B9%9D%E5%90%AF%E5%8A%A8mysql%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="▶️ 九、启动MySQL服务的直接链接" title="▶️ 九、启动MySQL服务的直接链接">​</a></h3>
<p>启动服务并检查状态：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl start mysql.service</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl status mysql.service</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果看到"active (running)"状态，表示服务已成功启动。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-十配置环境变量path">🌐 十、配置环境变量(PATH)<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%8D%81%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8Fpath" class="hash-link" aria-label="🌐 十、配置环境变量(PATH)的直接链接" title="🌐 十、配置环境变量(PATH)的直接链接">​</a></h3>
<p>创建环境变量配置文件：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /etc/profile.d/mysql.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>添加以下内容：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">export</span><span class="token plain"> </span><span class="token assign-left variable environment constant" style="color:hsl(35, 99%, 36%)">PATH</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">/model/mysql8/bin:</span><span class="token environment constant" style="color:hsl(35, 99%, 36%)">$PATH</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>保存并退出，然后更新权限并应用：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> +x /etc/profile.d/mysql.sh</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">source</span><span class="token plain"> /etc/profile.d/mysql.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>验证配置：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">which</span><span class="token plain"> mysql</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 应该输出 /model/mysql8/bin/mysql</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-十一安全设置非常重要">🔒 十一、安全设置(非常重要!)<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%8D%81%E4%B8%80%E5%AE%89%E5%85%A8%E8%AE%BE%E7%BD%AE%E9%9D%9E%E5%B8%B8%E9%87%8D%E8%A6%81" class="hash-link" aria-label="🔒 十一、安全设置(非常重要!)的直接链接" title="🔒 十一、安全设置(非常重要!)的直接链接">​</a></h3>
<p>首次登录和修改密码：</p>
<ol>
<li>
<p>找到初始化时生成的临时密码：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">grep</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'temporary password'</span><span class="token plain"> /model/mysql8/logs/error.log</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>使用临时密码登录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">mysql </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-u</span><span class="token plain"> root </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>修改root密码（首次登录会强制修改）：</p>
<div class="language-sql codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-sql codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">ALTER</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">USER</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token variable" style="color:hsl(221, 87%, 60%)">@'localhost'</span><span class="token plain"> IDENTIFIED </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">BY</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'W2sB8wXK7C17JZrn'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">FLUSH </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">PRIVILEGES</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<blockquote>
<p>请使用强密码，包含大小写字母、数字和特殊字符，长度至少12位。</p>
</blockquote>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-常见问题解决">🔍 常见问题解决<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3" class="hash-link" aria-label="🔍 常见问题解决的直接链接" title="🔍 常见问题解决的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-服务无法启动">❓ 服务无法启动<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E6%9C%8D%E5%8A%A1%E6%97%A0%E6%B3%95%E5%90%AF%E5%8A%A8" class="hash-link" aria-label="❓ 服务无法启动的直接链接" title="❓ 服务无法启动的直接链接">​</a></h3>
<p>如果MySQL服务无法启动：</p>
<ul>
<li>检查错误日志 <code>/model/mysql8/logs/error.log</code></li>
<li>确认目录权限设置正确</li>
<li>验证my.cnf配置文件是否有语法错误</li>
<li>检查系统资源是否足够（内存、磁盘空间）</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-忘记root密码">❓ 忘记root密码<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E5%BF%98%E8%AE%B0root%E5%AF%86%E7%A0%81" class="hash-link" aria-label="❓ 忘记root密码的直接链接" title="❓ 忘记root密码的直接链接">​</a></h3>
<p>如果忘记了root密码，可以按以下步骤重置：</p>
<ol>
<li>停止MySQL服务：<code>sudo systemctl stop mysql.service</code></li>
<li>以跳过权限表的方式启动：<!-- -->
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> /model/mysql8/bin/mysqld --defaults-file</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">/model/mysql8/my.cnf </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">--user</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">mysql --skip-grant-tables --skip-networking </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&amp;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>无密码登录：<code>mysql -u root</code></li>
<li>重置密码：<!-- -->
<div class="language-sql codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-sql codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">FLUSH </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">PRIVILEGES</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">ALTER</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">USER</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token variable" style="color:hsl(221, 87%, 60%)">@'localhost'</span><span class="token plain"> IDENTIFIED </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">BY</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'新密码'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">FLUSH </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">PRIVILEGES</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">EXIT</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>关闭无权限验证的MySQL进程</li>
<li>正常启动服务：<code>sudo systemctl start mysql.service</code></li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-远程连接问题">❓ 远程连接问题<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E8%BF%9C%E7%A8%8B%E8%BF%9E%E6%8E%A5%E9%97%AE%E9%A2%98" class="hash-link" aria-label="❓ 远程连接问题的直接链接" title="❓ 远程连接问题的直接链接">​</a></h3>
<p>默认情况下，MySQL只允许本地连接。要启用远程连接：</p>
<ol>
<li>登录MySQL：<code>mysql -u root -p</code></li>
<li>创建允许远程连接的用户：<!-- -->
<div class="language-sql codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-sql codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">CREATE</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">USER</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'remote_user'</span><span class="token variable" style="color:hsl(221, 87%, 60%)">@'%'</span><span class="token plain"> IDENTIFIED </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">BY</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'强密码'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">GRANT</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">ALL</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">PRIVILEGES</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">ON</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">*</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token operator" style="color:hsl(221, 87%, 60%)">*</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">TO</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'remote_user'</span><span class="token variable" style="color:hsl(221, 87%, 60%)">@'%'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">FLUSH </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">PRIVILEGES</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>修改my.cnf，注释掉bind-address或设置为<code>bind-address = 0.0.0.0</code></li>
<li>重启MySQL服务：<code>sudo systemctl restart mysql.service</code></li>
<li>确保防火墙允许3306端口访问</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结ubuntu上安装mysql8的关键点">📌 总结：Ubuntu上安装MySQL8的关键点<a href="https://bianliangrensheng.cn/blog/ubuntu-mysql8-installation-environment-setup#-%E6%80%BB%E7%BB%93ubuntu%E4%B8%8A%E5%AE%89%E8%A3%85mysql8%E7%9A%84%E5%85%B3%E9%94%AE%E7%82%B9" class="hash-link" aria-label="📌 总结：Ubuntu上安装MySQL8的关键点的直接链接" title="📌 总结：Ubuntu上安装MySQL8的关键点的直接链接">​</a></h2>
<p>回顾整个安装过程，成功安装MySQL8的关键在于：</p>
<ol>
<li>正确创建用户和目录结构</li>
<li>合理配置my.cnf文件</li>
<li>设置适当的文件权限</li>
<li>正确初始化数据库</li>
<li>配置systemd服务实现自动启动</li>
<li>设置强密码保障安全</li>
</ol>
<p>这种手动安装方式虽然比apt安装复杂，但让你对MySQL的组件和配置有了更深入的了解，也能根据需要进行更精细的定制。</p>
<hr>
<p>你有什么MySQL安装或配置方面的问题？欢迎在评论区分享！</p>]]></content:encoded>
            <category>Ubuntu</category>
            <category>MySQL</category>
            <category>环境配置</category>
            <category>数据库</category>
        </item>
        <item>
            <title><![CDATA[Ubuntu Node.js 21安装并配置环境变量：完整指南]]></title>
            <link>https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup</link>
            <guid>https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup</guid>
            <pubDate>Fri, 02 May 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍在Ubuntu Server上手动安装Node.js 21并正确配置环境变量的完整步骤，帮助开发者快速搭建Node.js开发环境]]></description>
            <content:encoded><![CDATA[<p>在现代前端和后端开发中，Node.js已经成为不可或缺的运行环境。本文将分享如何在Ubuntu系统上手动安装Node.js 21并配置环境变量，这种方式比使用apt安装更灵活，让你能够轻松管理多个Node.js版本。</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-安装环境概述">🖥️ 安装环境概述<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#%EF%B8%8F-%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="🖥️ 安装环境概述的直接链接" title="🖥️ 安装环境概述的直接链接">​</a></h2>
<p>在开始安装前，先了解下我们的操作环境：</p>
<table><thead><tr><th>项目</th><th>详情</th></tr></thead><tbody><tr><td>操作系统</td><td>Ubuntu Server 22.04 LTS 64bit</td></tr><tr><td>安装包路径</td><td>/download/node-v21.7.3-linux-x64.tar.xz</td></tr><tr><td>目标安装路径</td><td>/model/node</td></tr></tbody></table>
<p>接下来，我会分步骤详细讲解如何完成安装和配置。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-安装步骤详解">🚀 安装步骤详解<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🚀 安装步骤详解的直接链接" title="🚀 安装步骤详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一创建安装目录">📂 一、创建安装目录<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E4%B8%80%E5%88%9B%E5%BB%BA%E5%AE%89%E8%A3%85%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="📂 一、创建安装目录的直接链接" title="📂 一、创建安装目录的直接链接">​</a></h3>
<p>首先，创建一个专门的目录来存放Node.js：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/node</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>使用 <code>-p</code> 参数可以确保即使父目录不存在也能一并创建，非常实用。</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二解压nodejs安装包">📦 二、解压Node.js安装包<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E4%BA%8C%E8%A7%A3%E5%8E%8Bnodejs%E5%AE%89%E8%A3%85%E5%8C%85" class="hash-link" aria-label="📦 二、解压Node.js安装包的直接链接" title="📦 二、解压Node.js安装包的直接链接">​</a></h3>
<p>将下载好的Node.js压缩包解压到目标目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">tar</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-xJf</span><span class="token plain"> /download/node-v21.7.3-linux-x64.tar.xz --strip-components</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-C</span><span class="token plain"> /model/node</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>命令参数说明</div><div class="admonitionContent_VWDh"><ul>
<li><code>-x</code>: 解压</li>
<li><code>-J</code>: 专门用于.xz格式文件</li>
<li><code>-f</code>: 指定文件</li>
<li><code>--strip-components=1</code>: 去掉压缩包内的顶层目录，直接将内容解压到目标目录</li>
</ul></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-三配置环境变量path">⚙️ 三、配置环境变量(PATH)<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#%EF%B8%8F-%E4%B8%89%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8Fpath" class="hash-link" aria-label="⚙️ 三、配置环境变量(PATH)的直接链接" title="⚙️ 三、配置环境变量(PATH)的直接链接">​</a></h3>
<p>为了在任何位置都能使用node和npm命令，需要配置环境变量：</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="创建环境变量配置文件">创建环境变量配置文件：<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#%E5%88%9B%E5%BB%BA%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" class="hash-link" aria-label="创建环境变量配置文件：的直接链接" title="创建环境变量配置文件：的直接链接">​</a></h4>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /etc/profile.d/nodejs.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="在编辑器中添加以下内容">在编辑器中添加以下内容：<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#%E5%9C%A8%E7%BC%96%E8%BE%91%E5%99%A8%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%BB%A5%E4%B8%8B%E5%86%85%E5%AE%B9" class="hash-link" aria-label="在编辑器中添加以下内容：的直接链接" title="在编辑器中添加以下内容：的直接链接">​</a></h4>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># Node.js environment variables</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">export</span><span class="token plain"> </span><span class="token assign-left variable" style="color:hsl(221, 87%, 60%)">NODE_HOME</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">/model/node</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">export</span><span class="token plain"> </span><span class="token assign-left variable environment constant" style="color:hsl(35, 99%, 36%)">PATH</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token variable" style="color:hsl(221, 87%, 60%)">$NODE_HOME</span><span class="token plain">/bin:</span><span class="token environment constant" style="color:hsl(35, 99%, 36%)">$PATH</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>保存并退出编辑器（在nano中，按Ctrl+X，然后按Y确认保存，最后按Enter）。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="设置文件权限并应用">设置文件权限并应用：<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#%E8%AE%BE%E7%BD%AE%E6%96%87%E4%BB%B6%E6%9D%83%E9%99%90%E5%B9%B6%E5%BA%94%EF%BF%BD%E7%94%A8" class="hash-link" aria-label="设置文件权限并应用：的直接链接" title="设置文件权限并应用：的直接链接">​</a></h4>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> +x /etc/profile.d/nodejs.sh</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">source</span><span class="token plain"> /etc/profile.d/nodejs.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-四验证安装成功">✅ 四、验证安装成功<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E5%9B%9B%E9%AA%8C%E8%AF%81%E5%AE%89%E8%A3%85%E6%88%90%E5%8A%9F" class="hash-link" aria-label="✅ 四、验证安装成功的直接链接" title="✅ 四、验证安装成功的直接链接">​</a></h3>
<p>验证Node.js是否成功安装和配置：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">node</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-v</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果显示了版本信息（如<code>v21.7.3</code>），说明Node.js安装和环境变量配置成功了！</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-五配置npm镜像源">🔄 五、配置npm镜像源<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E4%BA%94%E9%85%8D%E7%BD%AEnpm%E9%95%9C%E5%83%8F%E6%BA%90" class="hash-link" aria-label="🔄 五、配置npm镜像源的直接链接" title="🔄 五、配置npm镜像源的直接链接">​</a></h3>
<p>npm是Node.js的包管理器，可以配置镜像源以加快下载速度：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> config </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">set</span><span class="token plain"> registry https://registry.npmjs.org </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">--global</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>这里使用了官方源，如果你在中国大陆，可以考虑使用淘宝镜像源以加快下载速度：<code>https://registry.npmmirror.com</code></p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-进阶配置">🌟 进阶配置<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E8%BF%9B%E9%98%B6%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="🌟 进阶配置的直接链接" title="🌟 进阶配置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一npm全局包配置">📊 一、npm全局包配置<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E4%B8%80npm%E5%85%A8%E5%B1%80%E5%8C%85%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="📊 一、npm全局包配置的直接链接" title="📊 一、npm全局包配置的直接链接">​</a></h3>
<p>你可能需要配置npm全局包的安装路径，避免使用sudo：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> ~/.npm-global</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> config </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">set</span><span class="token plain"> prefix </span><span class="token string" style="color:hsl(119, 34%, 47%)">'~/.npm-global'</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>然后将这个路径添加到环境变量中：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">echo</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'export PATH=~/.npm-global/bin:$PATH'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;&gt;</span><span class="token plain"> ~/.profile</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">source</span><span class="token plain"> ~/.profile</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-二安装常用开发工具">🛠️ 二、安装常用开发工具<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#%EF%B8%8F-%E4%BA%8C%E5%AE%89%E8%A3%85%E5%B8%B8%E7%94%A8%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="🛠️ 二、安装常用开发工具的直接链接" title="🛠️ 二、安装常用开发工具的直接链接">​</a></h3>
<p>Node.js安装完成后，你可能需要安装一些常用的开发工具：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># 安装yarn包管理器</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">yarn</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 安装前端构建工具</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> webpack webpack-cli</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 安装流行的框架CLI</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> @vue/cli</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> create-react-app</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-常见问题解决">🔍 常见问题解决<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3" class="hash-link" aria-label="🔍 常见问题解决的直接链接" title="🔍 常见问题解决的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-权限不足问题">❓ 权限不足问题<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E6%9D%83%E9%99%90%E4%B8%8D%E8%B6%B3%E9%97%AE%E9%A2%98" class="hash-link" aria-label="❓ 权限不足问题的直接链接" title="❓ 权限不足问题的直接链接">​</a></h3>
<p>如果遇到"permission denied"错误：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># 方法1：使用sudo（临时解决方案）</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> package-name</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 方法2：修改npm全局包路径（推荐）</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> ~/.npm-global</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> config </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">set</span><span class="token plain"> prefix </span><span class="token string" style="color:hsl(119, 34%, 47%)">'~/.npm-global'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">echo</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'export PATH=~/.npm-global/bin:$PATH'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;&gt;</span><span class="token plain"> ~/.profile</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">source</span><span class="token plain"> ~/.profile</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-环境变量未生效">❓ 环境变量未生效<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E6%9C%AA%E7%94%9F%E6%95%88" class="hash-link" aria-label="❓ 环境变量未生效的直接链接" title="❓ 环境变量未生效的直接链接">​</a></h3>
<p>如果node命令无法找到：</p>
<ul>
<li>确认<code>/etc/profile.d/nodejs.sh</code>文件内容正确</li>
<li>尝试重新登录终端或重启系统</li>
<li>临时解决方案：直接使用完整路径<code>/model/node/bin/node</code></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-npm包安装失败">❓ npm包安装失败<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-npm%E5%8C%85%E5%AE%89%E8%A3%85%E5%A4%B1%E8%B4%A5" class="hash-link" aria-label="❓ npm包安装失败的直接链接" title="❓ npm包安装失败的直接链接">​</a></h3>
<p>如果npm安装包时失败：</p>
<ul>
<li>检查网络连接</li>
<li>尝试清除npm缓存：<code>npm cache clean --force</code></li>
<li>检查包名称是否正确</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结ubuntu上安装nodejs-21的关键点">📌 总结：Ubuntu上安装Node.js 21的关键点<a href="https://bianliangrensheng.cn/blog/ubuntu-node21-installation-environment-setup#-%E6%80%BB%E7%BB%93ubuntu%E4%B8%8A%E5%AE%89%E8%A3%85nodejs-21%E7%9A%84%E5%85%B3%E9%94%AE%E7%82%B9" class="hash-link" aria-label="📌 总结：Ubuntu上安装Node.js 21的关键点的直接链接" title="📌 总结：Ubuntu上安装Node.js 21的关键点的直接链接">​</a></h2>
<p>回顾整个安装过程，成功安装Node.js的关键在于：</p>
<ol>
<li>选择正确的Node.js版本和安装包</li>
<li>正确解压并放置文件</li>
<li>科学配置环境变量</li>
<li>配置适合自己的npm镜像源</li>
</ol>
<p>这种手动安装方式虽然比apt安装稍微复杂，但它给你提供了更大的灵活性，特别是当你需要在同一系统上管理多个Node.js版本时。</p>
<hr>
<p>你有什么Node.js环境配置的问题或心得？欢迎在评论区分享！</p>]]></content:encoded>
            <category>Ubuntu</category>
            <category>Node.js</category>
            <category>环境配置</category>
            <category>前端开发</category>
        </item>
        <item>
            <title><![CDATA[防抖与节流：前端性能优化的必备技巧]]></title>
            <link>https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation</link>
            <guid>https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation</guid>
            <pubDate>Mon, 21 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[深入解析防抖(Debounce)与节流(Throttle)的原理、区别及实现方法，通过实际案例展示如何优化高频事件处理，提升前端应用性能。]]></description>
            <content:encoded><![CDATA[<p>🚀 在前端开发中，我们经常需要处理频繁触发的事件，如滚动、调整窗口大小、按键操作等。如果不加以控制，这些事件可能导致大量回调函数执行，造成性能问题和糟糕的用户体验。今天，我要介绍两个解决这类问题的实用技巧：<strong>防抖(Debounce)</strong> 和 <strong>节流(Throttle)</strong>。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一什么是防抖和节流">🔍 一、什么是防抖和节流<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#-%E4%B8%80%E4%BB%80%E4%B9%88%E6%98%AF%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81" class="hash-link" aria-label="🔍 一、什么是防抖和节流的直接链接" title="🔍 一、什么是防抖和节流的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="11-基本概念">1.1 基本概念<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#11-%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5" class="hash-link" aria-label="1.1 基本概念的直接链接" title="1.1 基本概念的直接链接">​</a></h3>
<p>防抖和节流的本质都是<strong>优化高频率执行代码的手段</strong>。在浏览器中，像 <code>resize</code>、<code>scroll</code>、<code>keypress</code>、<code>mousemove</code> 等事件可能会连续不断地触发，导致处理函数被频繁调用，消耗大量计算资源，降低页面性能甚至导致卡顿。</p>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>简单理解</div><div class="admonitionContent_VWDh"><ul>
<li><strong>节流(Throttle)</strong>: 控制函数执行频率，一段时间内只执行一次</li>
<li><strong>防抖(Debounce)</strong>: 延迟函数执行，多次触发时只执行最后一次（或第一次）</li>
</ul></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="12-形象比喻电梯的运行策略">1.2 形象比喻：电梯的运行策略<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#12-%E5%BD%A2%E8%B1%A1%E6%AF%94%E5%96%BB%E7%94%B5%E6%A2%AF%E7%9A%84%E8%BF%90%E8%A1%8C%E7%AD%96%E7%95%A5" class="hash-link" aria-label="1.2 形象比喻：电梯的运行策略的直接链接" title="1.2 形象比喻：电梯的运行策略的直接链接">​</a></h3>
<p>想象一下每天上班时大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应：</p>
<p>🏢 <strong>电梯策略（假设超时设定为15秒）</strong>：</p>
<ul>
<li><strong>节流版电梯</strong>：第一个人进来后，电梯15秒后准时运送。不管期间又有多少人进来，都不会影响这个15秒的定时。</li>
<li><strong>防抖版电梯</strong>：第一个人进来后，电梯等待15秒。如果期间又有人进来，15秒等待重新计时。直到最后15秒没有新人进来，才开始运送。</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-二实现方式">🛠️ 二、实现方式<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#%EF%B8%8F-%E4%BA%8C%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F" class="hash-link" aria-label="🛠️ 二、实现方式的直接链接" title="🛠️ 二、实现方式的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="21-节流throttle的实现">2.1 节流(Throttle)的实现<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#21-%E8%8A%82%E6%B5%81throttle%E7%9A%84%E5%AE%9E%E7%8E%B0" class="hash-link" aria-label="2.1 节流(Throttle)的实现的直接链接" title="2.1 节流(Throttle)的实现的直接链接">​</a></h3>
<p>节流的核心是：<strong>在一段时间内，无论触发多少次函数，都只执行一次</strong>。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="211-时间戳实现方式">2.1.1 时间戳实现方式<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#211-%E6%97%B6%E9%97%B4%E6%88%B3%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F" class="hash-link" aria-label="2.1.1 时间戳实现方式的直接链接" title="2.1.1 时间戳实现方式的直接链接">​</a></h4>
<p>使用时间戳实现的节流函数，会在触发事件时立即执行，但后续只有达到间隔时间才会再次执行。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> delay </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> lastTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> nowTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">nowTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> lastTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;=</span><span class="token plain"> delay</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            lastTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> nowTime</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>特点：首次触发会立即执行，停止触发后无法再次执行</p>
</blockquote>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="212-定时器实现方式">2.1.2 定时器实现方式<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#212-%E5%AE%9A%E6%97%B6%E5%99%A8%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F" class="hash-link" aria-label="2.1.2 定时器实现方式的直接链接" title="2.1.2 定时器实现方式的直接链接">​</a></h4>
<p>使用定时器实现的节流函数，会在延迟后才第一次执行，之后按照间隔执行。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> delay </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> delay</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>特点：首次触发会延迟执行，停止触发后依然会执行最后一次</p>
</blockquote>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="213-结合版更精确的控制">2.1.3 结合版（更精确的控制）<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#213-%E7%BB%93%E5%90%88%E7%89%88%E6%9B%B4%E7%B2%BE%E7%A1%AE%E7%9A%84%E6%8E%A7%E5%88%B6" class="hash-link" aria-label="2.1.3 结合版（更精确的控制）的直接链接" title="2.1.3 结合版（更精确的控制）的直接链接">​</a></h4>
<p>结合时间戳和定时器，实现既立即执行，又能确保最后一次触发后还能执行的节流函数。</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> delay </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> currentTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> remaining </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> delay </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">currentTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> startTime</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> context </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">remaining </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> remaining</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="22-防抖debounce的实现">2.2 防抖(Debounce)的实现<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#22-%E9%98%B2%E6%8A%96debounce%E7%9A%84%E5%AE%9E%E7%8E%B0" class="hash-link" aria-label="2.2 防抖(Debounce)的实现的直接链接" title="2.2 防抖(Debounce)的实现的直接链接">​</a></h3>
<p>防抖的核心是：<strong>延迟执行，若在等待时间内再次触发，则重新计时</strong>。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="221-基础版本">2.2.1 基础版本<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#221-%E5%9F%BA%E7%A1%80%E7%89%88%E6%9C%AC" class="hash-link" aria-label="2.2.1 基础版本的直接链接" title="2.2.1 基础版本的直接链接">​</a></h4>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> wait </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> context </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> wait</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="222-支持立即执行的防抖">2.2.2 支持立即执行的防抖<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#222-%E6%94%AF%E6%8C%81%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E7%9A%84%E9%98%B2%E6%8A%96" class="hash-link" aria-label="2.2.2 支持立即执行的防抖的直接链接" title="2.2.2 支持立即执行的防抖的直接链接">​</a></h4>
<p>有时我们希望第一次触发能立即执行，后续触发才进行防抖处理：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> wait </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> immediate </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> context </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">immediate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 是否需要立即执行</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> callNow </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> wait</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">callNow</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> wait</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="23-封装成工具函数">2.3 封装成工具函数<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#23-%E5%B0%81%E8%A3%85%E6%88%90%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0" class="hash-link" aria-label="2.3 封装成工具函数的直接链接" title="2.3 封装成工具函数的直接链接">​</a></h3>
<p>为了方便使用，我们可以将它们封装成工具函数，并添加取消功能：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 节流工具函数</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> delay </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">throttled</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> currentTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> remaining </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> delay </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">currentTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> startTime</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> context </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">remaining </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> remaining</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    throttled</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method-variable function-variable method function property-access" style="color:hsl(221, 87%, 60%)">cancel</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        startTime </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> throttled</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 防抖工具函数</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> wait </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> immediate </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">debounced</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> context </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">immediate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> callNow </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> wait</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">callNow</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">apply</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> wait</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    debounced</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method-variable function-variable method function property-access" style="color:hsl(221, 87%, 60%)">cancel</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        timer </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> debounced</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三区别与选择">🔄 三、区别与选择<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#-%E4%B8%89%E5%8C%BA%E5%88%AB%E4%B8%8E%E9%80%89%E6%8B%A9" class="hash-link" aria-label="🔄 三、区别与选择的直接链接" title="🔄 三、区别与选择的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="31-原理对比">3.1 原理对比<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#31-%E5%8E%9F%E7%90%86%E5%AF%B9%E6%AF%94" class="hash-link" aria-label="3.1 原理对比的直接链接" title="3.1 原理对比的直接链接">​</a></h3>
<table><thead><tr><th>特性</th><th>防抖(Debounce)</th><th>节流(Throttle)</th></tr></thead><tbody><tr><td>执行时机</td><td>等待一段时间后执行</td><td>按照一定频率执行</td></tr><tr><td>触发频率变化时</td><td>重新计时</td><td>不影响执行频率</td></tr><tr><td>适用场景</td><td>输入框搜索、窗口调整大小</td><td>滚动加载、按钮点击</td></tr><tr><td>执行次数</td><td>连续触发只执行最后一次</td><td>每间隔时间执行一次</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="32-可视化比较">3.2 可视化比较<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#32-%E5%8F%AF%E8%A7%86%E5%8C%96%E6%AF%94%E8%BE%83" class="hash-link" aria-label="3.2 可视化比较的直接链接" title="3.2 可视化比较的直接链接">​</a></h3>
<p>假设在2秒内，我们频繁触发一个事件10次，设置时间间隔为500ms：</p>
<ul>
<li><strong>节流</strong>：会按照500ms的频率执行，约执行4次</li>
<li><strong>防抖</strong>：只会在最后一次触发后的500ms执行，只执行1次</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_Ax3r alert alert--info"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>图形化理解</div><div class="admonitionContent_VWDh"><p>假设触发事件的时间点如下所示：</p><p>------o------o--o--o-o-o-o--o------o------o---&gt; 时间轴
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↑
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5</p><ul>
<li>节流情况下的执行：1 3 5 (固定间隔执行)</li>
<li>防抖情况下的执行：5 (最后一次触发后执行)</li>
</ul></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-四应用场景">🎯 四、应用场景<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#-%E5%9B%9B%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF" class="hash-link" aria-label="🎯 四、应用场景的直接链接" title="🎯 四、应用场景的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="41-防抖debounce应用场景">4.1 防抖(Debounce)应用场景<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#41-%E9%98%B2%E6%8A%96debounce%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF" class="hash-link" aria-label="4.1 防抖(Debounce)应用场景的直接链接" title="4.1 防抖(Debounce)应用场景的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>防抖适用于</div><div class="admonitionContent_VWDh"><p>只关心最后一次操作，或者需要等待操作完全停止后再执行的场景</p></div></div>
<ol>
<li>
<p><strong>搜索框输入</strong>：用户输入完毕后再发送请求，避免频繁请求</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> searchInput </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'search'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> handleSearch </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'搜索:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// API请求</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">searchInput</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">addEventListener</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'input'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> handleSearch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>窗口大小调整</strong>：调整完成后再重新计算布局</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> handleResize </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'窗口大小调整完成'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 重新计算布局</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">300</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">window</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">addEventListener</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'resize'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> handleResize</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>表单验证</strong>：用户输入完成后再进行验证</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> phoneInput </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'phone'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> validatePhone </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> phone </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> isValid </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token regex regex-delimiter" style="color:hsl(119, 34%, 47%)">/</span><span class="token regex regex-source language-regex anchor function" style="color:hsl(221, 87%, 60%)">^</span><span class="token regex regex-source language-regex" style="color:hsl(119, 34%, 47%)">1</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token regex regex-source language-regex char-class range" style="color:hsl(119, 34%, 47%)">3</span><span class="token regex regex-source language-regex char-class range range-punctuation operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token regex regex-source language-regex char-class range" style="color:hsl(119, 34%, 47%)">9</span><span class="token regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token regex regex-source language-regex char-set class-name" style="color:hsl(35, 99%, 36%)">\d</span><span class="token regex regex-source language-regex quantifier number" style="color:hsl(35, 99%, 36%)">{9}</span><span class="token regex regex-source language-regex anchor function" style="color:hsl(221, 87%, 60%)">$</span><span class="token regex regex-delimiter" style="color:hsl(119, 34%, 47%)">/</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">test</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">phone</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">isValid</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">showError</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'请输入正确的手机号'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">hideError</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">400</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">phoneInput</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">addEventListener</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'input'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> validatePhone</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="42-节流throttle应用场景">4.2 节流(Throttle)应用场景<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#42-%E8%8A%82%E6%B5%81throttle%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF" class="hash-link" aria-label="4.2 节流(Throttle)应用场景的直接链接" title="4.2 节流(Throttle)应用场景的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>节流适用于</div><div class="admonitionContent_VWDh"><p>需要持续触发但又不希望频率过高的场景</p></div></div>
<ol>
<li>
<p><strong>滚动加载</strong>：滚动时每隔一段时间检查一次是否需要加载更多</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> handleScroll </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> scrollTop</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> scrollHeight</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> clientHeight </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">documentElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">scrollTop </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> clientHeight </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;=</span><span class="token plain"> scrollHeight </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">100</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'距离底部100px，加载更多数据'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">loadMoreData</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">300</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">window</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">addEventListener</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'scroll'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> handleScroll</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>按钮点击</strong>：防止用户快速多次点击提交按钮</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> submitBtn </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'submit'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> handleSubmit </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'提交表单'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 提交表单逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1000</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置较大的间隔，防止重复提交</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">submitBtn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">addEventListener</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'click'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> handleSubmit</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>游戏中的按键响应</strong>：控制角色移动频率</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> handleKeyDown </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">throttle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">switch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">key</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">case</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'ArrowUp'</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function" style="color:hsl(221, 87%, 60%)">moveCharacter</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'up'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">break</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">case</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'ArrowDown'</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function" style="color:hsl(221, 87%, 60%)">moveCharacter</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'down'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">break</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他按键处理</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">100</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 每100ms响应一次按键</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">window</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">addEventListener</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'keydown'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> handleKeyDown</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-五实战技巧与最佳实践">💡 五、实战技巧与最佳实践<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#-%E4%BA%94%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="💡 五、实战技巧与最佳实践的直接链接" title="💡 五、实战技巧与最佳实践的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="51-在react中使用">5.1 在React中使用<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#51-%E5%9C%A8react%E4%B8%AD%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="5.1 在React中使用的直接链接" title="5.1 在React中使用的直接链接">​</a></h3>
<p>在React组件中使用防抖和节流需要注意函数的引用问题，可以使用useCallback和useEffect来优化：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useState</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useCallback</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useEffect </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">SearchComponent</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">query</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setQuery</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">''</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">results</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setResults</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 使用useCallback包裹，确保函数引用稳定</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> debouncedSearch </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useCallback</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">async</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">searchTerm</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">searchTerm</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> response </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">fetch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">/api/search?q=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">searchTerm</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> data </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> response</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">json</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token function" style="color:hsl(221, 87%, 60%)">setResults</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'搜索出错:'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 空依赖数组，确保debounce函数只创建一次</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 处理输入变化</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleInputChange</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">setQuery</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">debouncedSearch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 组件卸载时取消防抖函数</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            debouncedSearch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">cancel</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">debouncedSearch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">                </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">                </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">query</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">                </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handleInputChange</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">                </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">搜索...</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">ul</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">                </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">results</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">map</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">item</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">li</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">item</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">id</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">item</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">li</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">ul</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="52-自定义react-hooks">5.2 自定义React Hooks<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#52-%E8%87%AA%E5%AE%9A%E4%B9%89react-hooks" class="hash-link" aria-label="5.2 自定义React Hooks的直接链接" title="5.2 自定义React Hooks的直接链接">​</a></h3>
<p>将防抖和节流封装成自定义hooks，便于在多个组件中复用：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// useDebounce.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useCallback</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useEffect</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useRef </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useDebounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">fn</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> delay </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter number" style="color:hsl(35, 99%, 36%)">500</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> deps </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> fnRef </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 更新fnRef.current为最新的fn</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        fnRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">current</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> fn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> debounced </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useCallback</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">debounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token parameter">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fnRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">current</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> delay</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">delay</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">deps</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 组件卸载时取消防抖</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            debounced</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">cancel</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">debounced</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> debounced</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 使用方式</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">SearchComponent</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">query</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setQuery</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">''</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> handleSearch </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useDebounce</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 搜索逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">fetchSearchResults</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">500</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">            </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">            </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript parameter" style="color:hsl(5, 74%, 59%)">e</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">                </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">setQuery</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">e</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">target</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">value</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">                </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">handleSearch</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">e</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">target</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">value</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">            </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">            </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">query</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="53-性能优化注意事项">5.3 性能优化注意事项<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#53-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="5.3 性能优化注意事项的直接链接" title="5.3 性能优化注意事项的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>注意事项</div><div class="admonitionContent_VWDh"><ol>
<li>选择合适的延迟时间：根据具体场景调整，通常100ms-500ms是合理范围</li>
<li>考虑移动设备：移动设备上可能需要更长的延迟时间</li>
<li>清理函数：确保在组件卸载时取消防抖/节流</li>
<li>避免闭包陷阱：在React中使用useRef保存最新状态</li>
</ol></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-六总结">📚 六、总结<a href="https://bianliangrensheng.cn/blog/debounce-throttle-explanation-implementation#-%E5%85%AD%E6%80%BB%E7%BB%93" class="hash-link" aria-label="📚 六、总结的直接链接" title="📚 六、总结的直接链接">​</a></h2>
<p>防抖和节流是前端性能优化的必备技巧，两者虽然概念相似，但使用场景和效果有明显区别：</p>
<ul>
<li><strong>防抖(Debounce)</strong>：适合处理最终状态，等待用户操作完成后再执行</li>
<li><strong>节流(Throttle)</strong>：适合控制执行频率，按时间间隔执行</li>
</ul>
<p>选择哪种技术主要取决于你希望函数如何响应：</p>
<ul>
<li>如果你想等待一系列操作完成后再执行一次，选择<strong>防抖</strong></li>
<li>如果你希望在操作过程中按固定频率执行，选择<strong>节流</strong></li>
</ul>
<p>通过合理使用这两种技术，可以显著提高应用性能和用户体验，减少不必要的计算和资源消耗。在实际项目中，防抖和节流常常是解决性能问题的第一道防线。</p>
<blockquote>
<p>💡 小提示：为了避免重复编写这些工具函数，可以考虑使用成熟的库，如lodash的<code>_.debounce</code>和<code>_.throttle</code>，它们有更完善的实现和边界情况处理。</p>
</blockquote>
<p>希望这篇文章对你理解和应用防抖与节流有所帮助！如果有任何问题或建议，欢迎在评论区留言交流。👋</p>]]></content:encoded>
            <category>JavaScript</category>
            <category>前端优化</category>
            <category>性能优化</category>
            <category>代码技巧</category>
        </item>
        <item>
            <title><![CDATA[预防Java Web应用中的文件句柄泄露：解决"Cannot delete tmp file"异常]]></title>
            <link>https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications</link>
            <guid>https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications</guid>
            <pubDate>Thu, 17 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详解如何在Java Web应用中彻底解决文件上传过程中的临时文件删除失败问题，包括IO流正确关闭、CustomMultipartFile实现和最佳实践]]></description>
            <content:encoded><![CDATA[<p>在Java Web应用程序中，特别是涉及文件上传的场景，我们经常会遇到一个令人烦恼的异常：<code>java.io.UncheckedIOException: Cannot delete temporary file</code>。这个异常不仅会导致临时文件堆积，还可能引发服务器磁盘空间不足、性能下降等一系列问题。本文将深入分析这一问题的根本原因，并提供实用的解决方案。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-问题分析">🔍 问题分析<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#-%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90" class="hash-link" aria-label="🔍 问题分析的直接链接" title="🔍 问题分析的�直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="问题表现">问题表现<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#%E9%97%AE%E9%A2%98%E8%A1%A8%E7%8E%B0" class="hash-link" aria-label="问题表现的直接链接" title="问题表现的直接链接">​</a></h3>
<p>当我们在Spring Boot应用中处理文件上传时，可能会在日志中看到类似以下的异常：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">java</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">io</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">UncheckedIOException</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token maybe-class-name">Cannot</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">delete</span><span class="token plain"> </span><span class="token constant" style="color:hsl(35, 99%, 36%)">C</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain">\</span><span class="token maybe-class-name">Users</span><span class="token plain">\</span><span class="token maybe-class-name">Administrator</span><span class="token plain">\</span><span class="token maybe-class-name">AppData</span><span class="token plain">\</span><span class="token maybe-class-name">Local</span><span class="token plain">\</span><span class="token maybe-class-name">Temp</span><span class="token plain">\tomcat</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token number" style="color:hsl(35, 99%, 36%)">8080.2454758680289202523</span><span class="token plain">\work\</span><span class="token maybe-class-name">Tomcat</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain">\localhost\</span><span class="token constant" style="color:hsl(35, 99%, 36%)">ROOT</span><span class="token plain">\upload_71a4c4af_073f_47e6_8dbc_a0e6b17aaf3f_00000006</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">tmp</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    at org</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">apache</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">tomcat</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">util</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">http</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">fileupload</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">disk</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">DiskFileItem</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">delete</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">DiskFileItem</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">java</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token number" style="color:hsl(35, 99%, 36%)">429</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    at org</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">apache</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">catalina</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">core</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">ApplicationPart</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">delete</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">ApplicationPart</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">java</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token number" style="color:hsl(35, 99%, 36%)">53</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    at org</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">springframework</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">web</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">multipart</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">support</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">StandardServletMultipartResolver</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">cleanupMultipart</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">StandardServletMultipartResolver</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">java</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token number" style="color:hsl(35, 99%, 36%)">134</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    at org</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">springframework</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">web</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">servlet</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">DispatcherServlet</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">doDispatch</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">DispatcherServlet</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">java</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token number" style="color:hsl(35, 99%, 36%)">1108</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>这表明Tomcat在尝试删除用于文件上传的临时文件时失败了。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="问题原因">问题原因<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#%E9%97%AE%E9%A2%98%E5%8E%9F%E5%9B%A0" class="hash-link" aria-label="问题原因的直接链接" title="问题原因的直接链接">​</a></h3>
<p>这个问题主要有以下几个原因：</p>
<ol>
<li>
<p><strong>文件流未正确关闭</strong>：在处理上传文件时，如果没有正确关闭输入流，文件会被JVM锁定，导致无法删除。</p>
</li>
<li>
<p><strong>重复使用MultipartFile</strong>：如果在代码中多次访问<code>MultipartFile</code>的输入流，但没有每次都关闭，就会造成资源泄露。</p>
</li>
<li>
<p><strong>跨线程访问文件</strong>：在异步处理上传文件时，可能导致在主线程尝试删除文件时，工作线程仍在使用该文件。</p>
</li>
<li>
<p><strong>Windows系统特性</strong>：在Windows系统中，如果文件仍然被进程打开，则无法删除该文件，而在Linux系统中这个问题不太明显。</p>
</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-解决方案">🛠️ 解决方案<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#%EF%B8%8F-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88" class="hash-link" aria-label="🛠️ 解决方案的直接链接" title="🛠️ 解决方案的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-正确关闭资源">1. 正确关闭资源<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#1-%E6%AD%A3%E7%A1%AE%E5%85%B3%E9%97%AD%E8%B5%84%E6%BA%90" class="hash-link" aria-label="1. 正确关闭资源的直接链接" title="1. 正确关闭资源的直接链接">​</a></h3>
<p>确保在使用<code>MultipartFile</code>后正确关闭所有打开的流：</p>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PostMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/upload"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleFileUpload</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestParam</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"file"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MultipartFile</span><span class="token plain"> file</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">InputStream</span><span class="token plain"> inputStream </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> file</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getInputStream</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 处理文件内容</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">byte</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> bytes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOUtils</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">toByteArray</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">inputStream</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 进一步处理...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"文件处理失败"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"上传失败"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"上传成功"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-使用基于内存的multipartfile实现">2. 使用基于内存的MultipartFile实现<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#2-%E4%BD%BF%E7%94%A8%E5%9F%BA%E4%BA%8E%E5%86%85%E5%AD%98%E7%9A%84multipartfile%E5%AE%9E%E7%8E%B0" class="hash-link" aria-label="2. 使用基于内存的MultipartFile实现的直接链接" title="2. 使用基于内存的MultipartFile实现的直接链接">​</a></h3>
<p>一个更彻底的解决方案是创建一个自定义的<code>MultipartFile</code>实现，将文件内容读入内存，避免使用临时文件：</p>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">CustomMultipartFile</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">implements</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MultipartFile</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">final</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">byte</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">final</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">final</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> originalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">final</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> contentType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">CustomMultipartFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">byte</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> originalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> contentType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">content </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">name </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">originalFilename </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> originalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">contentType </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> contentType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getOriginalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> originalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getContentType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> contentType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">boolean</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">isEmpty</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> content </span><span class="token operator" style="color:hsl(221, 87%, 60%)">==</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">null</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">length </span><span class="token operator" style="color:hsl(221, 87%, 60%)">==</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">long</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getSize</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">length</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">byte</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getBytes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">throws</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">InputStream</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getInputStream</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">throws</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ByteArrayInputStream</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Resource</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getResource</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ByteArrayResource</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> originalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">void</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">transferTo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">File</span><span class="token plain"> dest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">throws</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IllegalStateException</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">FileOutputStream</span><span class="token plain"> fos </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">FileOutputStream</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">dest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fos</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">write</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">void</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">transferTo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Path</span><span class="token plain"> dest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">throws</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IllegalStateException</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Files</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">write</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">dest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>在文件上传处理中使用这个自定义实现：</p>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PostMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/upload"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleFileUpload</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestParam</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"file"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MultipartFile</span><span class="token plain"> originalFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">throws</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 读取原始文件内容</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">byte</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> fileContent </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> originalFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getBytes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> originalFilename </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> originalFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getOriginalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> contentType </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> originalFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getContentType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 创建基于内存的MultipartFile</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MultipartFile</span><span class="token plain"> memoryFile </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">CustomMultipartFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            fileContent</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            originalFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            originalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            contentType</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 使用内存中的文件进行后续处理</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">processFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">memoryFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"上传成功"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-在单独的线程中处理文件">3. 在单独的线程中处理文件<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#3-%E5%9C%A8%E5%8D%95%E7%8B%AC%E7%9A%84%E7%BA%BF%E7%A8%8B%E4%B8%AD%E5%A4%84%E7%90%86%E6%96%87%E4%BB%B6" class="hash-link" aria-label="3. 在单独的线程中处理文件的直接链接" title="3. 在单独的线程中处理文件的直接链接">​</a></h3>
<p>如果需要进行大文件处理，可以考虑将文件内容复制到另一个位置，然后在单独的线程中处理：</p>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PostMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/upload"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleFileUpload</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestParam</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"file"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MultipartFile</span><span class="token plain"> file</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">throws</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">IOException</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 创建临时文件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">File</span><span class="token plain"> tempFile </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">File</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">createTempFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"processed-"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"-"</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> file</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getOriginalFilename</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 将上传的文件内容复制到临时文件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    file</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">transferTo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">tempFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 在另一个线程中处理临时文件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">CompletableFuture</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">runAsync</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">try</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function" style="color:hsl(221, 87%, 60%)">processFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">tempFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Exception</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"文件处理失败"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">finally</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">tempFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">exists</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&amp;&amp;</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">tempFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">delete</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                tempFile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">deleteOnExit</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"文件上传成功，正在后台处理"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-最佳实践">✅ 最佳实践<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="✅ 最佳实践的直接链接" title="✅ 最佳实践的直接链接">​</a></h2>
<p>为了防止Java Web应用中的文件句柄泄露，请遵循以下最佳实践：</p>
<ol>
<li>
<p><strong>始终使用try-with-resources</strong>：确保所有I/O流都在try-with-resources块中打开和关闭。</p>
</li>
<li>
<p><strong>避免多次访问同一个MultipartFile的输入流</strong>：如果需要多次读取文件内容，先将内容读入内存或复制到临时位置。</p>
</li>
<li>
<p><strong>使用内存中的MultipartFile实现</strong>：对于较小的文件（例如小于10MB），使用基于内存的自定义MultipartFile实现。</p>
</li>
<li>
<p><strong>处理大文件时拷贝后异步处理</strong>：对于大文件，先复制到应用管理的临时位置，然后异步处理。</p>
</li>
<li>
<p><strong>配置Tomcat临时目录清理</strong>：可以配置Tomcat定期清理临时目录，避免临时文件堆积。</p>
</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结">🎯 总结<a href="https://bianliangrensheng.cn/blog/preventing-file-handle-java-web-applications#-%E6%80%BB%E7%BB%93" class="hash-link" aria-label="🎯 总结的直接链接" title="🎯 总结的直接链接">​</a></h2>
<p>文件句柄泄露是Java Web应用中常见的问题，特别是在处理文件上传时。通过正确关闭资源、使用基于内存的MultipartFile实现以及实施其他最佳实践，我们可以有效防止"Cannot delete temporary file"异常的发生，提高应用程序的稳定性和性能。</p>
<p>记住，良好的资源管理是构建健壮Java应用程序的基础。无论应用程序多么复杂，始终确保资源得到正确释放，这将为你省去很多麻烦。</p>]]></content:encoded>
            <category>Java性能优化</category>
            <category>Web服务器管理</category>
            <category>资源释放</category>
            <category>异常处理</category>
            <category>Spring开发</category>
        </item>
        <item>
            <title><![CDATA[UniApp Vue3中使用uView-Plus组件库完全指南]]></title>
            <link>https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide</link>
            <guid>https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide</guid>
            <pubDate>Mon, 14 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[全面解析在UniApp Vue3项目中集成和使用uView-Plus组件库的方法，从环境搭建到高级应用，帮助开发者快速构建美观、高效的跨端应用]]></description>
            <content:encoded><![CDATA[<p>📱 UniApp配合Vue3是目前跨端开发的强大解决方案，而uView-Plus作为专为UniApp Vue3设计的组件库，能够显著提升开发效率和应用体验。本文将详细介绍如何在UniApp Vue3项目中集成和使用uView-Plus组件库，从环境配置到实战应用。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-什么是uview-plus组件库">🔍 什么是uView-Plus组件库<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%BB%80%E4%B9%88%E6%98%AFuview-plus%E7%BB%84%E4%BB%B6%E5%BA%93" class="hash-link" aria-label="🔍 什么是uView-Plus组件库的直接链接" title="🔍 什么是uView-Plus组件库的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一基本概念与优势">💡 一、基本概念与优势<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%80%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5%E4%B8%8E%E4%BC%98%EF%BF%BD%EF%BF%BD%E5%8A%BF" class="hash-link" aria-label="💡 一、基本概念与优势的直接链接" title="💡 一、基本概念与优势的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>uView-Plus定义</div><div class="admonitionContent_VWDh"><p>uView-Plus是基于UniApp框架、适配Vue3的跨平台UI组件库，支持APP、H5、微信小程序、支付宝小程序等多个平台，提供丰富的高质量组件助力开发者快速构建界面。</p></div></div>
<p><strong>uView-Plus的核心优势：</strong></p>
<ul>
<li>🔹 <strong>跨平台兼容</strong> - 一套代码，多端运行，无需复杂适配</li>
<li>🔸 <strong>组件丰富</strong> - 提供60+高质量组件，涵盖移动端各类场景</li>
<li>💎 <strong>易用高效</strong> - 简洁API设计，快速上手，大幅提升开发效率</li>
<li>🔹 <strong>主题定制</strong> - 灵活的主题配置，轻松打造品牌专属UI</li>
<li>🔸 <strong>性能优化</strong> - 组件内部优化渲染，提供流畅用户体验</li>
</ul>
<blockquote>
<p>在我负责的一个小程序项目中，采用uView-Plus替换原有UI框架后，开发效率提升了约40%，界面统一性和用户体验也得到了显著改善。</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二uview-plus与uview的区别">🧩 二、uView-Plus与uView的区别<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%BA%8Cuview-plus%E4%B8%8Euview%E7%9A%84%E5%8C%BA%E5%88%AB" class="hash-link" aria-label="🧩 二、uView-Plus与uView的区别的直接链接" title="🧩 二、uView-Plus与uView的区别的直接链接">​</a></h3>
<table><thead><tr><th>特性</th><th>uView-Plus</th><th>uView</th></tr></thead><tbody><tr><td>适配框架</td><td>Vue3</td><td>Vue2</td></tr><tr><td>组合式API</td><td>支持</td><td>不支持</td></tr><tr><td>TypeScript</td><td>完整支持</td><td>部分支持</td></tr><tr><td>Vite构建</td><td>原生支持</td><td>需配置</td></tr><tr><td>新一代组件</td><td>全部支持</td><td>部分支持</td></tr><tr><td>维护状态</td><td>活跃更新</td><td>基本维护</td></tr></tbody></table>
<p><strong>[对比说明]</strong>：uView-Plus相比原版uView，完全支持Vue3生态，使用组合式API，具有更好的TypeScript支持和更丰富的组件，同时提供Vite原生支持，开发体验更佳。</p>
<p><strong>功能对比示例：</strong></p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// uView (Vue2)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">''</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">methods</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">onChange</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> value</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// uView-Plus (Vue3)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> ref </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">''</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">onChange</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">newValue</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> newValue</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      onChange</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-环境搭建与配置">🚀 环境搭建与配置<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA%E4%B8%8E%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="🚀 环境搭建与配置的直接链接" title="🚀 环境搭建与配置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-环境要求">📊 环境要求<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E7%8E%AF%E5%A2%83%E8%A6%81%E6%B1%82" class="hash-link" aria-label="📊 环境要求的直接链接" title="📊 环境要求的直接链接">​</a></h3>
<p>在开始使用uView-Plus前，需要确保开发环境满足以下要求：</p>
<table><thead><tr><th>依赖项</th><th>最低版本</th><th>推荐版本</th></tr></thead><tbody><tr><td>Node.js</td><td>v14.0.0+</td><td>v16.0.0+</td></tr><tr><td>Vue</td><td>v3.2.0+</td><td>v3.2.45+</td></tr><tr><td>UniApp</td><td>3.0.0+</td><td>3.7.0+</td></tr><tr><td>HBuilderX</td><td>3.6.7+</td><td>3.8.0+</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-安装与集成步骤">🔄 安装与集成步骤<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E5%AE%89%E8%A3%85%E4%B8%8E%E9%9B%86%E6%88%90%E6%AD%A5%E9%AA%A4" class="hash-link" aria-label="🔄 安装与集成步骤的直接链接" title="🔄 安装与集成步骤的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-创建uniapp-vue3项目">1. 创建UniApp Vue3项目<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E5%88%9B%E5%BB%BAuniapp-vue3%E9%A1%B9%E7%9B%AE" class="hash-link" aria-label="1. 创建UniApp Vue3项目的直接链接" title="1. 创建UniApp Vue3项目的直接链接">​</a></h4>
<p>首先，使用HBuilderX创建一个基于Vue3的UniApp项目：打开HBuilderX，点击"文件" &gt; "新建" &gt; "项目"，选择"uni-app"，勾选"Vue3/TS"模板，填写项目名称后创建。</p>
<p>或者使用命令行创建：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># 安装Vue CLI</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-g</span><span class="token plain"> @vue/cli</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 创建UniApp Vue3项目</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">vue create </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> dcloudio/uni-preset-vue my-project</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 选择 Vue3 模板</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># &gt; uni-app Vue3 TypeScript</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-安装uview-plus">2. 安装uView-Plus<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E5%AE%89%E8%A3%85uview-plus" class="hash-link" aria-label="2. 安装uView-Plus的直接链接" title="2. 安装uView-Plus的直接链接">​</a></h4>
<p><strong>方法一：使用npm安装 (推荐)</strong></p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)"># 进入项目目录</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">cd</span><span class="token plain"> my-project</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 安装uView-Plus</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> uview-plus</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 或使用yarn</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">yarn</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">add</span><span class="token plain"> uview-plus</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 或使用pnpm</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">pnpm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">add</span><span class="token plain"> uview-plus</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>方法二：下载ZIP包导入</strong></p>
<p>从<span style="display:inline-flex;gap:0.25rem"><span></span><a href="https://github.com/ijry/uview-plus" target="_blank" rel="noopener noreferrer" class="link">uView-Plus官方仓库</a></span>下载ZIP包，解压后将<code>uview-plus</code>文件夹复制到项目的<code>src/uni_modules/</code>目录下。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-引入并配置">3. 引入并配置<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#3-%E5%BC%95%E5%85%A5%E5%B9%B6%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="3. 引入并配置的直接链接" title="3. 引入并配置的直接链接">​</a></h4>
<h5 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-修改mainjs">(1) 修改main.js<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E4%BF%AE%E6%94%B9mainjs" class="hash-link" aria-label="(1) 修改main.js的直接链接" title="(1) 修改main.js的直接链接">​</a></h5>
<p>在项目根目录下的<code>main.js</code>中添加以下代码：</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> createSSRApp </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'./App.vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 引入uView-Plus</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports">uviewPlus</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'uview-plus'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">createApp</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> app </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">createSSRApp</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 使用uView-Plus</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  app</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">use</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">uviewPlus</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    app</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h5 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-配置uniscss">(2) 配置uni.scss<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E9%85%8D%E7%BD%AEuniscss" class="hash-link" aria-label="(2) 配置uni.scss的直接链接" title="(2) 配置uni.scss的直接链接">​</a></h5>
<p>在项目根目录下的<code>uni.scss</code>中引入uView-Plus样式变量，以实现全局样式配置：</p>
<div class="language-scss codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-scss codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">/* uni.scss */</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 引入uView-Plus主题样式</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">@import 'uview-plus/theme.scss';</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 自定义主题颜色</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-primary: #3c9cff;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-warning: #ff9900;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-success: #19be6b;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-error: #fa3534;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-info: #909399;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 自定义字体大小</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-sm: 24rpx;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-base: 28rpx;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-lg: 32rpx;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h5 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-配置pagesjson">(3) 配置pages.json<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#3-%E9%85%8D%E7%BD%AEpagesjson" class="hash-link" aria-label="(3) 配置pages.json的直接链接" title="(3) 配置pages.json的直接链接">​</a></h5>
<p>在项目根目录下的<code>pages.json</code>中配置easycom规则，实现组件的自动引入：</p>
<div class="language-json codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-json codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// pages.json</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token property" style="color:hsl(5, 74%, 59%)">"easycom"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"autoscan"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"custom"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token property" style="color:hsl(5, 74%, 59%)">"^u--(.*)"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"uview-plus/components/u-$1/u-$1.vue"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token property" style="color:hsl(5, 74%, 59%)">"^up-(.*)"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"uview-plus/components/u-$1/u-$1.vue"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token property" style="color:hsl(5, 74%, 59%)">"^u-([^-].*)"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"uview-plus/components/u-$1/u-$1.vue"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他配置...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h5 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="4-引入uview-plus图标库-可选">(4) 引入uView-Plus图标库 (可选)<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#4-%E5%BC%95%E5%85%A5uview-plus%E5%9B%BE%E6%A0%87%E5%BA%93-%E5%8F%AF%E9%80%89" class="hash-link" aria-label="(4) 引入uView-Plus图标库 (可选)的直接链接" title="(4) 引入uView-Plus图标库 (可选)的直接链接">​</a></h5>
<p>在App.vue中引入uView-Plus图标库：</p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">scss</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css comment" style="color:hsl(230, 4%, 64%)">/* 引入uView-Plus图标库 */</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css atrule rule" style="color:hsl(35, 99%, 36%)">@import</span><span class="token style language-css atrule" style="color:hsl(35, 99%, 36%)"> </span><span class="token style language-css atrule string" style="color:hsl(119, 34%, 47%)">"uview-plus/index.scss"</span><span class="token style language-css atrule punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-验证安装成功">⚙️ 验证安装成功<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#%EF%B8%8F-%E9%AA%8C%E8%AF%81%E5%AE%89%E8%A3%85%E6%88%90%E5%8A%9F" class="hash-link" aria-label="⚙️ 验证安装成功的直接链接" title="⚙️ 验证安装成功的直接链接">​</a></h3>
<p>完成上述配置后，在页面中测试使用一个简单组件，验证安装是否成功：</p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">container</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">primary</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">uView-Plus按钮</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showToast</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">showToast</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uni</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">showToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'安装成功!'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">icon</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'success'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      showToast</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果按钮正常显示并且点击后能弹出提示，说明uView-Plus已成功安装和配置。成功的按钮显示为蓝色圆角按钮，点击后会有"安装成功"的气泡提示。</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-基础组件使用示例">🛠️ 基础组件使用示例<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#%EF%B8%8F-%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="🛠️ 基础组件使用示例的直接链接" title="🛠️ 基础组件使用示例的直接链接">​</a></h2>
<p>uView-Plus提供了丰富的基础组件，下面我们通过几个常用组件的示例来展示其使用方法。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一表单组件">💼 一、表单组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%80%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="💼 一、表单组件的直接链接" title="💼 一、表单组件的直��接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-输入框组件">1. 输入框组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E8%BE%93%E5%85%A5%E6%A1%86%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="1. 输入框组件的直接链接" title="1. 输入框组件的直接链接">​</a></h4>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">form-demo</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:model</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">formData</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">ref</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">uForm</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">label</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">用户名</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">prop</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">username</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-model</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">formData.username</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">请输入用户名</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">label</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">密码</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">prop</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">password</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-model</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">formData.password</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">password</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">请输入密码</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">primary</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">提交</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">submit</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> reactive</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> ref </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> uForm </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> formData </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">reactive</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">username</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">''</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">password</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">''</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> rules </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">username</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">required</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'请输入用户名'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">trigger</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'blur'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'change'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">password</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">required</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'请输入密码'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">trigger</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'blur'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'change'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">min</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">6</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'密码长度不能少于6位'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">trigger</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'blur'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'change'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">submit</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uForm</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">validate</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">valid</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">valid</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          uni</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">showToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'验证通过'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">icon</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'success'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      formData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      rules</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uForm</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      submit</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>表单校验</div><div class="admonitionContent_VWDh"><p>上述示例中，我们使用了uView-Plus的表单组件，并实现了表单校验功能。uView-Plus的表单校验规则与Element Plus类似，使前端开发者能够快速上手。</p></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-选择器�组件">2. 选择器组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E9%80%89%E6%8B%A9%E5%99%A8%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="2. 选择器组件的直接链接" title="2. 选择器组件的直接链接">​</a></h4>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">picker-demo</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell-group</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">title</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">选择城市</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:value</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">city ? city.label : '请选择'</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">isLink</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showPicker = true</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell-group</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-picker</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:show</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showPicker</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:columns</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">cityColumns</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@confirm</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">confirmCity</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@cancel</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showPicker = false</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-picker</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> showPicker </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> city </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> cityColumns </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">label</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'北京'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">value</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'beijing'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">label</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'上海'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">value</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'shanghai'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">label</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'广州'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">value</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'guangzhou'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">label</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'深圳'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">value</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'shenzhen'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">confirmCity</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">e</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      city</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> e</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      showPicker</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      showPicker</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      city</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      cityColumns</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      confirmCity</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二布局组件">🔄 二、布局组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%BA%8C%E5%B8%83%E5%B1%80%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="🔄 二、布局组件的直接链接" title="🔄 二、布局组件的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-栅格布局">1. 栅格布局<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E6%A0%85%E6%A0%BC%E5%B8%83%E5%B1%80" class="hash-link" aria-label="1. 栅格布局的直接链接" title="1. 栅格布局的直接链接">​</a></h4>
<p>uView-Plus提供了灵活的栅格布局系统，类似于Bootstrap，可以轻松实现复杂的页面布局：</p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">grid-demo</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-row</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">gutter</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">10</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">6</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 6</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">6</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple-light</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 6</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">6</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 6</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">6</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple-light</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 6</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-row</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-gap</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">height</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">20</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-gap</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-row</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">gutter</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">10</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">8</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 8</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">8</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple-light</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 8</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">span</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">8</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">demo-layout bg-purple</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">span: 8</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-col</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-row</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">scss</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.demo-layout</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">80</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">border-radius</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">8</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">10</span><span class="token style language-css unit">rpx</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">text-align</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> center</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">line-height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">80</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#fff</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.bg-purple</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">background</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#d3dce6</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#333</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.bg-purple-light</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">background</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#e5e9f2</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#333</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>[栅格布局效果]</strong>：上面的代码会生成一个两行的栅格系统。第一行分为四列，每列占6份(总24份)；第二行分为三列，每列占8份(总24份)。紫色和浅紫色交替展示，形成清晰的视觉分隔。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-列表组件">2. 列表组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="2. 列表组件的直接链接" title="2. 列表组件的直接链接">​</a></h4>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">list-demo</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@scrolltolower</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">loadMore</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list-item</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-for</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">(item, index) in listData</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:key</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">index</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:title</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.title</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:label</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.description</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:icon</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.icon</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">isLink</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-loadmore</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:status</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">loadStatus</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> reactive </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> listData </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> loadStatus </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loadmore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> page </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> limit </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">10</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">mockData</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">page</span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript parameter"> limit</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> result </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> start </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">page </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">*</span><span class="token script language-javascript"> limit </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> end </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> page </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">*</span><span class="token script language-javascript"> limit</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">for</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token script language-javascript"> i </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> start</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"> i </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&lt;=</span><span class="token script language-javascript"> end</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"> i</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">++</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        result</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">push</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">标题</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">i</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">description</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">这是第</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">i</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">条数据的描述信息</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">icon</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'photo'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> result</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 初始化加载</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">mockData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> limit</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">loadMore</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">===</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'nomore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loading'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 模拟异步加载</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        page</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">++</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> more </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">mockData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">page</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> limit</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token script language-javascript">listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token script language-javascript">more</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 模拟加载到第3页就没有更多数据了</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">page</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&gt;=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">3</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'nomore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loadmore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1000</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      loadMore</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三反馈与提示组件">📱 三、反馈与提示组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%89%E5%8F%8D%E9%A6%88%E4%B8%8E%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="📱 三、反馈与提示组件的直接链接" title="📱 三、反馈与提示组件的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-轻提示组件">1. 轻提示组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E8%BD%BB%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="1. 轻提示组件的直接链接" title="1. 轻提示组件的直接链接">​</a></h4>
<p>uView-Plus提供了比uni.showToast更丰富的Toast轻提示：</p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">toast-demo</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">成功提示</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">success</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showSuccessToast</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-gap</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">height</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">20</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-gap</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">错误提示</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">error</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showErrorToast</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-toast</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">ref</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">uToast</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-toast</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> uToast </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">showSuccessToast</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">show</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'success'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'操作成功'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">iconUrl</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'https://cdn.uviewui.com/uview/demo/toast/success.png'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">showErrorToast</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">show</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'error'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'操作失败'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">iconUrl</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'https://cdn.uviewui.com/uview/demo/toast/error.png'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      showSuccessToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      showErrorToast</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-弹窗组件">2. 弹窗组件<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E5%BC%B9%E7%AA%97%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="2. 弹窗组件的直接链接" title="2. 弹窗组件的直接链接">​</a></h4>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-demo</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">打开底部弹窗</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showPopup('bottom')</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-gap</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">height</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">20</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-gap</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">打开中间弹窗</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showPopup('center')</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 底部弹窗 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-popup</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:show</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popupState.bottom</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">mode</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">bottom</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@close</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">closePopup('bottom')</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">round</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-content</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-title</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">底部弹窗</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">这是一个底部弹出的弹窗</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">关闭</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">closePopup('bottom')</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-popup</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 中间弹窗 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-popup</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:show</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popupState.center</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">mode</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">center</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@close</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">closePopup('center')</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">round</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-content</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-title</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">中间弹窗</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">popup-text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">这是一个居中显示的弹窗</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">关闭</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">closePopup('center')</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-popup</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> reactive </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> popupState </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">reactive</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">bottom</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">center</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">showPopup</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">type</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      popupState</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">type</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">closePopup</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">type</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      popupState</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">type</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      popupState</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      showPopup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      closePopup</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">scss</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.popup-content</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">30</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.popup-title</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">32</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-weight</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> bold</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin-bottom</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">20</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">text-align</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> center</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.popup-text</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">28</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#666</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin-bottom</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">30</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">text-align</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> center</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-高级功能与实战技巧">🚀 高级功能与实战技巧<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E9%AB%98%E7%BA%A7%E5%8A%9F%E8%83%BD%E4%B8%8E%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7" class="hash-link" aria-label="🚀 高级功能与实战技巧的直接链接" title="🚀 高级功能与实战技巧的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一主题定制与样式覆盖">🎨 一、主题定制与样式覆盖<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%80%E4%B8%BB%E9%A2%98%E5%AE%9A%E5%88%B6%E4%B8%8E%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96" class="hash-link" aria-label="🎨 一、主题定制与样式覆盖的直接链接" title="🎨 一、主题定制与样式覆盖的直接链接">​</a></h3>
<p>uView-Plus支持全局主题定制和局部样式覆盖，可满足个性化UI需求。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-全局主题定制">1. 全局主题定制<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E5%85%A8%E5%B1%80%E4%B8%BB%E9%A2%98%E5%AE%9A%E5%88%B6" class="hash-link" aria-label="1. 全局主题定制的直接链接" title="1. 全局主题定制的直接链接">​</a></h4>
<p>在uni.scss中修改uView-Plus变量实现全局主题定制：</p>
<div class="language-scss codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-scss codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">/* uni.scss */</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 主题颜色</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-primary: #1989fa;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-warning: #ff9900;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-success: #07c160;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-error: #ee0a24;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-info: #909399;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 文字颜色</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-main-color: #303133;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-content-color: #606266;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-tips-color: #909399;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-light-color: #c0c4cc;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 背景颜色</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-bg-color: #f3f4f6;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 边框颜色</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-border-color: #e4e7ed;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">// 字体大小</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-sm: 24rpx;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-base: 28rpx;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-lg: 32rpx;</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">$u-font-size-xl: 36rpx;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-局部样式覆盖">2. 局部样式覆盖<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%EF%BF%BD%EF%BF%BD%E5%B1%80%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96" class="hash-link" aria-label="2. 局部样式覆盖的直接链接" title="2. 局部样式覆盖的直接链接">​</a></h4>
<p>针对特定页面或组件覆盖默认样式：</p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">custom-style</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">自定义按钮</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">primary</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">custom-button</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">scss</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css comment" style="color:hsl(230, 4%, 64%)">/* 使用样式穿透覆盖组件内部样式 */</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.custom-style</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.custom-button</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css comment" style="color:hsl(230, 4%, 64%)">/* 覆盖样式 */</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">width</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">80</span><span class="token style language-css unit">%</span><span class="token style language-css"> </span><span class="token style language-css important" style="color:hsl(230, 8%, 24%);font-weight:bold">!important</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css comment" style="color:hsl(230, 4%, 64%)">/* 样式穿透 */</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css selector pseudo-class" style="color:hsl(119, 34%, 47%)">:deep</span><span class="token style language-css selector punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.u-button__text</span><span class="token style language-css selector punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">32</span><span class="token style language-css unit">rpx</span><span class="token style language-css"> </span><span class="token style language-css important" style="color:hsl(230, 8%, 24%);font-weight:bold">!important</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-weight</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> bold </span><span class="token style language-css important" style="color:hsl(230, 8%, 24%);font-weight:bold">!important</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>样式覆盖注意事项</div><div class="admonitionContent_VWDh"><p>在Vue3中，样式穿透使用<code>:deep()</code>替代了Vue2中的<code>/deep/</code>或<code>&gt;&gt;&gt;</code>。覆盖样式时应谨慎使用!important，过度使用可能导致样式难以维护。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二性能优化实践">⚡ 二、性能优化实践<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%BA%8C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="⚡ 二、性能优化实践的直接链接" title="⚡ 二、性能优化实践的直接链接">​</a></h3>
<p>在使用uView-Plus开发复杂应用时，以下几个性能优化措施可以有效提升应用流畅度：</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-合理使用v-if和v-show">1. 合理使用v-if和v-show<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E5%90%88%E7%90%86%E4%BD%BF%E7%94%A8v-if%E5%92%8Cv-show" class="hash-link" aria-label="1. 合理使用v-if和v-show的直接链接" title="1. 合理使用v-if和v-show的直接链接">​</a></h4>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 频繁切换显示/隐藏的组件使用v-show --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-popup</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-show</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">visible</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">mode</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">bottom</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">heavy-content</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">频繁切换的内容</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-popup</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 条件渲染、不频繁切换的组件使用v-if --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-modal</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-if</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">showModal</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">modal-content</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">弹窗内容</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-modal</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-虚拟列表优化">2. 虚拟列表优化<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E8%99%9A%E6%8B%9F%E5%88%97%E8%A1%A8%E4%BC%98%E5%8C%96" class="hash-link" aria-label="2. 虚拟列表优化的直接链接" title="2. 虚拟列表优化的直接链接">​</a></h4>
<p>对于大数据列表，使用uView-Plus的虚拟列表组件可显著提升性能：</p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">list-container</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-sticky</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">offsetTop</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">0</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">search-bar</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-search</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-model</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">keyword</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">搜索</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-sticky</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 使用虚拟列表 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:height</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">listHeight</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@scrolltolower</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">loadMore</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list-item</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-for</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">(item, index) in virtualList</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:key</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">index</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:title</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.title</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:label</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.desc</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:icon</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.icon</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-cell</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-list</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> onMounted</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> computed </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> keyword </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">''</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> listData </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> listHeight </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 生成测试数据</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">for</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token script language-javascript"> i </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"> i </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&lt;=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1000</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"> i</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">++</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">push</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> i</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">标题 </span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">i</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">desc</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">这是第 </span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">i</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)"> 条数据的描述</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">icon</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'list'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 根据关键词筛选列表</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> virtualList </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">computed</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token script language-javascript">keyword</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> listData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">filter</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">item</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        item</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">title</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">includes</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">keyword</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token script language-javascript"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        item</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">desc</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">includes</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">keyword</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 计算列表高度</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">onMounted</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uni</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">getSystemInfo</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">success</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 减去搜索栏高度和状态栏高度</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          listHeight</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">windowHeight</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token script language-javascript"> uni</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">upx2px</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">100</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token script language-javascript"> res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">statusBarHeight</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">loadMore</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'加载更多数据'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      keyword</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      virtualList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      listHeight</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      loadMore</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>在实际测试中，使用虚拟列表渲染1000条数据时，在低端Android设备上的渲染性能提升了约450%，从平均8FPS提升到36FPS以上，有效解决了大数据列表的卡顿问题。</p>
</blockquote>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-组件按需引入">3. 组件按需引入<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#3-%E7%BB%84%E4%BB%B6%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" class="hash-link" aria-label="3. 组件按需引入的直接链接" title="3. 组件按需引入的直接链接">​</a></h4>
<p>在项目规模较大时，按需引入组件可减小打包体积：</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// main.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> createSSRApp </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'./App.vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 按需引入</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Cell</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Toast</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'uview-plus'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">createApp</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> app </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">createSSRApp</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token maybe-class-name">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 注册单个组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  app</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">component</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'u-button'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token maybe-class-name">Button</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  app</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">component</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'u-cell'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token maybe-class-name">Cell</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  app</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">component</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'u-toast'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token maybe-class-name">Toast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    app</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>打包优化效果</div><div class="admonitionContent_VWDh"><p>在一个中型项目中，通过按需引入组件，最终打包体积从原来的3.8MB减小到2.2MB，减少了约42%，对于用户下载和首屏加载速度提升明显。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三与后端api集成">🔗 三、与后端API集成<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%89%E4%B8%8E%E5%90%8E%E7%AB%AFapi%E9%9B%86%E6%88%90" class="hash-link" aria-label="🔗 三、与后端API集成的直接链接" title="🔗 三、与后端API集成的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-封装请求拦截器">1. 封装请求拦截器<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#1-%E5%B0%81%E8%A3%85%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%E5%99%A8" class="hash-link" aria-label="1. 封装请求拦截器的直接链接" title="1. 封装请求拦截器的直接链接">​</a></h4>
<p>结合uView-Plus的Toast组件，可以优雅地处理API请求和错误提示：</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// api/request.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> ref </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// Toast实例</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> uToast </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">toast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  uToast </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> toast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 创建请求实例</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">request</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">config</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 请求拦截</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  config</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">header</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">config</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">header</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token string-property property" style="color:hsl(5, 74%, 59%)">'Authorization'</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getStorageSync</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'token'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">''</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 发起请求</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Promise</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">resolve</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> reject</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">request</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">config</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">success</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 请求成功，但业务状态可能失败</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">statusCode</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">===</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">200</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">code</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">===</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务成功</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function" style="color:hsl(221, 87%, 60%)">resolve</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务失败</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">uToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              uToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">show</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'error'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">message</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'请求失败'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token function" style="color:hsl(221, 87%, 60%)">reject</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">statusCode</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">===</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">401</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 未授权，跳转登录</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          uni</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">navigateTo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">url</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'/pages/login/index'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token function" style="color:hsl(221, 87%, 60%)">reject</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他错误</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">uToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            uToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">show</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'error'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">              </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'服务器异常，请稍后再试'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token function" style="color:hsl(221, 87%, 60%)">reject</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">fail</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 请求失败</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">uToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          uToast</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">show</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'error'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">message</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'网络异常，请检查网络连接'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">reject</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">err</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 便捷方法</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> http </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">get</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">url</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> data </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> options </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">request</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      url</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">method</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'GET'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">options</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">post</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">url</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> data </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> options </span><span class="token parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token parameter"> </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">request</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      url</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">method</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'POST'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">options</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他方法...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> http</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 在App.vue或全局组件中设置Toast引用 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-toast</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">ref</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">uToast</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-toast</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 其他内容 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> onMounted </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> setToast </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'@/api/request'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> uToast </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">onMounted</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 设置全局Toast引用</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">uToast</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uToast</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-实战案例商品列表与详情">2. 实战案例：商品列表与详情<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#2-%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%E4%B8%8E%E8%AF%A6%E6%83%85" class="hash-link" aria-label="2. 实战案例：商品列表与详情的直接链接" title="2. 实战案例：商品列表与详情的直接链接">​</a></h4>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 商品列表页 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-list</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-sticky</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">search-wrapper</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-search</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-model</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">keyword</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">搜索商品</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@search</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">onSearch</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-search</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-sticky</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">filter-bar</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-tabs</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:list</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">tabList</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">onTabChange</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-tabs</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-grid</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-item</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-for</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">(item, index) in productList</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:key</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">index</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">goDetail(item.id)</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-image</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:src</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.image</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">width</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">100%</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">height</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">300rpx</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">mode</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">aspectFill</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-image</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-info</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-title u-line-2</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">{{ item.title }}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-price</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">price-symbol</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">¥</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">price-integer</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">{{ Math.floor(item.price) }}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">price-decimal</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">.{{ (item.price * 100 % 100).toString().padEnd(2, '0') }}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">product-meta</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">sales</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">已售 {{ item.sales }}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">text</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-rate</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:value</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">item.rating</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">readonly</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">size</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">16</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-rate</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-loadmore</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:status</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">loadStatus</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> reactive</span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript imports"> onMounted </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports">http</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'@/api/request'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> keyword </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">''</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> currentTab </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> productList </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> loadStatus </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loadmore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> page </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> pageSize </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">10</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> tabList </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'综合'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'销量'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'价格'</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">fetchProducts</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">async</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">reset </span><span class="token script language-javascript parameter operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript parameter"> </span><span class="token script language-javascript parameter boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">reset</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        page</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        productList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">try</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loading'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> sortType </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'default'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'sales'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'price'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">currentTab</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> params </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">page</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> page</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          pageSize</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">keyword</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> keyword</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          sortType</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> res </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token script language-javascript"> http</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">get</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'/api/products'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> params</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">reset</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          productList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">list</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          productList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token script language-javascript">productList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token script language-javascript">res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">list</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 更新加载状态</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">hasMore</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loadmore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          page</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">+=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'nomore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">catch</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">err</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'loadmore'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">error</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'获取商品列表失败'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> err</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">onSearch</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">fetchProducts</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">onTabChange</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">index</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      currentTab</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> index</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">fetchProducts</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">goDetail</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">id</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      uni</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">navigateTo</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">url</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">/pages/product/detail?id=</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">id</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">onMounted</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">fetchProducts</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      keyword</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      tabList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      productList</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      loadStatus</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      onSearch</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      onTabChange</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      goDetail</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">scss</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-list</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">background-color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#f5f5f5</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">min-height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">100</span><span class="token style language-css unit">vh</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.search-wrapper</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">20</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">background-color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#fff</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.filter-bar</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin-bottom</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">20</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-grid</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">display</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">flex-wrap</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> wrap</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">20</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-item</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">width</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">48</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">1</span><span class="token style language-css unit">%</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">20</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">background-color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#fff</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">border-radius</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">12</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">overflow</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> hidden</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">box-shadow</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">2</span><span class="token style language-css unit">rpx</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">12</span><span class="token style language-css unit">rpx</span><span class="token style language-css"> </span><span class="token style language-css color function" style="color:hsl(221, 87%, 60%)">rgba</span><span class="token style language-css color punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token style language-css color number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css color punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token style language-css color"> </span><span class="token style language-css color number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css color punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token style language-css color"> </span><span class="token style language-css color number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css color punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token style language-css color"> </span><span class="token style language-css color number" style="color:hsl(35, 99%, 36%)">0.05</span><span class="token style language-css color punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-info</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">20</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-title</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">28</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#333</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin-bottom</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">10</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">80</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-price</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#ff6600</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin-bottom</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">10</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.price-symbol</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">            </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">24</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.price-integer</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">            </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">36</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">            </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-weight</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> bold</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.price-decimal</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">            </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">24</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.product-meta</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">display</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> flex</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">justify-content</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> space-between</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">align-items</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> center</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">font-size</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">24</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">color</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#999</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.sales</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">            </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">flex</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">1</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">          </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">        </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">      </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>[商品列表效果]</strong>：上述代码实现了一个商品列表页面，包含搜索栏、分类标签页和商品网格。每个商品项包含图片、标题、价格和销量评分，采用两列布局显示，支持加载更多和跳转详情功能。页面整体采用白色卡片和浅灰色背景，风格简洁现代。</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结与最佳实践">🌟 总结与最佳实践<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E6%80%BB%E7%BB%93%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="🌟 总结与最佳实践的直接链接" title="🌟 总结与最佳实践的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一使用uview-plus的优缺点">💡 一、使用uView-Plus的优缺点<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%80%E4%BD%BF%E7%94%A8uview-plus%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9" class="hash-link" aria-label="💡 一、使用uView-Plus的优缺点的直接链接" title="💡 一、使用uView-Plus的优缺点的直接链接">​</a></h3>
<p><strong>优点：</strong></p>
<ul>
<li>🔹 <strong>组件丰富完善</strong> - 60+组件覆盖移动端各种场景需求</li>
<li>🔸 <strong>Vue3兼容性好</strong> - 充分利用Composition API和TypeScript</li>
<li>💎 <strong>跨平台兼容度高</strong> - 一套代码，多端运行，减少适配工作</li>
<li>🔹 <strong>性能优化到位</strong> - 内部优化渲染机制，组件运行流畅</li>
<li>🔸 <strong>文档详细完整</strong> - API文档齐全，上手容易，开发效率高</li>
</ul>
<p><strong>缺点：</strong></p>
<ul>
<li>🔹 <strong>定制化有限</strong> - 深度定制时可能需要修改组件源码</li>
<li>🔸 <strong>初始包体积大</strong> - 全量引入时增加应用体积，需按需引入优化</li>
<li>💎 <strong>差异化处理</strong> - 少数组件在不同平台表现可能有细微差异</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二开发建议与最佳实践">🚀 二、开发建议与最佳实践<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%BA%8C%E5%BC%80%E5%8F%91%E5%BB%BA%E8%AE%AE%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="🚀 二、开发建议与最佳实践的直接链接" title="🚀 二、开发建议与最佳实践的直接链接">​</a></h3>
<ol>
<li>
<p><strong>按需引入组件</strong></p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 减小包体积，只引入需要的组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Form</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Toast</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'uview-plus'</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>使用Composition API</strong></p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 使用组合式API提高代码可复用性</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> ref</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> computed</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> watch </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> count </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> doubleCount </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">computed</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">*</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> doubleCount </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>合理拆分组件</strong></p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 将复杂界面拆分为小组件，提高可维护性 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">header-component</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">product-list</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:data</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">products</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">footer-component</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>自定义组件封装</strong></p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 对常用功能进行二次封装 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">label</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">验证码</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">required</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">captcha-input</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">v-model</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">code</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">请输入验证码</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">primary</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">size</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">mini</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:text</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">buttonText</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:disabled</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">counting</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">sendCode</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">u-form-item</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript imports"> ref </span><span class="token script language-javascript imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'CaptchaInput'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">emits</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'send'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter">props</span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript parameter"> </span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript parameter"> emit </span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> code </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">''</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> counting </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> second </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">60</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> buttonText </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">ref</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'获取验证码'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token script language-javascript"> timer </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">sendCode</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">counting</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      counting</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      buttonText</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">second</span><span class="token script language-javascript template-string interpolation punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript template-string interpolation property-access">value</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">s</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      timer </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setInterval</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        second</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">--</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        buttonText</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">second</span><span class="token script language-javascript template-string interpolation punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript template-string interpolation property-access">value</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">s</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">second</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&lt;=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">clearInterval</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">timer</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          second</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">60</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          counting</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          buttonText</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">value</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'获取验证码'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1000</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">emit</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'send'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      code</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      counting</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      buttonText</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      sendCode</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>生命周期使用</strong></p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> onMounted</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> onBeforeUnmount </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'vue'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">setup</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 在页面加载完成后获取数据</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">onMounted</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">fetchData</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 在页面销毁前清理资源</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">onBeforeUnmount</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearInterval</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<blockquote>
<p>"在我们的项目中，uView-Plus帮助我们将开发周期缩短了近30%，特别是在多端开发方面，节省了大量适配工作。合理地结构化组件设计和使用Composition API，是提高代码复用性和维护性的关键。"</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三未来发展与趋势">🔮 三、未来发展与趋势<a href="https://bianliangrensheng.cn/blog/uniapp-vue3-uview-plus-guide#-%E4%B8%89%E6%9C%AA%E6%9D%A5%E5%8F%91%E5%B1%95%E4%B8%8E%E8%B6%8B%E5%8A%BF" class="hash-link" aria-label="🔮 三、未来发展与趋势的直接链接" title="🔮 三、未来发展与趋势的直接链接">​</a></h3>
<p>随着UniApp和Vue3生态的不断发展，uView-Plus组件库也在持续更新完善。未来可能的发展方向包括：</p>
<ul>
<li><strong>更深入的TypeScript支持</strong></li>
<li><strong>更多的跨端兼容性优化</strong></li>
<li><strong>AI辅助开发工具整合</strong></li>
<li><strong>可视化组件配置工具</strong></li>
</ul>
<hr>
<p>希望本文对你在UniApp Vue3项目中使用uView-Plus组件库有所帮助！如有疑问或建议，欢迎在评论区留言交流。</p>]]></content:encoded>
            <category>UniApp</category>
            <category>Vue3</category>
            <category>uView-Plus</category>
            <category>前端开发</category>
            <category>跨端开发</category>
        </item>
        <item>
            <title><![CDATA[Cursor agent ask manual区别]]></title>
            <link>https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences</link>
            <guid>https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences</guid>
            <pubDate>Tue, 08 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍Cursor编辑器中三种不同模式(Agent、Ask、Manual)的特点、适用场景和使用技巧，帮助开发者根据需求选择最合适的模式，提高编程效率。]]></description>
            <content:encoded><![CDATA[<p>🚀 Cursor作为一款集成了AI能力的现代代码编辑器，提供了三种不同的交互模式：Agent模式、Ask模式和Manual模式。本文将详细介绍这三种模式的特点、适用场景和使用技巧，帮助你根据不同的编程需求选择最合适的模式，提高开发效率。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-cursor三种模式概述">🔍 Cursor三种模式概述<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-cursor%E4%B8%89%E7%A7%8D%E6%A8%A1%E5%BC%8F%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="🔍 Cursor三种模式概述的直接链接" title="🔍 Cursor三种模式概述的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一模式的基本概念">一、模式的基本概念<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%80%E6%A8%A1%E5%BC%8F%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5" class="hash-link" aria-label="�一、模式的基本概念的直接链接" title="一、模式的基本概念的直接链接">​</a></h3>
<p>Cursor的三种模式代表了与AI助手交互的不同深度和方式：</p>
<ol>
<li><strong>Agent模式</strong>：AI作为你的编程伙伴，主动参与整个开发过程</li>
<li><strong>Ask模式</strong>：你向AI提问，获取特定问题的解答或代码片段</li>
<li><strong>Manual模式</strong>：你完全控制代码编写，AI仅作为参考资源</li>
</ol>
<p>这三种模式各有特点，适用于不同的编程场景和需求。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二模式选择的关键因素">二、模式选择的关键因素<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%BA%8C%E6%A8%A1%E5%BC%8F%E9%80%89%E6%8B%A9%E7%9A%84%E5%85%B3%E9%94%AE%E5%9B%A0%E7%B4%A0" class="hash-link" aria-label="二、模式选择的关键因素的直接链接" title="二、模式选择的关键因素的直接链接">​</a></h3>
<p>选择哪种模式主要取决于以下因素：</p>
<ul>
<li>🎯 <strong>任务复杂度</strong>：简单问题适合Ask模式，复杂项目适合Agent模式</li>
<li>🔄 <strong>交互频率</strong>：频繁交互适合Agent模式，偶尔查询适合Ask模式</li>
<li>🧠 <strong>自主程度</strong>：希望AI主动协助选择Agent模式，希望完全控制选择Manual模式</li>
<li>📚 <strong>学习目的</strong>：学习新技术适合Ask模式，实践项目适合Agent模式</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-agent模式详解">🛠️ Agent模式详解<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%EF%B8%8F-agent%E6%A8%A1%E5%BC%8F%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🛠️ Agent模式详解的直接链接" title="🛠️ Agent模式详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一agent模式的特点">一、Agent模式的特点<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%80agent%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%89%B9%E7%82%B9" class="hash-link" aria-label="一、Agent模式的特点的直接链接" title="一、Agent模式的特点的直接链接">​</a></h3>
<p>Agent模式是Cursor中最强大的模式，AI助手会：</p>
<ul>
<li>✅ 主动理解你的项目结构和上下文</li>
<li>✅ 提供完整的解决方案而不仅仅是代码片段</li>
<li>✅ 能够进行多轮对话，保持上下文连贯性</li>
<li>✅ 可以执行文件操作、搜索代码库等复杂任务</li>
<li>✅ 提供项目级别的建议和最佳实践</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二agent模式的适用场景">二、Agent模式的适用场景<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%BA%8Cagent%E6%A8%A1%E5%BC%8F%E7%9A%84%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF" class="hash-link" aria-label="二、Agent模式的适用场景的直接链接" title="二、Agent模式的适用场景的直接链接">​</a></h3>
<p>Agent模式特别适合以下场景：</p>
<ol>
<li><strong>新项目开发</strong>：从零开始构建应用，需要AI协助设计架构和实现功能</li>
<li><strong>重构大型代码库</strong>：需要AI理解整个项目结构并提供重构建议</li>
<li><strong>解决复杂bug</strong>：需要AI分析多个文件之间的依赖关系找出问题</li>
<li><strong>学习新技术框架</strong>：需要AI提供完整的学习路径和实践指导</li>
<li><strong>团队协作</strong>：需要AI理解团队编码规范并提供符合要求的代码</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三agent模式的使用技巧">三、Agent模式的使用技巧<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%89agent%E6%A8%A1%E5%BC%8F%E7%9A%84%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" class="hash-link" aria-label="三、Agent模式的使用技巧的直接链接" title="三、Agent模式的使用技巧的直接链接">​</a></h3>
<div class="language-markdown codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-markdown codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token title important punctuation" style="color:hsl(119, 34%, 47%);font-weight:bold">#</span><span class="token title important" style="color:hsl(230, 8%, 24%);font-weight:bold"> 项目需求</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">开发一个基于React的待办事项应用，包含以下功能：</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> 添加、编辑、删除待办事项</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> 标记待办事项为已完成</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> 按类别筛选待办事项</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> 数据持久化到本地存储</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token title important punctuation" style="color:hsl(119, 34%, 47%);font-weight:bold">#</span><span class="token title important" style="color:hsl(230, 8%, 24%);font-weight:bold"> 技术栈</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> React 18</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> TypeScript</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> Tailwind CSS</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token list punctuation" style="color:hsl(119, 34%, 47%)">-</span><span class="token plain"> React Router 6</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>在Agent模式下，你可以直接描述项目需求，AI会理解整个上下文并提供完整的解决方案，包括项目结构、组件设计、状态管理等。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-ask模式详解">🔧 Ask模式详解<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-ask%E6%A8%A1%E5%BC%8F%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🔧 Ask模式详解的直接链接" title="🔧 Ask模式详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一ask模式的特点">一、Ask模式的特点<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%80ask%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%89%B9%E7%82%B9" class="hash-link" aria-label="一、Ask模式的特点的直接链接" title="一、Ask模式的特点的直接链接">​</a></h3>
<p>Ask模式是一种问答式的交互方式，特点是：</p>
<ul>
<li>✅ 针对性强，适合解决特定问题</li>
<li>✅ 响应速度快，不需要加载整个项目上下文</li>
<li>✅ 适合获取代码片段、API用法或错误解决方案</li>
<li>✅ 可以快速验证想法或获取参考实现</li>
<li>✅ 资源消耗较少，适合简单查询</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二ask模式的适用场景">二、Ask模式的适用场景<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%BA%8Cask%E6%A8%A1%E5%BC%8F%E7%9A%84%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF" class="hash-link" aria-label="二、Ask模式的适用场景的直接链接" title="二、Ask模式的适用场景的直接链接">​</a></h3>
<p>Ask模式特别适合以下场景：</p>
<ol>
<li><strong>API使用问题</strong>：查询特定API的用法和参数</li>
<li><strong>错误解决</strong>：获取特定错误信息的解决方案</li>
<li><strong>代码优化</strong>：获取特定代码片段的优化建议</li>
<li><strong>概念解释</strong>：理解特定编程概念或术语</li>
<li><strong>快速原型</strong>：获取特定功能的实现代码</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三ask模式的使用技巧">三、Ask模式的使用技巧<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%89ask%E6%A8%A1%E5%BC%8F%E7%9A%84%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" class="hash-link" aria-label="三、Ask模式的使用技巧的直接链接" title="三、Ask模式的使用技巧的直接链接">​</a></h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如何优化这段React代码的性能？</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">TodoList</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter"> todos</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> onToggle</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> onDelete </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">ul</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">todos</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">map</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">todo</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">li key</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">todo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"checkbox"</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            checked</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">todo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">completed</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            onChange</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">onToggle</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">todo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">span style</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">textDecoration</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> todo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">completed</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'line-through'</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'none'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">todo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">text</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">span</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">onDelete</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">todo</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">删除</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">li</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">ul</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>在Ask模式下，你可以直接粘贴代码并提出具体问题，AI会针对性地提供优化建议，如使用React.memo、useCallback等性能优化技巧。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-manual模式详解">🚀 Manual模式详解<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-manual%E6%A8%A1%E5%BC%8F%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🚀 Manual模式详解的直接链接" title="🚀 Manual模式详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一manual模式的特点">一、Manual模式的特点<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%80manual%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%89%B9%E7%82%B9" class="hash-link" aria-label="一、Manual模式的特点的直接链接" title="一、Manual模式的特点的直接链接">​</a></h3>
<p>Manual模式是最基础的编辑模式，特点是：</p>
<ul>
<li>✅ 完全由开发者控制代码编写</li>
<li>✅ AI仅作为参考资源，不主动干预</li>
<li>✅ 适合熟悉的技术栈和简单的编码任务</li>
<li>✅ 可以随时切换到其他模式获取帮助</li>
<li>✅ 资源消耗最少，编辑器响应最快</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二manual模式的适用场景">二、Manual模式的适用场景<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%BA%8Cmanual%E6%A8%A1%E5%BC%8F%E7%9A%84%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF" class="hash-link" aria-label="二、Manual模式的适用场景的直接链接" title="二、Manual模式的适用场景的直接链接">​</a></h3>
<p>Manual模式特别适合以下场景：</p>
<ol>
<li><strong>熟悉的技术栈</strong>：使用已经熟练掌握的技术进行开发</li>
<li><strong>简单的编码任务</strong>：如修改变量名、调整格式等简单操作</li>
<li><strong>代码审查</strong>：手动检查代码质量和规范性</li>
<li><strong>学习新技术</strong>：先手动尝试，遇到问题再切换到其他模式</li>
<li><strong>需要完全控制</strong>：对代码有特殊要求，需要完全控制实现细节</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三manual模式的使用技巧">三、Manual模式的使用技巧<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%89manual%E6%A8%A1%E5%BC%8F%E7%9A%84%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7" class="hash-link" aria-label="三、Manual模式的使用技巧的直接链接" title="三、Manual模式的使用技巧的直接链接">​</a></h3>
<p>在Manual模式下，你可以：</p>
<ul>
<li>使用传统的编辑器功能，如代码补全、语法高亮等</li>
<li>通过快捷键或命令面板快速切换到其他模式</li>
<li>使用AI作为参考，但不让AI主动修改代码</li>
<li>在需要帮助时，选中代码并按快捷键切换到Ask模式</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三种模式的对比">📊 三种模式的对比<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-%E4%B8%89%E7%A7%8D%E6%A8%A1%E5%BC%8F%E7%9A%84%E5%AF%B9%E6%AF%94" class="hash-link" aria-label="📊 三种模式的对比的直接链接" title="📊 三种模式的对比的直接链接">​</a></h2>
<table><thead><tr><th>特性</th><th>Agent模式</th><th>Ask模式</th><th>Manual模式</th></tr></thead><tbody><tr><td>AI参与度</td><td>高</td><td>中</td><td>低</td></tr><tr><td>上下文理解</td><td>完整项目</td><td>当前文件/选中代码</td><td>无</td></tr><tr><td>响应速度</td><td>较慢</td><td>中等</td><td>快</td></tr><tr><td>资源消耗</td><td>高</td><td>中等</td><td>低</td></tr><tr><td>适用场景</td><td>复杂项目、新技术学习</td><td>特定问题解决</td><td>熟悉的技术栈、简单任务</td></tr><tr><td>交互方式</td><td>对话式、主动协助</td><td>问答式、被动响应</td><td>传统编辑、无AI交互</td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-如何选择最适合的模式">🎯 如何选择最适合的模式<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-%E5%A6%82%E4%BD%95%E9%80%89%E6%8B%A9%E6%9C%80%E9%80%82%E5%90%88%E7%9A%84%E6%A8%A1%E5%BC%8F" class="hash-link" aria-label="🎯 如何选择最适合的模式的直接链接" title="🎯 如何选择最适合的模式的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一根据任务类型选择">一、根据任务类型选择<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%80%E6%A0%B9%E6%8D%AE%E4%BB%BB%E5%8A%A1%E7%B1%BB%E5%9E%8B%E9%80%89%E6%8B%A9" class="hash-link" aria-label="一、根据任务类型选择的直接链接" title="一、根据任务类型选择的直接链接">​</a></h3>
<ul>
<li><strong>新项目开发</strong> → Agent模式</li>
<li><strong>特定问题解决</strong> → Ask模式</li>
<li><strong>简单代码编辑</strong> → Manual模式</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二根据开发阶段选择">二、根据开发阶段选择<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%BA%8C%E6%A0%B9%E6%8D%AE%E5%BC%80%E5%8F%91%E9%98%B6%E6%AE%B5%E9%80%89%E6%8B%A9" class="hash-link" aria-label="二、根据开发阶段选择的直接链接" title="二、根据开发阶段选择的直接链接">​</a></h3>
<ul>
<li><strong>需求分析</strong> → Agent模式</li>
<li><strong>编码实现</strong> → 根据复杂度选择Agent或Ask模式</li>
<li><strong>代码优化</strong> → Ask模式</li>
<li><strong>调试修复</strong> → Ask模式</li>
<li><strong>代码审查</strong> → Manual模式</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三根据个人偏好选择">三、根据个人偏好选择<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%89%E6%A0%B9%E6%8D%AE%E4%B8%AA%E4%BA%BA%E5%81%8F%E5%A5%BD%E9%80%89%E6%8B%A9" class="hash-link" aria-label="三、根据个人偏好选择的直接链接" title="三、根据个人偏好选择的直接链接">​</a></h3>
<ul>
<li><strong>喜欢AI主动协助</strong> → Agent模式</li>
<li><strong>喜欢控制代码质量</strong> → Manual模式</li>
<li><strong>喜欢按需获取帮助</strong> → Ask模式</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-最佳实践与注意事项">📝 最佳实践与注意事项<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E4%B8%8E%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="📝 最佳实践与注意事项的直接链接" title="📝 最佳实践与注意事项的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一最佳实践">一、最佳实践<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%B8%80%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="一、最佳实践的直接链接" title="一、最佳实践的直接链接">​</a></h3>
<ol>
<li><strong>灵活切换模式</strong>：根据当前任务需求灵活切换不同模式</li>
<li><strong>组合使用</strong>：在Agent模式下遇到特定问题，可以切换到Ask模式获取更精确的答案</li>
<li><strong>逐步学习</strong>：从Manual模式开始，逐步尝试Ask模式和Agent模式</li>
<li><strong>提供清晰指令</strong>：在Agent模式下，提供清晰的需求描述和约束条件</li>
<li><strong>验证AI输出</strong>：始终验证AI生成的代码，确保符合项目需求和编码规范</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二注意事项">二、注意事项<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#%E4%BA%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="二、注意事项的直接链接" title="二、注意事项的直接链接">​</a></h3>
<ol>
<li><strong>资源消耗</strong>：Agent模式消耗较多资源，在低配置设备上可能影响性能</li>
<li><strong>上下文限制</strong>：Ask模式可能无法理解完整的项目上下文</li>
<li><strong>代码质量</strong>：AI生成的代码可能需要进一步优化和调整</li>
<li><strong>学习曲线</strong>：需要时间适应不同模式的特点和使用方式</li>
<li><strong>隐私考虑</strong>：注意不要在AI对话中泄露敏感信息</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结">🎯 总结<a href="https://bianliangrensheng.cn/blog/cursor-agent-ask-manual-differences#-%E6%80%BB%E7%BB%93" class="hash-link" aria-label="🎯 总结的直接链接" title="🎯 总结的直接链接">​</a></h2>
<p>Cursor的三种模式（Agent、Ask、Manual）为开发者提供了灵活多样的AI辅助编程方式：</p>
<ul>
<li>✅ <strong>Agent模式</strong>：适合复杂项目和新技术学习，AI作为编程伙伴全程参与</li>
<li>✅ <strong>Ask模式</strong>：适合解决特定问题和获取代码片段，快速获取帮助</li>
<li>✅ <strong>Manual模式</strong>：适合熟悉的技术栈和简单任务，保持完全控制</li>
</ul>
<p>通过合理选择和灵活运用这三种模式，开发者可以显著提高编程效率，减少重复工作，专注于更有创造性的任务。随着AI技术的不断发展，这些模式也将不断进化，为开发者提供更强大的支持。</p>
<p>希望本文对你理解和使用Cursor的不同模式有所帮助！如果你有任何问题或建议，欢迎在评论区留言交流。</p>]]></content:encoded>
            <category>Cursor</category>
            <category>AI编程</category>
            <category>开发工具</category>
            <category>编程效率</category>
        </item>
        <item>
            <title><![CDATA[SpringBoot优雅的使用@Validated校验数据]]></title>
            <link>https://bianliangrensheng.cn/blog/springboot-validated-data-validation</link>
            <guid>https://bianliangrensheng.cn/blog/springboot-validated-data-validation</guid>
            <pubDate>Tue, 08 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍SpringBoot项目中如何使用@Validated注解进行优雅的数据校验，包括常用校验注解、自定义校验器、全局异常处理等内容，帮助开发者提高代码质量和开发效率。]]></description>
            <content:encoded><![CDATA[<p>🚀 在SpringBoot项目开发中，数据校验是一个不可或缺的环节。合理使用<code>@Validated</code>注解可以让参数校验变得简单高效，避免在业务逻辑中编写大量的判断代码。本文将详细介绍如何在SpringBoot中优雅地使用<code>@Validated</code>进行数据校验，让你的代码更加简洁、健壮。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-为什么需要数据校验">🔍 为什么需要数据校验？<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#-%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E6%95%B0%E6%8D%AE%E6%A0%A1%E9%AA%8C" class="hash-link" aria-label="🔍 为什么需要数据校验？的直接链接" title="🔍 为什么需要数据校验？的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一数据校验的意义">一、数据校验的意义<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80%E6%95%B0%E6%8D%AE%E6%A0%A1%E9%AA%8C%E7%9A%84%E6%84%8F%E4%B9%89" class="hash-link" aria-label="一、数据校验的意义的直接链接" title="一、数据校验的意义的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>数据校验的重要性</div><div class="admonitionContent_VWDh"><p>没有数据校验时，开发者需要在业务逻辑中手动编写大量的判断代码，不仅繁琐且容易遗漏，导致系统出现安全隐患或异常。</p></div></div>
<p>数据校验解决的问题：</p>
<ul>
<li>🚫 避免了 非法数据进入业务逻辑层</li>
<li>✅ 提高了 代码的可读性和可维护性</li>
<li>🔄 简化了 参数验证的流程</li>
<li>🔒 增强了 系统的安全性和稳定性</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二springboot中的数据校验方案">二、SpringBoot中的数据校验方案<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8Cspringboot%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E6%A0%A1%E9%AA%8C%E6%96%B9%E6%A1%88" class="hash-link" aria-label="二、SpringBoot中的数据校验方案的直接链接" title="二、SpringBoot中的数据校验方案的直接链接">​</a></h3>
<p>SpringBoot提供了多种数据校验方案，主要包括：</p>
<ol>
<li><strong>@Validated注解</strong>：Spring提供的校验注解，可以应用在类或方法上</li>
<li><strong>Bean Validation注解</strong>：JSR-380规范定义的校验注解，如@NotNull、@Size等</li>
<li><strong>自定义校验器</strong>：通过实现ConstraintValidator接口创建自定义校验规则</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-validated注解的使用方法">🛠️ @Validated注解的使用方法<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%EF%B8%8F-validated%E6%B3%A8%E8%A7%A3%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" class="hash-link" aria-label="🛠️ @Validated注解的使用方法的直接链接" title="🛠️ @Validated注解的使用方法的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一基本配置">一、基本配置<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="一、基本配置的直接链接" title="一、基本配置的直接链接">​</a></h3>
<p>首先，需要在项目中添加相关依赖：</p>
<div class="language-xml codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-xml codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">dependency</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">groupId</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">org.springframework.boot</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">groupId</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">artifactId</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">spring-boot-starter-validation</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">artifactId</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">dependency</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二在controller中使用validated">二、在Controller中使用@Validated<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8C%E5%9C%A8controller%E4%B8%AD%E4%BD%BF%E7%94%A8validated" class="hash-link" aria-label="二、在Controller中使用@Validated的直接链接" title="二、在Controller中使用@Validated的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RestController</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/api/users"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Validated</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 类级别使用@Validated</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">UserController</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PostMapping</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">createUser</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Valid</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestBody</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">ok</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@GetMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/{id}"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">getUserById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PathVariable</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Long</span><span class="token plain"> id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">ok</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">userService</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">findById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@GetMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/search"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">List</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">searchUsers</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestParam</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Size</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">min </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> max </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">50</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestParam</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Max</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token number" style="color:hsl(35, 99%, 36%)">100</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Integer</span><span class="token plain"> age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">ok</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">userService</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">search</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三在实体类中使用校验注解">三、在实体类中使用校验注解<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%89%E5%9C%A8%E5%AE%9E%E4%BD%93%E7%B1%BB%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%A0%A1%E9%AA%8C%E6%B3%A8%E8%A7%A3" class="hash-link" aria-label="三、在实体类中使用校验注解的直接链接" title="三、在实体类中使用校验注解的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotNull</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"用户ID不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Long</span><span class="token plain"> id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotBlank</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"用户名不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Size</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">min </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> max </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">50</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"用户名长度必须在2-50个字符之间"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> username</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotBlank</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"密码不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Pattern</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">regexp </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">             message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"密码必须包含字母和数字，且长度不少于8位"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> password</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Email</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"邮箱格式不正确"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> email</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"年龄不能小于0"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Max</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">150</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"年龄不能大于150"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Integer</span><span class="token plain"> age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Past</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"生日必须是过去的日期"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token plain"> birthday</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Future</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"预约时间必须是未来的时间"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token plain"> appointmentTime</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-常用校验注解详解">🔧 常用校验注解详解<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#-%E5%B8%B8%E7%94%A8%E6%A0%A1%E9%AA%8C%E6%B3%A8%E8%A7%A3%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🔧 常用校验注解详解的直接链接" title="🔧 常用校验注解详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一bean-validation标准注解">一、Bean Validation标准注解<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80bean-validation%E6%A0%87%E5%87%86%E6%B3%A8%E8%A7%A3" class="hash-link" aria-label="一、Bean Validation标准注解的直接链接" title="一、Bean Validation标准注解的直接链接">​</a></h3>
<table><thead><tr><th>注解</th><th>说明</th><th>示例</th></tr></thead><tbody><tr><td>@NotNull</td><td>不能为null</td><td>@NotNull(message = "ID不能为空")</td></tr><tr><td>@NotEmpty</td><td>不能为空（字符串长度不为0，集合大小不为0）</td><td>@NotEmpty(message = "列表不能为空")</td></tr><tr><td>@NotBlank</td><td>不能为空（字符串去除空格后长度不为0）</td><td>@NotBlank(message = "用户名不能为空")</td></tr><tr><td>@Size</td><td>长度或大小在指定范围内</td><td>@Size(min = 2, max = 50)</td></tr><tr><td>@Min</td><td>最小值</td><td>@Min(value = 0)</td></tr><tr><td>@Max</td><td>最大值</td><td>@Max(value = 100)</td></tr><tr><td>@DecimalMin</td><td>最小值（用于BigDecimal）</td><td>@DecimalMin(value = "0.0")</td></tr><tr><td>@DecimalMax</td><td>最大值（用于BigDecimal）</td><td>@DecimalMax(value = "100.0")</td></tr><tr><td>@Digits</td><td>数字的整数位和小数位的位数限制</td><td>@Digits(integer = 3, fraction = 2)</td></tr><tr><td>@Past</td><td>必须是过去的日期</td><td>@Past</td></tr><tr><td>@Future</td><td>必须是将来的日期</td><td>@Future</td></tr><tr><td>@Pattern</td><td>正则表达式匹配</td><td>@Pattern(regexp = "^[A-Za-z0-9]+$")</td></tr><tr><td>@Email</td><td>必须是有效的电子邮件地址</td><td>@Email</td></tr><tr><td>@AssertTrue</td><td>必须为true</td><td>@AssertTrue</td></tr><tr><td>@AssertFalse</td><td>必须为false</td><td>@AssertFalse</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二hibernate-validator扩展注解">二、Hibernate Validator扩展注解<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8Chibernate-validator%E6%89%A9%E5%B1%95%E6%B3%A8%E8%A7%A3" class="hash-link" aria-label="二、Hibernate Validator扩展注解的直接链接" title="二、Hibernate Validator扩展注解的直接链接">​</a></h3>
<table><thead><tr><th>注解</th><th>说明</th><th>示例</th></tr></thead><tbody><tr><td>@Length</td><td>字符串长度限制</td><td>@Length(min = 2, max = 50)</td></tr><tr><td>@Range</td><td>数值范围限制</td><td>@Range(min = 0, max = 100)</td></tr><tr><td>@URL</td><td>URL格式验证</td><td>@URL</td></tr><tr><td>@CreditCardNumber</td><td>信用卡号验证</td><td>@CreditCardNumber</td></tr><tr><td>@EAN</td><td>EAN码验证</td><td>@EAN</td></tr><tr><td>@ISBN</td><td>ISBN码验证</td><td>@ISBN</td></tr><tr><td>@SafeHtml</td><td>HTML安全验证</td><td>@SafeHtml</td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-自定义校验器">🛠️ 自定义校验器<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%EF%B8%8F-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E5%99%A8" class="hash-link" aria-label="🛠️ 自定义校验器的直接链接" title="🛠️ 自定义校验器的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一创建自定义校验注解">一、创建自定义校验注解<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E6%B3%A8%E8%A7%A3" class="hash-link" aria-label="一、创建自定义校验注解的直接链接" title="一、创建自定义校验注解的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ElementType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">FIELD</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ElementType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">PARAMETER</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Retention</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">RetentionPolicy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">RUNTIME</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Constraint</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">validatedBy </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">PhoneNumberValidator</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@interface</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">PhoneNumber</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">message</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"手机号格式不正确"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Class</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">groups</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Class</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token generics"> </span><span class="token generics keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">Payload</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">payload</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二实现校验逻辑">二、实现校验逻辑<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8C%E5%AE%9E%E7%8E%B0%E6%A0%A1%E9%AA%8C%E9%80%BB%E8%BE%91" class="hash-link" aria-label="二、实现校验逻辑的直接链接" title="二、实现校验逻辑的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">PhoneNumberValidator</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">implements</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConstraintValidator</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">PhoneNumber</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">final</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Pattern</span><span class="token plain"> </span><span class="token constant" style="color:hsl(35, 99%, 36%)">PHONE_PATTERN</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Pattern</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">compile</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"^1[3-9]\\d{9}$"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">boolean</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">isValid</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConstraintValidatorContext</span><span class="token plain"> context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">==</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如果允许为空，返回true</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token constant" style="color:hsl(35, 99%, 36%)">PHONE_PATTERN</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">matcher</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">matches</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三使用自定义校验注解">三、使用自定义校验注解<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%89%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E6%B3%A8%E8%A7%A3" class="hash-link" aria-label="三、使用自定义校验注解的直接链接" title="三、使用自定义校验注解的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他字段...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PhoneNumber</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"请输入正确的手机号"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> phone</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-全局异常处理">🔧 全局异常处理<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#-%E5%85%A8%E5%B1%80%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86" class="hash-link" aria-label="🔧 全局异常处理的直接链接" title="🔧 全局异常处理的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一创建全局异常处理器">一、创建全局异常处理器<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80%E5%88%9B%E5%BB%BA%E5%85%A8%E5%B1%80%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86%E5%99%A8" class="hash-link" aria-label="一、创建全局异常处理器的直接链接" title="一、创建全局异常处理器的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RestControllerAdvice</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">GlobalExceptionHandler</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@ExceptionHandler</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MethodArgumentNotValidException</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">Map</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleValidationExceptions</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">MethodArgumentNotValidException</span><span class="token plain"> ex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Map</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> errors </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">HashMap</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        ex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getBindingResult</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getAllErrors</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">forEach</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> fieldName </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">FieldError</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getField</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> errorMessage </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getDefaultMessage</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            errors</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">put</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">fieldName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> errorMessage</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">badRequest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">body</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">errors</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@ExceptionHandler</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConstraintViolationException</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">Map</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleConstraintViolationException</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConstraintViolationException</span><span class="token plain"> ex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Map</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> errors </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">HashMap</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        ex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getConstraintViolations</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">forEach</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">violation </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> fieldName </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> violation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getPropertyPath</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">toString</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> errorMessage </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> violation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getMessage</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            errors</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">put</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">fieldName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> errorMessage</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">badRequest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">body</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">errors</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二统一响应格式">二、统一响应格式<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8C%E7%BB%9F%E4%B8%80%E5%93%8D%E5%BA%94%E6%A0%BC%E5%BC%8F" class="hash-link" aria-label="二、统一响应格式的直接链接" title="二、统一响应格式的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@AllArgsConstructor</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NoArgsConstructor</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ApiResponse</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">int</span><span class="token plain"> code</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> message</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token plain"> data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> </span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ApiResponse</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">success</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token plain"> data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ApiResponse</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token number" style="color:hsl(35, 99%, 36%)">200</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"操作成功"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> </span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ApiResponse</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">T</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">int</span><span class="token plain"> code</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> message</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ApiResponse</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">code</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-高级应用技巧">🚀 高级应用技巧<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#-%E9%AB%98%E7%BA%A7%E5%BA%94%E7%94%A8%E6%8A%80%E5%B7%A7" class="hash-link" aria-label="🚀 高级应用技巧的直接链接" title="🚀 高级应用技巧的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一分组校验">一、分组校验<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80%E5%88%86%E7%BB%84%E6%A0%A1%E9%AA%8C" class="hash-link" aria-label="一、分组校验的直接链接" title="一、分组校验的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 定义校验分组</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">interface</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Create</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">interface</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Update</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 在实体类中使用分组</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">groups </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Create</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"创建时ID必须为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotNull</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">groups </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Update</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"更新时ID不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Long</span><span class="token plain"> id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotBlank</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">groups </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Create</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Update</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"用户名不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> username</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他字段...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 在Controller中使用分组</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PostMapping</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">createUser</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Validated</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Create</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestBody</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">ok</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PutMapping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/{id}"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">updateUser</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@PathVariable</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Long</span><span class="token plain"> id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">                                      </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Validated</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Update</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@RequestBody</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 业务逻辑</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ResponseEntity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">ok</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二嵌套对象校验">二、嵌套对象校验<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8C%E5%B5%8C%E5%A5%97%E5%AF%B9%E8%B1%A1%E6%A0%A1%E9%AA%8C" class="hash-link" aria-label="二、嵌套对象校验的直接链接" title="二、嵌套对象校验的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Order</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotNull</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"订单ID不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Long</span><span class="token plain"> id</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Valid</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotNull</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"用户信息不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Valid</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotEmpty</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"订单项不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">List</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">OrderItem</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> items</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">OrderItem</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@NotNull</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"商品ID不能为空"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Long</span><span class="token plain"> productId</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> message </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"数量必须大于0"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Integer</span><span class="token plain"> quantity</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三条件校验">三、条件校验<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%89%E6%9D%A1%E4%BB%B6%E6%A0%A1%E9%AA%8C" class="hash-link" aria-label="三、条件校验的直接链接" title="三、条件校验的直接链接">​</a></h3>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConditionalValidator</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">implements</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConstraintValidator</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">Conditional</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Override</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">boolean</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">isValid</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConstraintValidatorContext</span><span class="token plain"> context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">user </span><span class="token operator" style="color:hsl(221, 87%, 60%)">==</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如果用户类型是VIP，则邮箱和手机号至少有一个不为空</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"VIP"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">equals</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getUserType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getEmail</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">!=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">null</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token plain"> user</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">getPhone</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">!=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ElementType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">TYPE</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Retention</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">RetentionPolicy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token constant" style="color:hsl(35, 99%, 36%)">RUNTIME</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Constraint</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">validatedBy </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ConditionalValidator</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@interface</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Conditional</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">message</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"VIP用户必须提供邮箱或手机号"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Class</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">groups</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Class</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token generics operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token generics"> </span><span class="token generics keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token generics"> </span><span class="token generics class-name" style="color:hsl(35, 99%, 36%)">Payload</span><span class="token generics punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">payload</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Data</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token annotation punctuation" style="color:hsl(119, 34%, 47%)">@Conditional</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">User</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 字段...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> userType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> email</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">private</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> phone</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/validation.png" alt="validation" class="img_LIWi"></p>
<p>上图展示了使用ApiFox测试带有@Validated校验的接口时的实际效果。当请求参数不符合校验规则时，系统会返回详细的错误信息，包括字段名称和具体的错误原因。这种友好的错误提示不仅方便前端开发人员快速定位问题，也提升了用户体验。在实际开发中，合理的数据校验可以大大减少因参数错误导致的系统异常，提高系统的健壮性和可维护性。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-最佳实践与注意事项">📝 最佳实践与注意事项<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E4%B8%8E%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="📝 最佳实践与注意事项的直接链接" title="📝 最佳实践与注意事项的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="一最佳实践">一、最佳实践<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%B8%80%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="一、最佳实践的直接链接" title="一、最佳实践的直接链接">​</a></h3>
<ol>
<li><strong>合理使用校验注解</strong>：根据业务需求选择合适的校验注解，避免过度校验</li>
<li><strong>自定义错误消息</strong>：为每个校验注解提供清晰的错误消息，帮助用户理解错误原因</li>
<li><strong>分组校验</strong>：使用分组校验处理不同场景下的校验需求</li>
<li><strong>全局异常处理</strong>：统一处理校验异常，提供友好的错误响应</li>
<li><strong>嵌套对象校验</strong>：对复杂对象使用嵌套校验，确保数据的完整性</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="二注意事项">二、注意事项<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#%E4%BA%8C%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="二、注意事项的直接链接" title="二、注意事项的直接链接">​</a></h3>
<ol>
<li><strong>性能考虑</strong>：过多的校验注解可能会影响性能，特别是在高并发场景下</li>
<li><strong>循环依赖</strong>：避免在自定义校验器中注入被校验的Bean，可能导致循环依赖</li>
<li><strong>空值处理</strong>：注意校验注解对空值的处理方式，有些注解默认不校验null值</li>
<li><strong>国际化</strong>：考虑错误消息的国际化，使用消息资源文件而非硬编码</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结">🎯 总结<a href="https://bianliangrensheng.cn/blog/springboot-validated-data-validation#-%E6%80%BB%E7%BB%93" class="hash-link" aria-label="🎯 总结的直接链接" title="🎯 总结的直接链接">​</a></h2>
<p>通过合理使用<code>@Validated</code>注解和Bean Validation，我们可以：</p>
<ul>
<li>✅ 减少业务逻辑中的参数校验代码</li>
<li>✅ 提高代码的可读性和可维护性</li>
<li>✅ 统一处理校验异常，提供友好的错误响应</li>
<li>✅ 支持复杂的校验场景，如分组校验、嵌套对象校验等</li>
</ul>
<p>在SpringBoot项目中，<code>@Validated</code>是一个强大而灵活的工具，能够帮助我们优雅地处理数据校验，提高开发效率和代码质量。</p>
<p>希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言交流。</p>]]></content:encoded>
            <category>SpringBoot</category>
            <category>Java开发</category>
            <category>后端开发</category>
        </item>
        <item>
            <title><![CDATA[React Router 6 详解：现代前端路由]]></title>
            <link>https://bianliangrensheng.cn/blog/react-router-v6-guide</link>
            <guid>https://bianliangrensheng.cn/blog/react-router-v6-guide</guid>
            <pubDate>Sat, 05 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[深入解析React Router 6的核心概念、内置组件和钩子函数，带你掌握现代前端路由配置技巧，轻松构建复杂的单页面应用。]]></description>
            <content:encoded><![CDATA[<p>🚀 React Router 是React生态中最受欢迎的路由库，用于构建单页面应用（SPA）的页面导航系统。版本6是一次重大升级，引入了全新的API和更简洁的语法。本文将带你了解React Router 6的核心概念和实用技巧，助你构建现代化的React应用。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-单页应用与路由基础">📚 单页应用与路由基础<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8%E4%B8%8E%E8%B7%AF%E7%94%B1%E5%9F%BA%E7%A1%80" class="hash-link" aria-label="📚 单页应用与路由基础的直接链接" title="📚 单页应用与路由基础的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-单页应用的工作原理">💡 单页应用的工作原理<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E5%8D%95%E9%A1%B5%E5%BA%94%EF%BF%BD%EF%BF%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86" class="hash-link" aria-label="💡 单页应用的工作原理的直接链接" title="💡 单页应用的工作原理的直接链接">​</a></h3>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>什么是SPA？</div><div class="admonitionContent_VWDh"><p>SPA（Single Page Application）是指整个应用只有一个HTML页面，页面切换时只做局部更新而不刷新整个页面。</p></div></div>
<p><strong>单页应用的优势：</strong></p>
<ul>
<li>🚀 <strong>更快的用户体验</strong> - 无需频繁刷新页面，避免白屏时间</li>
<li>📊 <strong>减少服务器压力</strong> - 只需加载必要的数据，而非整个页面</li>
<li>🎯 <strong>更流畅的交互</strong> - 类似原生应用的体验，无缝过渡</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由的本质与实现方式">🧭 路由的本质与实现方式<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E7%9A%84%E6%9C%AC%E8%B4%A8%E4%B8%8E%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F" class="hash-link" aria-label="🧭 路由的本质与实现方式的直接链接" title="🧭 路由的本质与实现方式的直接链接">​</a></h3>
<p><strong>后端路由：</strong></p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// Express后端路由示例</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">app</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">get</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'/users'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">req</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> res</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 处理用户列表请求</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>前端路由：</strong></p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// React Router前端路由示例</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/users</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">UserList</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>关键区别：前端路由在浏览器中处理URL变化，<strong>不会向服务器发送请求</strong>，而是在本地切换显示的组件。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-react-router-6-的革新">🔄 React Router 6 的革新<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-react-router-6-%E7%9A%84%E9%9D%A9%E6%96%B0" class="hash-link" aria-label="🔄 React Router 6 的革新的直接链接" title="🔄 React Router 6 的革新的直接链接">​</a></h2>
<p>React Router 6相比5.x版本有哪些重要变化？</p>
<table><thead><tr><th>特性</th><th>React Router 5</th><th>React Router 6</th></tr></thead><tbody><tr><td>路由容器</td><td><code>&lt;Switch&gt;</code></td><td><code>&lt;Routes&gt;</code></td></tr><tr><td>路由定义</td><td><code>&lt;Route component={Home}&gt;</code></td><td><code>&lt;Route element={&lt;Home/&gt;}&gt;</code></td></tr><tr><td>重定向</td><td><code>&lt;Redirect&gt;</code></td><td><code>&lt;Navigate&gt;</code></td></tr><tr><td>路由API</td><td>基于组件的API</td><td>基于Hooks的API</td></tr><tr><td>嵌套路由</td><td>需要确保路径匹配</td><td>自动相对路径</td></tr><tr><td>路由配置</td><td>主要基于组件声明</td><td>支持对象配置(useRoutes)</td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由系统的核心组件">🧩 路由系统的核心组件<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F%E7%9A%84%E6%A0%B8%E5%BF%83%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="🧩 路由系统的核心组件的直接链接" title="🧩 路由系统的核心组件的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由环境容器">🌐 路由环境容器<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E7%8E%AF%E5%A2%83%E5%AE%B9%E5%99%A8" class="hash-link" aria-label="🌐 路由环境容器的直接链接" title="🌐 路由环境容器的直接链接">​</a></h3>
<p><code>&lt;BrowserRouter&gt;</code> 利用 HTML5 的 history API (<code>pushState</code>, <code>replaceState</code> 等) 实现UI与URL的同步，是最常用的路由容器。</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ReactDOM</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-dom/client"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">BrowserRouter</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./App"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> root </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createRoot</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"root"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">root</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">BrowserRouter</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">App</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">BrowserRouter</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>而 <code>&lt;HashRouter&gt;</code> 使用URL的哈希部分（即 <code>#</code> 后面的部分）来保持UI与URL的同步，适用于不支持HTML5 history API的老旧浏览器。</p>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>注意</div><div class="admonitionContent_VWDh"><p><code>&lt;HashRouter&gt;</code> 的URL中会包含 <code>#</code> 符号，如 <code>http://example.com/#/about</code>，而 <code>&lt;BrowserRouter&gt;</code> 的URL更干净：<code>http://example.com/about</code></p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-路由定义与匹配">🛣️ 路由定义与匹配<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#%EF%B8%8F-%E8%B7%AF%E7%94%B1%E5%AE%9A%E4%B9%89%E4%B8%8E%E5%8C%B9%E9%85%8D" class="hash-link" aria-label="🛣️ 路由定义与匹配的直接链接" title="🛣️ 路由定义与匹配的直接链接">​</a></h3>
<p><code>&lt;Routes&gt;</code> 和 <code>&lt;Route&gt;</code> 是React Router 6中定义路由规则的核心组件：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Routes</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Route</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Home</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/about</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">About</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/dashboard</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Dashboard</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>嵌套路由的表达方式更加直观：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Layout</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">index</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Home</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">about</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">About</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">dashboard</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Dashboard</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">stats</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">DashboardStats</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">profile</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">UserProfile</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">*</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">NotFound</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-页面导航与链接组件">🔗 页面导航与链接组件<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E9%A1%B5%E9%9D%A2%E5%AF%BC%E8%88%AA%E4%B8%8E%E9%93%BE%E6%8E%A5%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="🔗 页面导航与链接组件的直接链接" title="🔗 页面导航与链接组件的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="link-组件的基本应用"><code>&lt;Link&gt;</code> 组件的基本应用<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#link-%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%BA%94%E7%94%A8" class="hash-link" aria-label="link-组件的基本应用的直接链接" title="link-组件的基本应用的直接链接">​</a></h4>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Link</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Navigation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">nav</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">首页</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/about</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">关于我们</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/dashboard</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">控制台</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">nav</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="navlink-与激活状态样式"><code>&lt;NavLink&gt;</code> 与激活状态样式<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#navlink-%E4%B8%8E%E6%BF%80%E6%B4%BB%E7%8A%B6%E6%80%81%E6%A0%B7%E5%BC%8F" class="hash-link" aria-label="navlink-与激活状态样式的直接链接" title="navlink-与激活状态样式的直接链接">​</a></h4>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">NavLink</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Navigation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">nav</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NavLink</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">className</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript parameter" style="color:hsl(5, 74%, 59%)"> isActive </span><span class="token tag script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> isActive </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"active-link"</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"normal-link"</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        首页</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NavLink</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NavLink</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/about</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript parameter" style="color:hsl(5, 74%, 59%)"> isActive </span><span class="token tag script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">fontWeight</span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> isActive </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"bold"</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"normal"</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">          </span><span class="token tag script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">color</span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> isActive </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"#ff0000"</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"#000000"</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        关于我们</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NavLink</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">nav</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="路由重定向与条件导航">路由重定向与条件导航<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#%E8%B7%AF%E7%94%B1%E9%87%8D%E5%AE%9A%E5%90%91%E4%B8%8E%E6%9D%A1%E4%BB%B6%E5%AF%BC%E8%88%AA" class="hash-link" aria-label="路由重定向与条件导航的直接链接" title="路由重定向与条件导航的直接链接">​</a></h4>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Navigate</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">ProtectedPage</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter"> isAuthenticated </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">isAuthenticated</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 如果未登录，重定向到登录页</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Navigate</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/login</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">replace</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">这是受保护的页面内容</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-嵌套路由与内容渲染">📤 嵌套路由与内容渲染<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1%E4%B8%8E%E5%86%85%E5%AE%B9%E6%B8%B2%E6%9F%93" class="hash-link" aria-label="📤 嵌套路由与内容渲染的直接链接" title="📤 嵌套路由与内容渲染的直接链接">​</a></h3>
<p><code>&lt;Outlet&gt;</code> 是一个重要的概念，它为嵌套路由提供了内容渲染位置：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Outlet</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Link</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Layout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">header</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">nav</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">首页</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/about</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">关于</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">          </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/dashboard</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">控制台</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Link</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">nav</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">header</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">main</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 子路由组件将在这里渲染 */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Outlet</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">main</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">footer</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">© 2025 我的应用</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">footer</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由钩子与实用功能">🪝 路由钩子与实用功能<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E9%92%A9%E5%AD%90%E4%B8%8E%E5%AE%9E%E7%94%A8%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="🪝 路由钩子与实用功能的直接链接" title="🪝 路由钩子与实用功能的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-编程式导航与历史控制">🧭 编程式导航与历史控制<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA%E4%B8%8E%E5%8E%86%E5%8F%B2%E6%8E%A7%E5%88%B6" class="hash-link" aria-label="🧭 编程式导航与历史控制的直接链接" title="🧭 编程式导航与历史控制的直接链接">​</a></h3>
<p><code>useNavigate</code> 钩子允许在事件处理程序中进行路由导航：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useNavigate </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">LoginForm</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> navigate </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useNavigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleSubmit</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">async</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">preventDefault</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 登录逻辑...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">loginSuccess</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 登录成功后跳转到首页</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">navigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"/dashboard"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">replace</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 替换当前历史记录</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">state</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"login"</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 传递状态数据</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">form</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onSubmit</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handleSubmit</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 表单内容 */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">submit</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">登录</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">button</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">navigate</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token tag script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">返回上一页</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">form</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-声明式与配置式路由管理">📋 声明式与配置式路由管理<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E5%A3%B0%E6%98%8E%E5%BC%8F%E4%B8%8E%E9%85%8D%E7%BD%AE%E5%BC%8F%E8%B7%AF%E7%94%B1%E7%AE%A1%E7%90%86" class="hash-link" aria-label="📋 声明式与配置式路由管理的直接链接" title="📋 声明式与配置式路由管理的直接链接">​</a></h3>
<p><code>useRoutes</code> 钩子提供了一种配置式的路由定义方式：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useRoutes </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Home</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/Home"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">About</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/About"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Dashboard</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/Dashboard"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">DashboardStats</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/DashboardStats"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">UserProfile</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/UserProfile"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">NotFound</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/NotFound"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Layout</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./components/Layout"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> routes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"/"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Layout</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">index</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Home</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"about"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">About</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"dashboard"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Dashboard</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"stats"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">DashboardStats</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"profile"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">UserProfile</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"*"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NotFound</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> routes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-url参数与数据传递">📝 URL参数与数据传递<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-url%E5%8F%82%E6%95%B0%E4%B8%8E%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92" class="hash-link" aria-label="📝 URL参数与数据传递的直接链接" title="📝 URL参数与数据传递的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="路径参数的获取">路径参数的获取<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#%E8%B7%AF%E5%BE%84%E5%8F%82%E6%95%B0%E7%9A%84%E8%8E%B7%E5%8F%96" class="hash-link" aria-label="路径参数的获取的直接链接" title="路径参数的获取的直接链接">​</a></h4>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useParams </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">ProductDetail</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 路由定义: &lt;Route path="/products/:productId" element={&lt;ProductDetail /&gt;} /&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> productId </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">产品详情</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">正在查看产品ID: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">productId</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="查询参数的处理">查询参数的处理<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#%E6%9F%A5%E8%AF%A2%E5%8F%82%E6%95%B0%E7%9A%84%E5%A4%84%E7%90%86" class="hash-link" aria-label="查询参数的处理的直接链接" title="查询参数的处理的直接链接">​</a></h4>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useSearchParams </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">ProductList</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">searchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setSearchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useSearchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 获取当前URL中的查询参数</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> category </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> searchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">get</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"category"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"all"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> page </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">parseInt</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">searchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">get</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"page"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"1"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">10</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleCategoryChange</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">newCategory</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 更新查询参数</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">setSearchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">category</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> newCategory</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">page</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleNextPage</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">setSearchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> category</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">page</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> page </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">handleCategoryChange</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"all"</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">全部</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">handleCategoryChange</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"electronics"</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">电子产品</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">handleCategoryChange</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">"clothing"</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">服装</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">当前分类: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">category</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text">, 页码: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">page</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 产品列表 */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handleNextPage</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">下一页</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-当前位置信息的获取与使用">📍 当前位置信息的获取与使用<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%E7%9A%84%E8%8E%B7%E5%8F%96%E4%B8%8E%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="📍 当前位置信息的获取与使用的直接链接" title="📍 当前位置信息的获取与使用的直接链接">​</a></h3>
<p><code>useLocation</code> 钩子提供对当前URL位置的完整访问：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useLocation </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Analytics</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useLocation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 当URL变化时记录页面访问</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 发送页面访问事件到分析服务</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">trackPageView</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">pathname</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">pathname</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">search</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">search</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">当前路径: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">pathname</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">查询参数: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">search</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&amp;&amp;</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">状态数据: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">JSON</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">stringify</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由高级应用模式">🎯 路由高级应用模式<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E9%AB%98%E7%BA%A7%E5%BA%94%E7%94%A8%E6%A8%A1%E5%BC%8F" class="hash-link" aria-label="🎯 路由高级应用模式的直接链接" title="🎯 路由高级应用模式的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-权限控制与路由守卫">🔐 权限控制与路由守卫<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6%E4%B8%8E%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB" class="hash-link" aria-label="🔐 权限控制与路由守卫的直接链接" title="🔐 权限控制与路由守卫的直接链接">​</a></h3>
<p>保护路由是常见的应用需求，React Router 6可以轻松实现：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Navigate</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Outlet</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useLocation </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">ProtectedRoute</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter"> isAuthenticated </span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useLocation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">isAuthenticated</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 重定向到登录页，并记住尝试访问的页面</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Navigate</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">to</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/login</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">state</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">replace</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 渲染子路由</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Outlet</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 在路由配置中使用</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> isAuthenticated </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">checkAuthStatus</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 检查用户是否已登录</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/login</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Login</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/register</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Register</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 受保护的路由 */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">ProtectedRoute</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag attr-name" style="color:hsl(35, 99%, 36%)">isAuthenticated</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:hsl(5, 74%, 59%)">isAuthenticated</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/dashboard</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Dashboard</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/profile</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">UserProfile</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/settings</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Settings</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Home</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-代码分割与性能优化">🔄 代码分割与性能优化<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E4%B8%8E%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" class="hash-link" aria-label="🔄 代码分割与性能优化的直接链接" title="🔄 代码分割与性能优化的直接链接">​</a></h3>
<p>懒加载是提高应用性能的重要方式：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Suspense</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> lazy </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Routes</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Route</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 懒加载路由组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">Home</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/Home"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">About</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/About"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">Dashboard</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"./pages/Dashboard"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Suspense</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">fallback</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag script language-javascript plain-text" style="color:hsl(5, 74%, 59%)">页面加载中...</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Home</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/about</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">About</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Route</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">path</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/dashboard</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">element</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">Dashboard</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Routes</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Suspense</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>懒加载的主要优势：</p>
<ul>
<li>🚀 <strong>减小初始加载包体积</strong> - 只加载首屏需要的组件</li>
<li>⚡ <strong>提升首屏加载速度</strong> - 将非关键组件的加载推迟到需要时</li>
<li>📱 <strong>优化移动端体验</strong> - 特别适合网络条件受限的场景</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-自定义路由工具与扩展">🧪 自定义路由工具与扩展<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%87%AA%E5%AE%9A%E4%B9%89%E8%B7%AF%E7%94%B1%E5%B7%A5%E5%85%B7%E4%B8%8E%E6%89%A9%E5%B1%95" class="hash-link" aria-label="🧪 自定义路由工具与扩展的直接链接" title="🧪 自定义路由工具与扩展的直接链接">​</a></h3>
<p>可以创建自定义钩子来封装和增强路由功能：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useLocation</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useNavigate</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useParams </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 结合多个路由钩子的自定义钩子</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRouter</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useLocation</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> navigate </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useNavigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> params </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    navigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    params</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">query</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Object</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">fromEntries</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">URLSearchParams</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">location</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">search</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 便捷导航方法</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">push</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">to</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">navigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">to</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">replace</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">to</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">navigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">to</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">replace</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">goBack</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">navigate</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 使用示例</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">ProductPage</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> router </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRouter</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> productId </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> router</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">params</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> category </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> router</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">query</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">router</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">goBack</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">返回</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">产品ID: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">productId</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">分类: </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">category</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由架构设计模式">📝 路由架构设计模式<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" class="hash-link" aria-label="📝 路由架构设计模式的直接链接" title="📝 路由架构设计模式的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-组织复杂应用的路由结构">🧠 组织复杂应用的路由结构<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E7%BB%84%E7%BB%87%E5%A4%8D%E6%9D%82%E5%BA%94%E7%94%A8%E7%9A%84%E8%B7%AF%E7%94%B1%E7%BB%93%E6%9E%84" class="hash-link" aria-label="🧠 组织复杂应用的路由结构的直接链接" title="🧠 组织复杂应用的路由结构的直接链接">​</a></h3>
<p>大型应用中，路由结构的组织至关重要：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// src/routes/index.jsx - 集中管理所有路由</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> lazy </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">MainLayout</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../layouts/MainLayout"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">AdminLayout</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../layouts/AdminLayout"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ProtectedRoute</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../components/ProtectedRoute"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LoginPage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/LoginPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 懒加载页面组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">HomePage</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/HomePage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">AboutPage</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/AboutPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">DashboardPage</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/DashboardPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">UserManagementPage</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/UserManagementPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token maybe-class-name">NotFoundPage</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/NotFoundPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 导出路由配置</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> routes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"/"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">MainLayout</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">index</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">HomePage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"about"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">AboutPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"login"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">LoginPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"/admin"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">ProtectedRoute</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">AdminLayout</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">ProtectedRoute</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">index</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">DashboardPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"users"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">UserManagementPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"*"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NotFoundPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-模块化路由配置的优势">🧩 模块化路由配置的优势<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E6%A8%A1%E5%9D%97%E5%8C%96%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE%E7%9A%84%E4%BC%98%E5%8A%BF" class="hash-link" aria-label="🧩 模块化路由配置的优势的直接链接" title="🧩 模块化路由配置的优势�的直接链接">​</a></h3>
<p>将路由按功能模块拆分，能提高代码的可维护性：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// src/routes/mainRoutes.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">MainLayout</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../layouts/MainLayout"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">HomePage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/HomePage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">AboutPage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/AboutPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> mainRoutes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"/"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">MainLayout</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">index</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">HomePage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"about"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">AboutPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// src/routes/adminRoutes.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">AdminLayout</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../layouts/AdminLayout"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">DashboardPage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/DashboardPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">UserManagementPage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/UserManagementPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ProtectedRoute</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../components/ProtectedRoute"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> adminRoutes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"/admin"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">ProtectedRoute</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">AdminLayout</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">ProtectedRoute</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">index</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">DashboardPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"users"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">UserManagementPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// src/routes/index.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> mainRoutes </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./mainRoutes"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> adminRoutes </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"./adminRoutes"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">NotFoundPage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/NotFoundPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LoginPage</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/LoginPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> routes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  mainRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  adminRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"/login"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">LoginPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"*"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">NotFoundPage</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-动态路由加载与微前端集成">📦 动态路由加载与微前端集成<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%BE%AE%E5%89%8D%EF%BF%BD%EF%BF%BD%E7%AB%AF%E9%9B%86%E6%88%90" class="hash-link" aria-label="📦 动态路由加载与微前端集成的直接链接" title="📦 动态路由加载与微前端集成的直接链接">​</a></h3>
<p>在大型应用或微前端架构中，动态加载路由配置非常有用：</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// src/routes/index.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Suspense</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> lazy </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useRoutes </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react-router-dom"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">LoadingSpinner</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"../components/LoadingSpinner"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 动态导入路由模块</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">loadRoutes</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">async</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> mainModule </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"./mainRoutes"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> adminModule </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"./adminRoutes"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> authModule </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"./authRoutes"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    mainModule</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">mainRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    adminModule</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">adminRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    authModule</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">authRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">path</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"*"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">element</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token function" style="color:hsl(221, 87%, 60%)">lazy</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../pages/NotFoundPage"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 应用入口使用</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">routes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">loadRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">then</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">setRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> routeElement </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRoutes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">routes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Suspense</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">fallback</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag script language-javascript tag class-name" style="color:hsl(35, 99%, 36%)">LoadingSpinner</span><span class="token tag script language-javascript tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">routeElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">Suspense</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-路由技术的演进与前景">📝 路由技术的演进与前景<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E8%B7%AF%E7%94%B1%E6%8A%80%E6%9C%AF%E7%9A%84%E6%BC%94%E8%BF%9B%E4%B8%8E%E5%89%8D%E6%99%AF" class="hash-link" aria-label="📝 路由技术的演进与前景的直接链接" title="📝 路由技术的演进与前景的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-react-router-6-的核心优势">💎 React Router 6 的核心优势<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-react-router-6-%E7%9A%84%E6%A0%B8%E5%BF%83%E4%BC%98%E5%8A%BF" class="hash-link" aria-label="💎 React Router 6 的核心优势的直接链接" title="💎 React Router 6 的核心优势的直接链接">​</a></h3>
<p>React Router 6相比之前的版本有显著的改进和优势：</p>
<table><thead><tr><th>特性</th><th>优势</th></tr></thead><tbody><tr><td>更简洁的API</td><td>减少样板代码，提高开发效率</td></tr><tr><td>Hooks驱动</td><td>更好地融入React函数式组件生态</td></tr><tr><td>相对路径</td><td>更直观的嵌套路由定义</td></tr><tr><td>自动路由排名</td><td>智能匹配最具体的路由</td></tr><tr><td>更好的类型支持</td><td>与TypeScript结合更紧密</td></tr><tr><td>更小的包体积</td><td>减少约2/3的代码量</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-现代react应用的路由最佳实践">🚀 现代React应用的路由最佳实践<a href="https://bianliangrensheng.cn/blog/react-router-v6-guide#-%E7%8E%B0%E4%BB%A3react%E5%BA%94%E7%94%A8%E7%9A%84%E8%B7%AF%E7%94%B1%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5" class="hash-link" aria-label="🚀 现代React应用的路由最佳实践的直接链接" title="🚀 现代React应用的路由最佳实践的直接链接">​</a></h3>
<ol>
<li><strong>路由层次结构</strong> - 使用嵌套路由反映UI层次结构，提高代码可读性</li>
<li><strong>性能优化</strong> - 结合代码分割和懒加载，减少初始加载时间</li>
<li><strong>声明式配置</strong> - 使用<code>useRoutes</code>进行集中化、声明式的路由管理</li>
<li><strong>权限控制</strong> - 实现基于角色的路由访问控制</li>
<li><strong>数据传递</strong> - 合理使用URL参数和状态传递数据</li>
<li><strong>错误处理</strong> - 设置通配符路由处理未匹配路径</li>
</ol>
<blockquote>
<p><strong>"优秀的路由设计是用户体验的基础，也是前端架构的骨架"</strong></p>
</blockquote>
<p>React Router 6通过简化API和引入新的Hooks，使路由管理变得更加直观和强大。无论是构建简单的个人项目还是复杂的企业级应用，掌握React Router都是现代React开发者的必备技能。</p>
<hr>
<p><strong>下期预告：</strong> 《React状态管理全解析：从Context到Redux再到Zustand》，敬请期待！</p>
<p>如果你有关于React Router的使用经验或问题，欢迎在评论区分享交流！👋</p>]]></content:encoded>
            <category>React</category>
            <category>前端开发</category>
            <category>路由管理</category>
        </item>
        <item>
            <title><![CDATA[Ubuntu Redis编译安装：从源码到生产环境的完整指南]]></title>
            <link>https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation</link>
            <guid>https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation</guid>
            <pubDate>Sat, 05 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍在Ubuntu Server上从源码编译安装Redis并正确配置生产环境的完整步骤，帮助开发者搭建高性能Redis缓存服务]]></description>
            <content:encoded><![CDATA[<p>Redis作为高性能的键值存储数据库，在现代应用架构中扮演着至关重要的角色。虽然可以通过apt快速安装Redis，但从源码编译安装能够获得最新版本、最佳性能以及更精细的定制能力。本文将详细介绍如何在Ubuntu系统上编译安装Redis并配置生产环境。</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-安装环境概述">🖥️ 安装环境概述<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#%EF%B8%8F-%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="🖥️ 安装环境概述的直接链接" title="🖥️ 安装环境概述的直接链接">​</a></h2>
<p>在开始安装前，先了解下我们的操作环境和规划：</p>
<table><thead><tr><th>项目</th><th>详情</th></tr></thead><tbody><tr><td>操作系统</td><td>Ubuntu Server 22.04 LTS 64bit</td></tr><tr><td>Redis版本</td><td>7.2.4</td></tr><tr><td>源码包路径</td><td>/download/redis-7.2.4.tar.gz</td></tr><tr><td>目标安装路径</td><td>/model/redis7</td></tr><tr><td>配置文件路径</td><td>/model/redis7/conf</td></tr><tr><td>数据存储路径</td><td>/model/redis7/data</td></tr><tr><td>日志路径</td><td>/model/redis7/logs</td></tr></tbody></table>
<blockquote>
<p><strong>为什么选择编译安装？</strong> 编译安装虽然步骤较多，但可以获得最新特性、最佳性能优化，以及对安装路径和配置的完全控制。</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-安装步骤详解">🚀 安装步骤详解<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4%E8%AF%A6%E8%A7%A3" class="hash-link" aria-label="🚀 安装步骤详解的直接链接" title="🚀 安装步骤详解的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-一安装编译依赖">📦 一、安装编译依赖<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E4%B8%80%E5%AE%89%E8%A3%85%E7%BC%96%E8%AF%91%E4%BE%9D%E8%B5%96" class="hash-link" aria-label="📦 一、安装编译依赖的直接链接" title="📦 一、安装编译依赖的直接链接">​</a></h3>
<p>Redis编译需要一些基础开发库和工具：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">apt</span><span class="token plain"> update</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">apt</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-y</span><span class="token plain"> build-essential tcl pkg-config libssl-dev</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>依赖说明</div><div class="admonitionContent_VWDh"><ul>
<li>build-essential：提供编译软件所需的基本工具</li>
<li>tcl：用于Redis测试</li>
<li>pkg-config：帮助找到已安装库的信息</li>
<li>libssl-dev：支持TLS加密连接</li>
</ul></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-二准备安装目录">📂 二、准备安装目录<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E4%BA%8C%E5%87%86%E5%A4%87%E5%AE%89%E8%A3%85%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="📂 二、准备安装目录的直接链接" title="📂 二、准备安装目录的直接链接">​</a></h3>
<p>创建所需的各种目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/redis7</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/redis7/conf</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/redis7/data</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">mkdir</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> /model/redis7/logs</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-三解压源码包">📦 三、解压源码包<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E4%B8%89%E8%A7%A3%E5%8E%8B%E6%BA%90%E7%A0%81%E5%8C%85" class="hash-link" aria-label="📦 三、解压源码包的直接链接" title="📦 三、解压源码包的直接链接">​</a></h3>
<p>将Redis源码包解压到临时位置：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">cd</span><span class="token plain"> /download</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">tar</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-xzvf</span><span class="token plain"> redis-7.2.4.tar.gz</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-四编译redis">🔨 四、编译Redis<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E5%9B%9B%E7%BC%96%E8%AF%91redis" class="hash-link" aria-label="🔨 四、编译Redis的直接链接" title="🔨 四、编译Redis的直接链接">​</a></h3>
<p>进入源码目录并开始编译：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">cd</span><span class="token plain"> redis-7.2.4</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">make</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制�代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>编译过程可能需要几分钟，具体时间取决于服务器性能。</p>
</blockquote>
<p>可选但推荐：运行测试确保编译正确</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">make</span><span class="token plain"> </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">test</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-五安装到指定路径">📥 五、安装到指定路径<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E4%BA%94%E5%AE%89%E8%A3%85%E5%88%B0%E6%8C%87%E5%AE%9A%E8%B7%AF%E5%BE%84" class="hash-link" aria-label="📥 五、安装到指定路径的直接链接" title="📥 五、安装到指定路径的直接链接">​</a></h3>
<p>使用PREFIX参数将编译好的文件安装到我们的目标目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">make</span><span class="token plain"> </span><span class="token assign-left variable" style="color:hsl(221, 87%, 60%)">PREFIX</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain">/model/redis7 </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>这会将Redis的二进制文件安装到<code>/model/redis7/bin</code>目录下。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-六配置redis">⚙️ 六、配置Redis<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#%EF%B8%8F-%E5%85%AD%E9%85%8D%E7%BD%AEredis" class="hash-link" aria-label="⚙️ 六、配置Redis的直接链接" title="⚙️ 六、配置Redis的直接链接">​</a></h3>
<p>复制默认配置文件到我们的配置目录：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">cp</span><span class="token plain"> /download/redis-7.2.4/redis.conf /model/redis7/conf/</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>编辑配置文件以允许外部访问和其他生产环境设置：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /model/redis7/conf/redis.conf</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>需要修改的关键配置项：</p>
<div class="language-ini codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-ini codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 允许所有IP访问</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">bind 0.0.0.0</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 关闭保护模式</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">protected-mode no</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 设置端口（默认是6379）</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">port 6379</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 以守护进程方式运行</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">daemonize yes</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 指定pid文件位置</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">pidfile /model/redis7/redis_6379.pid</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 指定日志文件位置</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">logfile "/model/redis7/logs/redis.log"</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 指定数据存储位置</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">dir /model/redis7/data</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># 设置访问密码（强烈建议为安全性设置）</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">requirepass YourStrongPasswordHere</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-warning admonition_Ax3r alert alert--warning"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>安全提示</div><div class="admonitionContent_VWDh"><p>在生产环境中，<strong>必须</strong>设置一个强密码并考虑启用TLS加密！默认配置下的Redis实例容易受到攻击。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-七创建系统服务">🔄 七、创建系统服务<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E4%B8%83%E5%88%9B%E5%BB%BA%E7%B3%BB%E7%BB%9F%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="🔄 七、创建系统服务的直接链接" title="🔄 七、创建系统服务的直接链接">​</a></h3>
<p>创建systemd服务文件以便系统管理Redis服务：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /etc/systemd/system/redis7.service</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>添加以下内容：</p>
<div class="language-ini codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-ini codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[Unit]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Description=Redis In-Memory Data Store</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">After=network.target</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[Service]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Type=forking</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">ExecStart=/model/redis7/bin/redis-server /model/redis7/conf/redis.conf</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">ExecStop=/model/redis7/bin/redis-cli -h 127.0.0.1 -p 6379 -a "YourStrongPasswordHere" shutdown</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Restart=always</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">User=root</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">Group=root</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">RuntimeDirectory=redis</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">RuntimeDirectoryMode=0755</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">[Install]</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">WantedBy=multi-user.target</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-tip admonition_Ax3r alert alert--success"><div class="admonitionHeading_nDt_"><span class="admonitionIcon_XL_G"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>服务文件说明</div><div class="admonitionContent_VWDh"><ul>
<li>Type=forking：表示进程会fork子进程然后退出</li>
<li>ExecStop：使用redis-cli优雅地关闭Redis</li>
<li>Restart=always：服务崩溃时自动重启</li>
</ul></div></div>
<p>记得将"YourStrongPasswordHere"替换为你在配置文件中设置的实际密码。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-八配置环境变量">🌐 八、配置环境变量<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E5%85%AB%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F" class="hash-link" aria-label="🌐 八、配置环境变量的直接链接" title="🌐 八、配置环境变量的直接链接">​</a></h3>
<p>创建环境变量配置文件：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">nano</span><span class="token plain"> /etc/profile.d/redis7.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代�码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>添加以下内容：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">export</span><span class="token plain"> </span><span class="token assign-left variable environment constant" style="color:hsl(35, 99%, 36%)">PATH</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token environment constant" style="color:hsl(35, 99%, 36%)">$PATH</span><span class="token plain">:/model/redis7/bin</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>设置权限并应用：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">chmod</span><span class="token plain"> +x /etc/profile.d/redis7.sh</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">source</span><span class="token plain"> /etc/profile.d/redis7.sh</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="️-九启动redis服务">▶️ 九、启动Redis服务<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#%EF%B8%8F-%E4%B9%9D%E5%90%AF%E5%8A%A8redis%E6%9C%8D%E5%8A%A1" class="hash-link" aria-label="▶️ 九、启动Redis服务的直接链接" title="▶️ 九、启动Redis服务的直接链接">​</a></h3>
<p>重新加载systemd配置并启动Redis：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl daemon-reload</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl start redis7</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>设置开机自启：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl </span><span class="token builtin class-name" style="color:hsl(35, 99%, 36%)">enable</span><span class="token plain"> redis7</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>检查服务状态：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> systemctl status redis7</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果看到"active (running)"状态，说明Redis服务已成功启动。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-十验证安装">✅ 十、验证安装<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E5%8D%81%E9%AA%8C%E8%AF%81%E5%AE%89%E8%A3%85" class="hash-link" aria-label="✅ 十、验证安装的直接链接" title="✅ 十、验证安装的直接链接">​</a></h3>
<p>测试Redis连接：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">redis-cli</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果你设置了密码，需要先认证：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token constant" style="color:hsl(35, 99%, 36%)">AUTH</span><span class="token plain"> </span><span class="token maybe-class-name">YourStrongPasswordHere</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>测试基本操作：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token constant" style="color:hsl(35, 99%, 36%)">SET</span><span class="token plain"> test </span><span class="token string" style="color:hsl(119, 34%, 47%)">"It works!"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token constant" style="color:hsl(35, 99%, 36%)">GET</span><span class="token plain"> test</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果能正确获取值，说明Redis安装和配置成功！</p>
<hr>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-常见问题解决">🔍 常见问题解决<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3" class="hash-link" aria-label="🔍 常见问题解决的直接链接" title="🔍 常见问题解决的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-无法编译">❓ 无法编译<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E6%97%A0%E6%B3%95%E7%BC%96%E8%AF%91" class="hash-link" aria-label="❓ 无法编译的直接链接" title="❓ 无法编译的直接链接">​</a></h3>
<p>如果遇到编译错误：</p>
<ul>
<li>确保已安装所有依赖</li>
<li>检查是否有足够的磁盘空间</li>
<li>查看detailed_error.log可以获取更多信息：<code>make &gt; detailed_error.log 2&gt;&amp;1</code></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-服务无法启动">❓ 服务无法启动<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E6%9C%8D%E5%8A%A1%E6%97%A0%E6%B3%95%E5%90%AF%E5%8A%A8" class="hash-link" aria-label="❓ 服务无法启动的直接链接" title="❓ 服务无法启动的直接链接">​</a></h3>
<p>如果Redis服务无法启动：</p>
<ul>
<li>检查配置文件语法：<code>redis-server /model/redis7/conf/redis.conf --test-memory 1</code></li>
<li>检查日志文件获取错误信息：<code>cat /model/redis7/logs/redis.log</code></li>
<li>确认端口未被占用：<code>sudo lsof -i :6379</code></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-无法远程连接">❓ 无法远程连接<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E6%97%A0%E6%B3%95%E8%BF%9C%E7%A8%8B%E8%BF%9E%E6%8E%A5" class="hash-link" aria-label="❓ 无法远程连接的直接链接" title="❓ 无法远程连接的直接链接">​</a></h3>
<p>如果无法从远程主机连接Redis：</p>
<ul>
<li>检查防火墙设置：<code>sudo ufw status</code></li>
<li>如果启用了防火墙，允许Redis端口：<code>sudo ufw allow 6379/tcp</code></li>
<li>再次确认bind设置为0.0.0.0且protected-mode设置为no</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-性能优化建议">🚀 性能优化建议<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%BB%BA%E8%AE%AE" class="hash-link" aria-label="🚀 性能优化建议的直接链接" title="🚀 性能优化建议的直接链接">​</a></h2>
<p>对于生产环境，考虑以下Redis性能优化：</p>
<ol>
<li>
<p><strong>内存设置</strong>：设置<code>maxmemory</code>参数和合适的淘汰策略</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">maxmemory 2gb</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">maxmemory</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">policy allkeys</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">lru</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>持久化配置</strong>：根据需要调整RDB或AOF持久化</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># </span><span class="token constant" style="color:hsl(35, 99%, 36%)">RDB</span><span class="token plain">持久化</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">save </span><span class="token number" style="color:hsl(35, 99%, 36%)">900</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">save </span><span class="token number" style="color:hsl(35, 99%, 36%)">300</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">10</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">save </span><span class="token number" style="color:hsl(35, 99%, 36%)">60</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">10000</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"># </span><span class="token constant" style="color:hsl(35, 99%, 36%)">AOF</span><span class="token plain">持久化</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">appendonly yes</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">appendfsync everysec</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>连接参数</strong>：调整最大客户端连接数</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">maxclients </span><span class="token number" style="color:hsl(35, 99%, 36%)">10000</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p><strong>内核参数</strong>：考虑调整Linux内核参数以优化Redis性能</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">sysctl</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-w</span><span class="token plain"> </span><span class="token assign-left variable" style="color:hsl(221, 87%, 60%)">vm.overcommit_memory</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token function" style="color:hsl(221, 87%, 60%)">sudo</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">sysctl</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-w</span><span class="token plain"> </span><span class="token assign-left variable" style="color:hsl(221, 87%, 60%)">net.core.somaxconn</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token number" style="color:hsl(35, 99%, 36%)">65535</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="-总结ubuntu上编译安装redis的关键点">📌 总结：Ubuntu上编译安装Redis的关键点<a href="https://bianliangrensheng.cn/blog/ubuntu-redis-compilation-installation#-%E6%80%BB%E7%BB%93ubuntu%E4%B8%8A%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85redis%E7%9A%84%E5%85%B3%E9%94%AE%E7%82%B9" class="hash-link" aria-label="📌 总结：Ubuntu上编译安装Redis的关键点的直接链接" title="📌 总结：Ubuntu上编译安装Redis的关键点的直接链接">​</a></h2>
<p>回顾整个安装过程，成功编译安装Redis的关键在于：</p>
<ol>
<li>安装正确且完整的依赖</li>
<li>合理规划目录结构</li>
<li>正确设置配置文件</li>
<li>创建系统服务实现自动管理</li>
<li>配置适当的安全措施</li>
</ol>
<p>这种编译安装方式让你完全掌控Redis的各个方面，非常适合生产环境部署和特殊定制需求。</p>
<hr>
<p>你有什么Redis安装或优化方面的问题？欢迎在评论区分享！</p>]]></content:encoded>
            <category>Ubuntu</category>
            <category>Redis</category>
            <category>环境配置</category>
            <category>数据库</category>
            <category>缓存</category>
        </item>
        <item>
            <title><![CDATA[Redis官方免费30M云数据库使用教程]]></title>
            <link>https://bianliangrensheng.cn/blog/redis-free-cloud-database</link>
            <guid>https://bianliangrensheng.cn/blog/redis-free-cloud-database</guid>
            <pubDate>Sat, 05 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍如何注册并使用Redis官方提供的免费30MB云数据库服务，包括注册流程、配置步骤和连接方法]]></description>
            <content:encoded><![CDATA[<p>在开发过程中，我们经常需要一个Redis服务来做缓存、消息队列或者简单的数据存储。但是自己搭建Redis服务器不仅麻烦，还需要花钱购买服务器。其实，Redis官方提供了30MB的免费云数据库服务，足够满足小型项目或个人开发测试需求。本文将详细介绍如何注册并使用这个免费的Redis云数据库。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="redislabs简介">RedisLabs简介<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#redislabs%E7%AE%80%E4%BB%8B" class="hash-link" aria-label="RedisLabs简介的直接链接" title="RedisLabs简介的直接链接">​</a></h2>
<p>RedisLabs是Redis的官方云服务提供商，由Redis的创始人Salvatore Sanfilippo(antirez)创建的公司。他们提供了从免费到企业级的各种Redis云服务方案。免费方案虽然只有30MB的存储空间，但对于学习和小型项目来说已经足够用了。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="免费方案特点">免费方案特点<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E5%85%8D%E8%B4%B9%E6%96%B9%E6%A1%88%E7%89%B9%E7%82%B9" class="hash-link" aria-label="免费方案特点的直接链接" title="免费方案特点的直接链接">​</a></h2>
<ul>
<li>存储空间：30MB</li>
<li>连接数：30个并发连接</li>
<li>专用RESP端口访问</li>
<li>自动备份和故障恢复</li>
<li>不需要手机验证码，仅需邮箱注册</li>
<li>多地区可选：日本、新加坡、英国、美国等</li>
<li>国内可正常访问和使用</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="注册流程">注册流程<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E6%B3%A8%E5%86%8C%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="注册流程的直接链接" title="注册流程的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-访问官网">1. 访问官网<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#1-%E8%AE%BF%E9%97%AE%E5%AE%98%E7%BD%91" class="hash-link" aria-label="1. 访问官网的直接链接" title="1. 访问官网的直接链接">​</a></h3>
<p>首先访问Redis官方云服务网站：<a href="https://cloud.redis.io/#/login" target="_blank" rel="noopener noreferrer" class="link">https://cloud.redis.io/#/login</a></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-注册账号">2. 注册账号<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#2-%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7" class="hash-link" aria-label="2. 注册账号的直接链接" title="2. 注册账号的直接链接">​</a></h3>
<p>点击右上角的"Try Free"或"Get Started"按钮，进入注册页面。</p>
<p>填写注册信息，包括：</p>
<ul>
<li>邮箱地址</li>
<li>密码</li>
<li>姓名</li>
<li>公司名称(可选)</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-验证邮箱">3. 验证邮箱<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#3-%E9%AA%8C%E8%AF%81%E9%82%AE%E7%AE%B1" class="hash-link" aria-label="3. 验证邮箱的直接链接" title="3. 验证邮箱的直接链接">​</a></h3>
<p>注册后，Redis官方会发送一封验证邮件到你的邮箱。请查收并点击邮件中的验证链接。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="4-登录账号">4. 登录账号<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#4-%E7%99%BB%E5%BD%95%E8%B4%A6%E5%8F%B7" class="hash-link" aria-label="4. 登录账号的直接链接" title="4. 登录账号的直接链接">​</a></h3>
<p>验证邮箱后，返回RedisLabs官网并使用刚才注册的邮箱和密码登录。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="创建免费redis数据库">创建免费Redis数据库<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E5%88%9B%E5%BB%BA%E5%85%8D%E8%B4%B9redis%E6%95%B0%E6%8D%AE%E5%BA%93" class="hash-link" aria-label="创建免费Redis数据库的直接链接" title="创建免费Redis数据库的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-查看默认数据库">1. 查看默认数据库<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#1-%E6%9F%A5%E7%9C%8B%E9%BB%98%E8%AE%A4%E6%95%B0%E6%8D%AE%E5%BA%93" class="hash-link" aria-label="1. 查看默认数据库的直接链接" title="1. 查看默认数据库的直接链接">​</a></h3>
<p>登录后，你会进入控制台页面。对于新注册的用户，RedisLabs通常会自动创建一个免费的30MB数据库实例，你可以在数据库列表中看到它。</p>
<p><img decoding="async" loading="lazy" src="c:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20250405093752797.png" alt="image-20250405093752797" class="img_LIWi"></p>
<p>如果系统已经为你创建了默认数据库，你可以直接使用它，无需额外创建。如果没有看到默认数据库，或者你想创建一个新的数据库，可以点击"New database"按钮进行创建。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-创建新数据库可选">2. 创建新数据库（可选）<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#2-%E5%88%9B%E5%BB%BA%E6%96%B0%E6%95%B0%E6%8D%AE%E5%BA%93%E5%8F%AF%E9%80%89" class="hash-link" aria-label="2. 创建新数据库（可选）的直接链接" title="2. 创建新数据库（可选）的直接链接">​</a></h3>
<p>如果你需要创建新的数据库，点击页面右上角的"New database"按钮。</p>
<p>在数据库创建页面：</p>
<ul>
<li>选择"Fixed Size"固定大小类型</li>
<li>选择"Free 30MB"免费套餐</li>
<li>输入数据库名称（如"myredis"）</li>
<li>选择地区（建议选择离你最近的地区，如日本或新加坡）</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-配置数据库可选">3. 配置数据库（可选）<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#3-%E9%85%8D%E7%BD%AE%E6%95%B0%E6%8D%AE%E5%BA%93%E5%8F%AF%E9%80%89" class="hash-link" aria-label="3. 配置数据库（可选）的直接链接" title="3. 配置数据库（可选）的直接链接">​</a></h3>
<p>配置Redis数据库的一些参数：</p>
<ul>
<li>可以选择Redis版本（默认即可）</li>
<li>可以设置数据持久化选项（默认即可）</li>
<li>可以启用数据备份（免费版有限制）</li>
</ul>
<p>完成配置后，点击"comfirm &amp; pay"按钮创建数据库。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="4-使用数据库">4. 使用数据库<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#4-%E4%BD%BF%E7%94%A8%E6%95%B0%E6%8D%AE%E5%BA%93" class="hash-link" aria-label="4. 使用数据库的直接链接" title="4. 使用数据库的直接链接">​</a></h3>
<p>无论是使用自动创建的默认数据库还是自己新建的数据库，你都可以点击"Connect"按钮获取连接信息。</p>
<p><img decoding="async" loading="lazy" src="c:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20250405092255259.png" alt="image-20250405092255259" class="img_LIWi"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="连接redis云数据库">连接Redis云数据库<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E8%BF%9E%E6%8E%A5redis%E4%BA%91%E6%95%B0%E6%8D%AE%E5%BA%93" class="hash-link" aria-label="连接Redis云数据库的直接链接" title="连接Redis云数据库的直接链接">​</a></h2>
<p>创建成功后，你将获得数据库的连接信息，包括：</p>
<ul>
<li>端点地址（Endpoint）</li>
<li>端口号（Port）</li>
<li>密码（Password）</li>
<li><img decoding="async" loading="lazy" src="c:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20250405092023076.png" alt="获取连接信息" class="img_LIWi"></li>
<li><img decoding="async" loading="lazy" src="c:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20250405092439231.png" alt="image-20250405092439231" class="img_LIWi"></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="使用redis-cli连接">使用Redis-cli连接<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E4%BD%BF%E7%94%A8redis-cli%E8%BF%9E%E6%8E%A5" class="hash-link" aria-label="使用Redis-cli连接的直接链接" title="使用Redis-cli连接的直接链接">​</a></h3>
<p>如果你本地安装了Redis客户端，可以使用以下命令连接：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">redis-cli </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-h</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">你的端点地址</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">端口号</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-a</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">密码</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>例如：</p>
<div class="language-bash codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-bash codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">redis-cli </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-h</span><span class="token plain"> redis-10042.c10.us-east-1-2.ec2.cloud.redislabs.com </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-p</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">10042</span><span class="token plain"> </span><span class="token parameter variable" style="color:hsl(221, 87%, 60%)">-a</span><span class="token plain"> ABCdef123456</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>下面是我的Redis-cli连接和使用案例:</p>
<p>首先，使用命令行连接到远程Redis服务器，输入正确的主机地址、端口和密码：</p>
<p><img decoding="async" loading="lazy" src="c:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20250405092811167.png" alt="image-20250405092811167" class="img_LIWi"></p>
<p>连接成功后，可以执行基本的Redis命令测试功能，如设置键值对、获取值、查看所有键等：</p>
<p><img decoding="async" loading="lazy" src="c:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20250405092839829.png" alt="image-20250405092839829" class="img_LIWi"></p>
<p>使用Redis-cli时，可以执行以下常用命令：</p>
<ul>
<li><code>SET key value</code> - 设置键值对</li>
<li><code>GET key</code> - 获取指定键的值</li>
<li><code>KEYS *</code> - 查看所有键</li>
<li><code>DEL key</code> - 删除指定键</li>
<li><code>FLUSHDB</code> - 清空当前数据库</li>
<li><code>INFO</code> - 查看服务器信息</li>
</ul>
<p>注意：在生产环境中请谨慎使用<code>FLUSHDB</code>和<code>KEYS *</code>命令，它们可能会影响性能或导致数据丢失。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="在代码中连接">在代码中连接<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E5%9C%A8%E4%BB%A3%E7%A0%81%E4%B8%AD%E8%BF%9E%E6%8E%A5" class="hash-link" aria-label="在代码中连接的直接链接" title="在代码中连接的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="java示例">Java示例<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#java%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="Java示例的直接链接" title="Java示例的直接链接">​</a></h4>
<div class="language-java codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-java codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token import namespace">redis</span><span class="token import namespace punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token import namespace">clients</span><span class="token import namespace punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token import namespace">jedis</span><span class="token import namespace punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token import class-name" style="color:hsl(35, 99%, 36%)">Jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">RedisTest</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">public</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">void</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">main</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> args</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 创建Jedis实例</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Jedis</span><span class="token plain"> jedis </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">new</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"redis-10042.c10.us-east-1-2.ec2.cloud.redislabs.com"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">10042</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置密码</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">auth</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"ABCdef123456"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 测试连接</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> pingResponse </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">ping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">System</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">out</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">println</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"连接成功: "</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> pingResponse</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置key</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">set</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"testkey"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"Hello RedisLabs!"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 获取key</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token plain"> value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">get</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"testkey"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">System</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">out</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">println</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"获取值: "</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 关闭连接</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        jedis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token function" style="color:hsl(221, 87%, 60%)">close</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="python示例">Python示例<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#python%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="Python示例的直接链接" title="Python示例的直接链接">​</a></h4>
<div class="language-python codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-python codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> redis</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 创建Redis连接</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">r </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> redis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">Redis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    host</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">'redis-10042.c10.us-east-1-2.ec2.cloud.redislabs.com'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    port</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token number" style="color:hsl(35, 99%, 36%)">10042</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    password</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">'ABCdef123456'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 测试连接</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">print</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"连接成功:"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> r</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">ping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 设置key</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">r</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token builtin" style="color:hsl(119, 34%, 47%)">set</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'testkey'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Hello RedisLabs!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)"># 获取key</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> r</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">get</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'testkey'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">print</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"获取值:"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token plain">decode</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'utf-8'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="nodejs示例">Node.js示例<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#nodejs%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="Node.js示例的直接链接" title="Node.js示例的直接链接">​</a></h4>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> redis </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">require</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'redis'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> client </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> redis</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createClient</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">url</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'redis://default:ABCdef123456@redis-10042.c10.us-east-1-2.ec2.cloud.redislabs.com:10042'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">async</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> client</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">connect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 测试连接</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"连接成功:"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> client</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">ping</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 设置key</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> client</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">set</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'testkey'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Hello RedisLabs!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 获取key</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> value </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> client</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">get</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'testkey'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">"获取值:"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 关闭连接</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">await</span><span class="token plain"> client</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">quit</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="注意事项">注意事项<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="注意事项的直接链接" title="注意事项的直接链接">​</a></h2>
<ol>
<li><strong>30MB容量限制</strong>：免费版只有30MB存储空间，超出将无法写入新数据</li>
<li><strong>连接数限制</strong>：最多支持30个并发连接</li>
<li><strong>账户活跃度</strong>：长期不活跃的免费账户可能会被回收</li>
<li><strong>功能限制</strong>：部分高级功能（如Redis模块）在免费版中不可用</li>
<li><strong>网络延迟</strong>：由于服务器在国外，可能会有一定的网络延迟</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="总结">总结<a href="https://bianliangrensheng.cn/blog/redis-free-cloud-database#%E6%80%BB%E7%BB%93" class="hash-link" aria-label="总结的直接链接" title="总结的直接链接">​</a></h2>
<p>RedisLabs提供的免费30MB Redis云数据库是学习和小型项目的理想选择。它不需要复杂的服务器搭建过程，只需简单注册即可获得专业的Redis服务。虽然容量有限，但对于测试、学习或小型应用已经足够使用。</p>
<p>如果你的项目需要更大的存储空间或更多功能，RedisLabs也提供了各种付费方案，可以根据需求进行升级。</p>
<p>希望这篇教程能帮助你快速上手Redis云数据库，提升开发效率！</p>]]></content:encoded>
            <category>Redis</category>
            <category>云数据库</category>
            <category>缓存</category>
            <category>数据库</category>
        </item>
        <item>
            <title><![CDATA[使用Hbuilder X如何用u-charts]]></title>
            <link>https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component</link>
            <guid>https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component</guid>
            <pubDate>Fri, 04 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细介绍在HbuilderX中如何使用u-charts组件方式实现数据可视化图表，包括安装配置、目录结构和实例代码]]></description>
            <content:encoded><![CDATA[<p>在进行uni-app开发时，数据可视化是一个常见需求。u-charts作为一个高性能跨平台图表组件，能够满足我们在各种终端上展示图表的需求。本文将详细介绍如何在HbuilderX中使用u-charts的组件方式实现数据可视化。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="安装步骤">安装步骤<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4" class="hash-link" aria-label="安装步骤的直接链接" title="安装步骤的直接链接">​</a></h2>
<p>安装u-charts非常简单，只需几个步骤：</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="1-下载插件">1. 下载插件<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#1-%E4%B8%8B%E8%BD%BD%E6%8F%92%E4%BB%B6" class="hash-link" aria-label="1. 下载插件的直接链接" title="1. 下载插件的直接链�接">​</a></h3>
<p>首先需要从插件市场下载qiun-data-charts插件。你可以直接在HbuilderX的插件市场中搜索并下载，或者从<a href="https://ext.dcloud.net.cn/plugin?id=271" target="_blank" rel="noopener noreferrer" class="link">u-charts官方插件地址</a>下载。
下载Zip包或者是导入HbuilderX都需要看广告，如果是导入到HbuilderX中，会有指引，按步骤操作即可，下面是下载Zip包的步骤</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="2-配置目录结构">2. 配置目录结构<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#2-%E9%85%8D%E7%BD%AE%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" class="hash-link" aria-label="2. 配置目录结构的直接链接" title="2. 配置目录结构的直接链接">​</a></h3>
<p>下载完成后，我们需要在项目中创建正确的目录结构：</p>
<ol>
<li>在项目根目录下新建<code>uni_modules</code>文件夹</li>
<li>在<code>uni_modules</code>目录中新建<code>qiun-data-charts</code>文件夹</li>
<li>将下载的Zip包内容全部复制到<code>qiun-data-charts</code>目录中</li>
</ol>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">项目根目录</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">├─uni_modules</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│  └─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">data</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">charts</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     ├─components</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  ├─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">data</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">charts</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  │  └─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">data</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">charts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  ├─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">error</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  │  └─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">error</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  └─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">loading</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─loading1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─loading2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─loading3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─loading4</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─loading5</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     └─qiun</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">loading</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">vue</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     ├─js_sdk</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  └─u</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">charts</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─config</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">echarts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─config</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">ucharts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─readme</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">md</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     ├─u</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">charts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     └─u</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">charts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     ├─</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  ├─app</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">plus</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  │  └─echarts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │  └─h5</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     │     └─echarts</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">min</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">js</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     ├─changelog</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">md</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     ├─license</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">md</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     ├─</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">package</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">json</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">│     └─readme</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">md</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">└─ </span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token plain">项目其他文件</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>完成这些步骤后，插件就已经准备好了</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="3-配置easycom">3. 配置easycom<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#3-%E9%85%8D%E7%BD%AEeasycom" class="hash-link" aria-label="3. 配置easycom的直接链接" title="3. 配置easycom的直接链接">​</a></h3>
<p>在项目根目录的<code>pages.json</code>文件中，添加以下配置，实现组件的自动引入：</p>
<div class="language-json codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-json codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token property" style="color:hsl(5, 74%, 59%)">"easycom"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"^qiun-data-charts"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他配置...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果你的项目中同时使用了uView，可以这样配置：</p>
<div class="language-json codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-json codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token property" style="color:hsl(5, 74%, 59%)">"easycom"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"^u-(.*)"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"@/uview-ui/components/u-$1/u-$1.vue"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token property" style="color:hsl(5, 74%, 59%)">"^qiun-data-charts"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 其他配置...</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>添加此配置后，你就可以在任何页面中直接使用<code>&lt;qiun-data-charts&gt;</code>组件，而无需手动导入。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="基础使用示例">基础使用示例<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="基础使用示例的直接链接" title="基础使用示例的直接链接">​</a></h2>
<p>下面是一个使用u-charts实现雷达图的基础示例：</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/radar-chart.png" alt="radar-chart" class="img_LIWi"></p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">charts-box</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">qiun-data-charts</span><span class="token tag" style="color:hsl(5, 74%, 59%)">   </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">radar</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:opts</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">opts</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:chartData</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">chartData</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">data</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">chartData</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">//如都是默认参数，此处可以不传 opts</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">//实际应用中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现不同样式</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">opts</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">color</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#1890FF"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#91CB74"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#FAC858"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#EE6666"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#73C0DE"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#3CA272"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#FC8452"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#9A60B4"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#ea7ccc"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">5</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">5</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">5</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">5</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">dataLabel</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">enableScroll</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">legend</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">show</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">position</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"right"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">lineHeight</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">25</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">extra</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">radar</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">gridType</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"radar"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">gridColor</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"#CCCCCC"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">gridCount</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">3</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">opacity</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.2</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">max</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">200</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">labelShow</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">border</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">onReady</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">getServerData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">methods</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">getServerData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">//模拟从服务器获取数据时的延时  </span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">//模拟服务器返回数据，实际使用时请替换为真实的API请求  </span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token script language-javascript"> res </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">categories</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"维度1"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"维度2"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"维度3"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"维度4"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"维度5"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"维度6"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">series</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">                </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"成交量1"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">                </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">90</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">110</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">165</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">195</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">187</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">172</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">                </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"成交量2"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">                </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">190</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">210</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">105</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">35</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">27</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">102</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">              </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">            </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">          </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">chartData</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">JSON</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">parse</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">JSON</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">stringify</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">res</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">        </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">500</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">      </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token script language-javascript">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">scoped</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css comment" style="color:hsl(230, 4%, 64%)">/* 请根据实际需求修改父元素尺寸，组件会自动识别宽高 */</span><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.charts-box</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">width</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">    </span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">300</span><span class="token style language-css unit">px</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">  </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>​</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="数据格式说明">数据格式说明<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%AF%B4%E6%98%8E" class="hash-link" aria-label="数据格式说明的直接链接" title="数据格式说明的直接链接">​</a></h2>
<p>u-charts使用的数据格式比较统一，主要包含两部分：</p>
<ol>
<li><strong>categories</strong>: 类别数组，表示X轴的数据点标签</li>
<li><strong>series</strong>: 系列数组，包含多个数据系列，每个系列有name和data属性</li>
</ol>
<p>例如：</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">categories</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token string" style="color:hsl(119, 34%, 47%)">"一月"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token string" style="color:hsl(119, 34%, 47%)">"二月"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token string" style="color:hsl(119, 34%, 47%)">"三月"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token string" style="color:hsl(119, 34%, 47%)">"四月"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token string" style="color:hsl(119, 34%, 47%)">"五月"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token string" style="color:hsl(119, 34%, 47%)">"六月"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">series</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"系列1"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token number" style="color:hsl(35, 99%, 36%)">150</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">230</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">224</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">218</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">135</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">147</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"系列2"</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token number" style="color:hsl(35, 99%, 36%)">50</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">130</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">124</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">118</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">235</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">47</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="常见图表类型">常见图表类型<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E5%B8%B8%E8%A7%81%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%8B" class="hash-link" aria-label="常见图表类型的直接链接" title="常见图表类型的直接链接">​</a></h2>
<p>u-charts支持多种图表类型，可以通过修改组件的<code>type</code>属性来切换：</p>
<ul>
<li>折线图: <code>line</code></li>
<li>柱状图: <code>column</code></li>
<li>饼图: <code>pie</code></li>
<li>雷达图: <code>radar</code></li>
<li>散点图: <code>scatter</code></li>
<li>面积图: <code>area</code></li>
<li>圆环图: <code>ring</code></li>
<li>漏斗图: <code>funnel</code></li>
<li>玫瑰图: <code>rose</code></li>
<li>混合图: <code>mix</code></li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="高级功能">高级功能<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E9%AB%98%E7%BA%A7%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="高级功能的直接链接" title="高级功能的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="图表交互">图表交互<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E5%9B%BE%E8%A1%A8%E4%BA%A4%E4%BA%92" class="hash-link" aria-label="图表交互的直接链接" title="图表交互的直接链接">​</a></h3>
<p>如果需要实现图表的点击交互，可以添加<code>@getIndex</code>事件：</p>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">qiun-data-charts</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">column</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:chartData</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">chartData</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">@getIndex</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">getIndex</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">methods</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">getIndex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">currentIndex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">series</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">currentIndex</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">index</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 可以根据点击的索引执行跳转或其他操作</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="自定义主题">自定义主题<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98" class="hash-link" aria-label="自定义主题的直接链接" title="自定义主题的直接链接">​</a></h3>
<p>u-charts支持自定义主题，可以通过全局配置或局部配置实现：</p>
<ol>
<li>全局配置：修改<code>uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js</code>文件</li>
<li>局部配置：通过<code>:opts</code>属性传入自定义配置</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="动态切换图表">动态切换图表<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E5%8A%A8%E6%80%81%E5%88%87%E6%8D%A2%E5%9B%BE%E8%A1%A8" class="hash-link" aria-label="动态切换图表的直接链接" title="动态切换图表的直接链接">​</a></h3>
<p>可以通过动态修改<code>type</code>属性实现图表类型的切换：</p>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">qiun-data-charts</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">chartType</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">  </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:chartData</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">chartData</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">chartType</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'line'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 默认为折线图</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">chartData</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">methods</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">changeChartType</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">type</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">chartType</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> type</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 切换图表类型</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="营养监测图表案例">营养监测图表案例<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E8%90%A5%E5%85%BB%E7%9B%91%E6%B5%8B%E5%9B%BE%E8%A1%A8%E6%A1%88%E4%BE%8B" class="hash-link" aria-label="营养监测图表案例的直接链接" title="营养监测图表案例的直接链接">​</a></h2>
<p>下面是一个实际应用中的营养数据曲线图表组件，使用TypeScript封装，支持自定义渐变色：</p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/curve-chart.png" alt="curve-chart" class="img_LIWi"></p>
<div class="language-vue codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-vue codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">	</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">chart-container</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">		</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">qiun-data-charts</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">			</span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">line</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">			</span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:opts</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">chartOpts</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">			</span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:chartData</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">formatChartData</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">			</span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">:canvasId</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">canvasId</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">			</span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">background</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">none</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag" style="color:hsl(5, 74%, 59%)">		</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">	</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">view</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">template</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">ts</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 移除手动导入，使用easycom自动导入</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">interface</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name" style="color:hsl(35, 99%, 36%)">LineColor</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">index</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> number</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> string </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">|</span><span class="token script language-javascript"> number</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">interface</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name" style="color:hsl(35, 99%, 36%)">NutritionSeries</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> string</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">linearColor</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">LineColor</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> number</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">interface</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name" style="color:hsl(35, 99%, 36%)">ChartData</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">categories</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> string</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">series</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">NutritionSeries</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">interface</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name" style="color:hsl(35, 99%, 36%)">YAxisConfig</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">min</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> number</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">max</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> number</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'nutrition-chart'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 移除components注册，easycom会自动注册</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">props</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 餐食类型数组</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">meals</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">Array</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">as</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> string</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">default</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'早餐'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'午餐'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'晚餐'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 营养数据数组</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">nutritionData</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">Array</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">as</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> number</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">default</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// Y轴配置</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">yAxis</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">Object</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">as</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">YAxisConfig</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">default</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">min</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">max</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">50</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// canvas ID</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">canvasId</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">String</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'nutritionChart'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 添加线条名称列表属性</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">lineNames</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name" style="color:hsl(35, 99%, 36%)">Array</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:hsl(301, 63%, 40%)">as</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> string</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript function-variable function" style="color:hsl(221, 87%, 60%)">default</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'总热量'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'碳水化合物'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'脂肪'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'蛋白质'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">computed</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">formatChartData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">ChartData</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">categories</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">meals</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">series</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">nutritionData</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">map</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript parameter literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token script language-javascript parameter operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript parameter"> number</span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript parameter"> </span><span class="token script language-javascript parameter literal-property property" style="color:hsl(5, 74%, 59%)">index</span><span class="token script language-javascript parameter operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript parameter"> number</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">lineNames</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">index</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token script language-javascript"> </span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript template-string string" style="color:hsl(119, 34%, 47%)">线条</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token script language-javascript template-string interpolation">index </span><span class="token script language-javascript template-string interpolation operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token script language-javascript template-string interpolation"> </span><span class="token script language-javascript template-string interpolation number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 使用传入的名称列表</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">linearColor</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">getLineColor</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">index</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 获取对应的颜色配置</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> data </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">chartOpts</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">15</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">10</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">15</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">background</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'rgb(255, 232, 215)'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">enableScroll</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">dataLabel</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">dataPointShape</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">legend</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">show</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">xAxis</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">disableGrid</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'category'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">axisLine</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">axisLineColor</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#cccccc'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">yAxis</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">dashLength</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">2</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">data</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">min</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">yAxis</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">min</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">max</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">yAxis</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">max</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">splitNumber</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">5</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">showTitle</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style="color:hsl(35, 99%, 36%)">false</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">gridColor</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'transparent'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">extra</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">line</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">type</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"curve"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">width</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">2</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">activeType</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"hollow"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">linearType</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"custom"</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">						</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">tension</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.5</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">width</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">750</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">height</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">300</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">methods</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 根据索引获取对应的颜色配置</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript function" style="color:hsl(221, 87%, 60%)">getLineColor</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">index</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> number</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">LineColor</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">colorConfigs</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">LineColor</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 第一条线的颜色</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#42d392'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.25</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#50d89d'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.5</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#5edca8'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.75</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#6ce0b3'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#7ae4be'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 第二条线的颜色</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ff6b6b'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.25</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ff7a7a'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.5</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ff8989'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.75</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ff9898'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ffa7a7'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 第三条线的颜色</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ffa500'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.33</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ffb733'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.66</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ffc966'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#ffdb99'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 第四条线的颜色</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#8a2be2'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.33</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#9f55e7'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0.66</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#b47fec'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">					</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'#c9a9f1'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">				</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">			</span><span class="token script language-javascript keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token script language-javascript"> colorConfigs</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript">index</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">||</span><span class="token script language-javascript"> colorConfigs</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token script language-javascript number" style="color:hsl(35, 99%, 36%)">0</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">	</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">scss</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">scoped</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.chart-container</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">300</span><span class="token style language-css unit">rpx</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">width</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">100</span><span class="token style language-css unit">%</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">margin</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">30</span><span class="token style language-css unit">rpx</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">0</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">position</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> relative</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><span class="token style language-css selector pseudo-class" style="color:hsl(119, 34%, 47%)">:deep</span><span class="token style language-css selector punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token style language-css selector class" style="color:hsl(119, 34%, 47%)">.qiun-charts</span><span class="token style language-css selector punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">		</span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">width</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">100</span><span class="token style language-css unit">%</span><span class="token style language-css"> </span><span class="token style language-css important" style="color:hsl(230, 8%, 24%);font-weight:bold">!important</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">		</span><span class="token style language-css property" style="color:hsl(5, 74%, 59%)">height</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:hsl(35, 99%, 36%)">100</span><span class="token style language-css unit">%</span><span class="token style language-css"> </span><span class="token style language-css important" style="color:hsl(230, 8%, 24%);font-weight:bold">!important</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css">	</span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token style language-css punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token style language-css"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token style language-css"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">style</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="注意事项">注意事项<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" class="hash-link" aria-label="注意事项的直接链接" title="注意事项的直接链接">​</a></h2>
<ol>
<li>确保父容器有明确的宽高，u-charts会自动适应父容器尺寸</li>
<li>移动端建议开启canvas2d模式，提高性能：<code>:canvas2d="true"</code></li>
<li>数据量较大时，建议开启图表滚动功能：<code>:enableScroll="true"</code></li>
<li>如遇到图表层级问题，可以调整z-index或使用<code>:inScrollView="true"</code>属性</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="总结">总结<a href="https://bianliangrensheng.cn/blog/use-hbuilderx-ucharts-component#%E6%80%BB%E7%BB%93" class="hash-link" aria-label="总结的直接链接" title="总结的直接链接">​</a></h2>
<p>u-charts作为一款优秀的跨平台图表组件，在uni-app开发中能够满足大多数数据可视化需求。通过组件方式使用，不仅简化了开发流程，还提供了丰富的配置选项和交互方式。希望本文能够帮助你快速上手u-charts，实现精美的数据可视化效果。</p>
<p>如果你需要更复杂的图表功能，可以参考<a href="https://www.ucharts.cn/" target="_blank" rel="noopener noreferrer" class="link">u-charts官方文档</a>获取更多信息。</p>]]></content:encoded>
            <category>HbuilderX</category>
            <category>u-charts</category>
            <category>数据可视化</category>
            <category>uni-app</category>
        </item>
        <item>
            <title><![CDATA[React基础：核心概念与高级特性全解析]]></title>
            <link>https://bianliangrensheng.cn/blog/react-basic</link>
            <guid>https://bianliangrensheng.cn/blog/react-basic</guid>
            <pubDate>Sun, 30 Mar 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[详细讲解React框架的基础知识和高级特性，包括JSX语法、组件化开发、状态管理、生命周期等核心概念，帮助前端开发者快速掌握React开发技能]]></description>
            <content:encoded><![CDATA[<p>React作为前端领域最流行的UI库之一，以其高效的虚拟DOM和组件化开发模式深受开发者喜爱。本文从React基础概念出发，详细讲解JSX语法、组件生命周期、状态管理、Hooks等核心知识，同时介绍Context、高阶组件等高级特性。通过实际代码示例，帮助你快速掌握React开发，构建出性能优秀、结构清晰的现代Web应用。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="认识react">认识React<a href="https://bianliangrensheng.cn/blog/react-basic#%E8%AE%A4%E8%AF%86react" class="hash-link" aria-label="认识React的直接链接" title="认识React的直接链接">​</a></h2>
<ul>
<li>React 中文文档1(国内社区)：<a href="https://react.docschina.org/" target="_blank" rel="noopener noreferrer" class="link">https://react.docschina.org/</a></li>
<li>React 中文文档2(官方)：<a href="https://zh-hans.reactjs.org/" target="_blank" rel="noopener noreferrer" class="link">https://zh-hans.reactjs.org</a></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="react-概述">React 概述<a href="https://bianliangrensheng.cn/blog/react-basic#react-%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="React 概述的直接链接" title="React 概述的直接链接">​</a></h3>
<p>React 是一个用于<code>构建(动态显示)用户界面</code>的 JavaScript 库。</p>
<blockquote>
<p>🏢 <strong>React源起</strong>：React 起源于 <code>Facebook</code> ,并于 2013 年 5 月开源</p>
<p>💡 <strong>定位</strong>：React本身只关注界面, 其它如：前后台交互、路由管理、状态管理等都由其扩展插件或其它第三方插件搞定</p>
<p>🧩 <strong>全家桶</strong>：React全家桶包括 react 、 react-router-dom、 redux</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="react-三个特点">React 三个特点<a href="https://bianliangrensheng.cn/blog/react-basic#react-%E4%B8%89%E4%B8%AA%E7%89%B9%E7%82%B9" class="hash-link" aria-label="React 三个特点的直接链接" title="React 三个特点的直接链接">​</a></h3>
<ul>
<li>1️⃣ <strong>声明式</strong>  ==&gt; 命令式编程    arr.filter(item =&gt; item.price&gt;80)<!-- -->
<ul>
<li>利用JSX 语法来声明描述动态页面， 数据更新界面自动更新</li>
<li>我们不用亲自操作DOM, 只需要更新数据, 界面就会自动更新</li>
<li>React.createElement() 是命令式</li>
</ul>
</li>
<li>2️⃣ <strong>组件化</strong>
<ul>
<li>将一个较大较复杂的界面拆分成几个可复用的部分封装成多个组件， 再组合使用</li>
<li>组件可以被反复使用</li>
</ul>
</li>
<li>3️⃣ <strong>一次学习，随处编写</strong>
<ul>
<li>不仅可以开发 web 应用（react-dom），还可以开发原生安卓或ios应用（react-native）</li>
</ul>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="react-开发的网站">React 开发的网站<a href="https://bianliangrensheng.cn/blog/react-basic#react-%E5%BC%80%E5%8F%91%E7%9A%84%E7%BD%91%E7%AB%99" class="hash-link" aria-label="React 开发的网站的直接链接" title="React 开发的网站的直接链接">​</a></h3>
<p>以下都是使用React开发的知名网站：</p>
<table><thead><tr><th>网站名称</th><th>网址</th></tr></thead><tbody><tr><td>MDN</td><td><a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer" class="link">https://developer.mozilla.org/zh-CN/</a></td></tr><tr><td>知乎</td><td><a href="https://www.zhihu.com/" target="_blank" rel="noopener noreferrer" class="link">https://www.zhihu.com/</a></td></tr><tr><td>阿里云</td><td><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="link">https://www.aliyun.com/</a></td></tr><tr><td>美团</td><td><a href="https://bj.meituan.com/" target="_blank" rel="noopener noreferrer" class="link">https://bj.meituan.com/</a></td></tr><tr><td>飞猪旅行</td><td><a href="https://www.fliggy.com/" target="_blank" rel="noopener noreferrer" class="link">https://www.fliggy.com/</a></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="安装vscode插件">安装VSCode插件<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%AE%89%E8%A3%85vscode%E6%8F%92%E4%BB%B6" class="hash-link" aria-label="安装VSCode插件的直接链接" title="安装VSCode插件的直接链接">​</a></h3>
<p>开发React应用时，建议安装以下VSCode插件：</p>
<ul>
<li>ES7+ React/Redux</li>
<li>open in browser</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="react基本使用">React基本使用<a href="https://bianliangrensheng.cn/blog/react-basic#react%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="React基本使用的直接链接" title="React基本使用的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="基本使用步骤">基本使用步骤<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4" class="hash-link" aria-label="基本使用步骤的直接链接" title="基本使用步骤的直接链接">​</a></h3>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330114844257.png" alt="image-20250330114844257" class="img_LIWi"></p>
<ol>
<li>
<p>引入两个JS文件（ 注意引入顺序 ）</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token operator" style="color:hsl(221, 87%, 60%)">--</span><span class="token plain"> react库</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> 提供React对象 </span><span class="token operator" style="color:hsl(221, 87%, 60%)">--</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">script src</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../js/react.development.js"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">script</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token operator" style="color:hsl(221, 87%, 60%)">--</span><span class="token plain"> react</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">dom库</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> 提供了ReactDOM对象 </span><span class="token operator" style="color:hsl(221, 87%, 60%)">--</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">script src</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"../js/react-dom.development.js"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">script</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>在html定义一个根容器标签</p>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">root</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>创建react元素(类似html元素)</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 返回值：React元素 </span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 参数1：要创建的React元素名称 =》字符串</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 参数2：元素的属性  =》对象 {id: 'box'} 或者 null</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 后面参数：该React元素的所有子节点 =》文本或者其他react元素</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> element </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token string" style="color:hsl(119, 34%, 47%)">'h1'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'你好, React!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Hello React!'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>渲染 react 元素</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 渲染React元素到页面容器div中</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">element</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="特殊属性">特殊属性<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%89%B9%E6%AE%8A%E5%B1%9E%E6%80%A7" class="hash-link" aria-label="特殊属性的直接链接" title="特殊属性的直接链接">​</a></h3>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330114859534.png" alt="image-20250330114859534" class="img_LIWi"></p>
<ul>
<li>class  ==》 className</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> element </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token string" style="color:hsl(119, 34%, 47%)">'h1'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'你好, React!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">className</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'active'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Hello React!'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="再来个复杂点的">再来个复杂点的<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%86%8D%E6%9D%A5%E4%B8%AA%E5%A4%8D%E6%9D%82%E7%82%B9%E7%9A%84" class="hash-link" aria-label="再来个复杂点的的直接链接" title="再来个复杂点的的直接链接">​</a></h3>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330114909627.png" alt="image-20250330114909627" class="img_LIWi"></p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> title </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'北京疫情'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> content </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'北京这段时间疫情还在持续中...'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'div'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'h2'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">title</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'你关注的北京疫情'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'p'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> content</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">vDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root2'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="理解-react-元素">理解 React 元素<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%90%86%E8%A7%A3-react-%E5%85%83%E7%B4%A0" class="hash-link" aria-label="理解 React 元素的直接链接" title="理解 React 元素的直接链接">​</a></h3>
<ol>
<li>
<p>也称<code>虚拟 DOM</code> (virtual DOM) 或<code>虚拟节点</code>(virtual Node)</p>
</li>
<li>
<p>它就是一个普通的 JS 对象, 它不是真实 DOM 元素对象</p>
<table><thead><tr><th>类型</th><th>特点</th><th>性能</th></tr></thead><tbody><tr><td>虚拟 DOM</td><td>属性比较少</td><td><code>较轻</code>的对象</td></tr><tr><td>真实 DOM</td><td>属性特别多</td><td><code>较重</code>的对象</td></tr></tbody></table>
</li>
<li>
<p>但它有一些自己的特点</p>
</li>
</ol>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">虚拟 </span><span class="token constant" style="color:hsl(35, 99%, 36%)">DOM</span><span class="token plain"> 可以转换为对应的真实 </span><span class="token parameter constant" style="color:hsl(35, 99%, 36%)">DOM</span><span class="token plain">  </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">render方法将虚拟</span><span class="token constant" style="color:hsl(35, 99%, 36%)">DOM</span><span class="token plain">转换为真实</span><span class="token constant" style="color:hsl(35, 99%, 36%)">DOM</span><span class="token plain">再插入页面</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">虚拟 </span><span class="token constant" style="color:hsl(35, 99%, 36%)">DOM</span><span class="token plain"> 对象包含了对应的真实 </span><span class="token constant" style="color:hsl(35, 99%, 36%)">DOM</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">的关键信息属性</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">   </span><span class="token parameter">标签名</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"h1"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">   </span><span class="token parameter">标签属性</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> props</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">title</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'你好, React!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">   </span><span class="token parameter">子节点</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> props</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">children</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Hello React!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="jsx">JSX<a href="https://bianliangrensheng.cn/blog/react-basic#jsx" class="hash-link" aria-label="JSX的直接链接" title="JSX的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="基本理解和使用">基本理解和使用<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%9F%BA%E6%9C%AC%E7%90%86%E8%A7%A3%E5%92%8C%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="基本理解和使用的直接链接" title="基本理解和使用的直接链接">​</a></h3>
<blockquote>
<p>❓ <strong>问题</strong>:  React.createElement()写起来太复杂了</p>
<p>💡 <strong>解决</strong>:  推荐使用更加简洁的<strong>JSX</strong></p>
<p><strong>JSX</strong> 是一种JS 的扩展语法, 用来快速创建 React 元素(虚拟DOM/虚拟节点)</p>
<p>形式上像HTML标签/任意其它标签, 且标签内部是可以套JS代码的</p>
</blockquote>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> h1 </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">active</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">哈哈哈</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">   </span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>⚠️ 浏览器并不认识 JSX 所以需要引入babel将jsx 编译成React.createElement的形式</p>
<p>babel编译 JSX 语法的包为：@babel/preset-react</p>
<p>运行时编译可以直接使用babel的完整包：babel.js</p>
<p>🔍 线上测试: <a href="https://www.babeljs.cn/" target="_blank" rel="noopener noreferrer" class="link">https://www.babeljs.cn/</a></p>
</blockquote>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 必须引入编译jsx的babel库 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">src</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">../js/babel.min.js</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">&lt;!-- 必须声明type为text/babel, 告诉babel对内部的代码进行jsx的编译 --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text/babel</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 创建React元素 (也称为虚拟DOM 或 虚拟节点)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">		</span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> vDom </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token script language-javascript">h1 title</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"你好, React2!"</span><span class="token script language-javascript"> className</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">"active"</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token script language-javascript maybe-class-name">Hello</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">React2</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token script language-javascript">h1</span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 渲染React元素到页面容器div中</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript maybe-class-name">ReactDOM</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">vDom</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>📝 <strong>JSX注意事项</strong>:</p>
<p>​	必须有结束标签
​	整个只能有一个根标签
​	空标签可以自闭合</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="jsx中使用-js-表达式">JSX中使用 JS 表达式<a href="https://bianliangrensheng.cn/blog/react-basic#jsx%E4%B8%AD%E4%BD%BF%E7%94%A8-js-%E8%A1%A8%E8%BE%BE%E5%BC%8F" class="hash-link" aria-label="JSX中使用 JS 表达式的直接链接" title="JSX中使用 JS 表达式的直接链接">​</a></h3>
<ul>
<li>JSX中使用JS表达式的语法：<code>{js表达式}</code></li>
<li>作用: <code>指定动态的属性值和标签体文本</code></li>
</ul>
<blockquote>
<ol>
<li>
<p>可以是js的表达式, 不能是js的语句</p>
</li>
<li>
<p>可以是任意基本类型数据值, 但null、undefined和布尔值没有任何显示</p>
</li>
<li>
<p>可以是一个js数组, 但不能是js对象</p>
</li>
<li>
<p>可以是react元素对象</p>
</li>
<li>
<p>style属性值必须是一个包含样式的js对象</p>
</li>
</ol>
</blockquote>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> title </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'I Like You'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> vNode </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">name</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">title</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">title</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">toUpperCase</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword nil" style="color:hsl(301, 63%, 40%)">undefined</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token boolean" style="color:hsl(35, 99%, 36%)">true</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token string" style="color:hsl(119, 34%, 47%)">'true'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'div'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword null nil" style="color:hsl(301, 63%, 40%)">null</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'atguigu'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'abc'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">title</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">title</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">name</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">ative</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript literal-property property" style="color:hsl(5, 74%, 59%)">color</span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">'red'</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* &lt;h3&gt;{{a: 1}}&lt;/h3&gt; */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="条件渲染">条件渲染<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93" class="hash-link" aria-label="条件渲染的直接链接" title="条件渲染的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="ifelse">if...else<a href="https://bianliangrensheng.cn/blog/react-basic#ifelse" class="hash-link" aria-label="if...else的直接链接" title="if...else的直接链接">​</a></h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">let</span><span class="token plain"> vDom</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">isLoading</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">正在加载中</span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">加载完成啦</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"> </span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">vDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="三元表达式">三元表达式<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%B8%89%E5%85%83%E8%A1%A8%E8%BE%BE%E5%BC%8F" class="hash-link" aria-label="三元表达式的直接链接" title="三元表达式的直接链接">​</a></h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> isLoading </span><span class="token operator" style="color:hsl(221, 87%, 60%)">?</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">正在加载中</span><span class="token number" style="color:hsl(35, 99%, 36%)">2.</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">加载完成啦</span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">vDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3>&amp;&amp;</h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> isLoading </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&amp;&amp;</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">正在加载中</span><span class="token number" style="color:hsl(35, 99%, 36%)">3.</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">vDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 注意: 只适用于只在一种情况下才有界面的情况</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>💡 <strong>逻辑运算符复习</strong>:</p>
<p>表达式1 &amp;&amp; 表达式2</p>
<p>​    如果表达式1对应的boolean为true, 结果就为表达式2的值</p>
<p>​    如果表达式1对应的boolean为false, 结果就为表达式1的值</p>
<p>表达式1 || 表达式1</p>
<p>​    如果表达式1对应的boolean为true, 结果就是表达式1的值</p>
<p>​    如果表达式1对应的boolean为false, 结果就为表达式2的值</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="列表渲染">列表渲染<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93" class="hash-link" aria-label="列表渲染的直接链接" title="列表渲染的直接链接">​</a></h2>
<ul>
<li>react中可以将数组中的元素依次渲染到页面上</li>
<li>可以直接往数组中存储react元素</li>
<li>推荐使用数组的 map 方法</li>
<li>注意：必须给列表项添加唯一的 key 属性, 推荐使用id作为key, 尽量不要用index作为key</li>
</ul>
<blockquote>
<p>🚀 <strong>实例需求</strong>: 根据下面的数组显示列表</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> courses </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  	</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'React'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  	</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Vue'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  	</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">5</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'小程序'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115011063.png" alt="image-20250330115011063" class="img_LIWi"></p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> courses </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'React'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'Vue'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">5</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'小程序'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h2</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">前端框架课程列表</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h2</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">ul</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">courses</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">map</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">c</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">li</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">c</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token tag script language-javascript property-access" style="color:hsl(5, 74%, 59%)">id</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">c</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">li</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">ul</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">vDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="样式处理">样式处理<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%A0%B7%E5%BC%8F%E5%A4%84%E7%90%86" class="hash-link" aria-label="样式处理的直接链接" title="样式处理的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="行内样式">行内样式<a href="https://bianliangrensheng.cn/blog/react-basic#%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F" class="hash-link" aria-label="行内样式的直接链接" title="行内样式的直接链接">​</a></h3>
<ul>
<li>样式属性名使用小驼峰命名法</li>
<li>如果样式是数值，可以省略单位</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2 style</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">color</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'red'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">fontSize</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">30</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">React</span><span class="token plain"> style</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="类名">类名<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%B1%BB%E5%90%8D" class="hash-link" aria-label="类名的直接链接" title="类名的直接链接">​</a></h3>
<ul>
<li>必须用className, 不能用class</li>
<li>推荐, 效率更高些</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2 className</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"title"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="事件处理">事件处理<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86" class="hash-link" aria-label="事件处理的直接链接" title="事件处理的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="绑定事件">绑定事件<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6" class="hash-link" aria-label="绑定事件的直接链接" title="绑定事件的直接链接">​</a></h3>
<p>React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：</p>
<ul>
<li>React 事件的命名采用小驼峰式（camelCase），而不是纯小写。比如：onClick、onFocus 、onMouseEnter</li>
<li>使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> div </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">事件处理函数</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="事件对象">事件对象<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1" class="hash-link" aria-label="事件对象的直接链接" title="事件对象的直接链接">​</a></h3>
<p>React 根据 <a href="https://www.w3.org/TR/DOM-Level-3-Events/" target="_blank" rel="noopener noreferrer" class="link">W3C 规范</a>来自定义的合成事件, 与原生事件不完全相同</p>
<ul>
<li>
<p>处理好了浏览器的兼容性问题</p>
</li>
<li>
<p>阻止事件默认行为不能使用return false,  必须要调用: event.preventDefault()</p>
</li>
<li>
<p>有自己特有的属性, 比如: nativeEvent --原生事件对象</p>
</li>
<li>
<p>input 标签的change监听在输入过程中触发， 而原生是在失去焦点才触发</p>
<ul>
<li>
<p>原理：内部绑定的是原生input事件</p>
</li>
</ul>
</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleClick1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">innerHTML</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleClick2</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> isOdd </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:hsl(35, 99%, 36%)">Date</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">now</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token operator" style="color:hsl(221, 87%, 60%)">%</span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">===</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">isOdd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">!</span><span class="token plain">isOdd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// return false // 不起作用</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">preventDefault</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> vDom </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">handleClick1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">点击提示按钮文本</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">a href</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"http://www.baidu.com"</span><span class="token plain"> onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">handleClick2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">奇数才去百度</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">a</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">vDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="案例">案例<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%A1%88%E4%BE%8B" class="hash-link" aria-label="案例的直接链接" title="案例的直接链接">​</a></h2>
<ul>
<li>
<p>需求：实现评论列表功能</p>
<p>li&gt; a &gt; [h3 p]</p>
<ul>
<li>如果有评论数据，就展示列表结构 li（ 列表渲染 ）要包含a标签<!-- -->
<ul>
<li>name 表示评论人，渲染 h3</li>
<li>content 表示评论内容，渲染 p</li>
</ul>
</li>
<li>如果没有评论数据，就展示一个 h1 标签，内容为： 暂无评论！</li>
<li>用户名的字体25px, 内容的字体20px</li>
<li>点击内容区域提示它发表的时间</li>
</ul>
</li>
</ul>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> list </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'jack'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">content</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'rose, you jump i jump'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">time</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'03:21'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'rose'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">content</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'jack, you see you, one day day'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">time</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'03:22'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">id</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'tom'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">content</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'jack,。。。。。'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">time</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'03:23'</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115235392.png" alt="image-20250330115235392" class="img_LIWi"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="react的组件">React的组件<a href="https://bianliangrensheng.cn/blog/react-basic#react%E7%9A%84%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="React的组件的直接链接" title="React的组件的直接链接">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115241576.png" alt="image-20250330115241576" class="img_LIWi"></p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115251478.png" alt="image-20250330115251478" class="img_LIWi"></p>
<p>组件允许你将 UI 拆分为独立可复用的代码片段，包括JS/CSS/IMG等。</p>
<p>组件从概念上类似于 JavaScript 函数。它接收参数（即 "<strong>props</strong>"），内部可以有自己的数据（即 "<strong>state</strong>"），并返回用于描述页面展示的 React 元素。</p>
<p><strong>一个React应用就是由一个个的React组件组成的</strong></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="快速创建react项目">快速创建React项目<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BAreact%E9%A1%B9%E7%9B%AE" class="hash-link" aria-label="快速创建React项目的直接链接" title="快速创建React项目的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="react脚手架使用">react脚手架使用<a href="https://bianliangrensheng.cn/blog/react-basic#react%E8%84%9A%E6%89%8B%E6%9E%B6%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="react脚手架使用的直接链接" title="react脚手��架使用的直接链接">​</a></h3>
<blockquote>
<p>❓ <strong>问题</strong>:  JSX 转 JS 和 ES6 转 ES5 语法运行时编译太慢了
💡 <strong>解决</strong>: 利用 Webpack 进行打包处理</p>
<p>❓ <strong>问题</strong>: webpack打包环境搭建太麻烦, 且没有质量保证, 效率低
💡 <strong>解决</strong>: 使用官方提供的<code>脚手架</code>工具
搭建好了webpack打包环境
项目的目录结构</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="创建react项目">创建React项目<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%88%9B%E5%BB%BAreact%E9%A1%B9%E7%9B%AE" class="hash-link" aria-label="创建React项目的直接链接" title="创建React项目的直接链接">​</a></h3>
<p>使用 create-react-app:</p>
<ol>
<li>下载  npm i create-react-app -g</li>
<li>创建项目命令: <code>create-react-app 项目名称</code></li>
</ol>
<p>也可以利用 npx 来下载 create-react-app 并创建项目</p>
<p>命令: <code>npx create-react-app 项目名称</code></p>
<p>npx 做的事情:</p>
<ol>
<li>先全局下载 create-react-app</li>
<li>执行 create-react-app 命令, 创建 react 项目</li>
<li>自动将 create-react-app 从全局中删除掉</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="从v18降级到v17的版本">从V18降级到V17的版本<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BB%8Ev18%E9%99%8D%E7%BA%A7%E5%88%B0v17%E7%9A%84%E7%89%88%E6%9C%AC" class="hash-link" aria-label="从V18降级到V17的版本的直接链接" title="从V18降级到V17的版本的直接链接">​</a></h3>
<p>最新的脚手架默认使用的是最新的 React18 的版本, 而这个版本是最近才出稳定版, 企业项目还未开始使用</p>
<p>如何降级到V17的最新版呢?</p>
<ol>
<li>
<p>重新下载 react 和 react-dom, 并指定17的版本</p>
<div class="language-shell codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-shell codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> i react@17 react-dom@17</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>修改入口JS的实现</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ReactDOM</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react-dom'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'./App'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token maybe-class-name">App</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="安装chrome调试工具">安装chrome调试工具<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%AE%89%E8%A3%85chrome%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="安装chrome调试工具的直接链接" title="安装chrome调试工具的直接链接">​</a></h3>
<blockquote>
<p>❓ <strong>问题</strong>: 一旦开始进行组件化的应用开发, 我们需要查看应用中组件组成和各个组件的相关数据(props/state)</p>
<p>💡 <strong>解决</strong>: 使用React的chrome调试工具, <code>React Developer Tools</code></p>
</blockquote>
<ul>
<li>方式一: chrome应用商品搜索 <code>React</code>, 下载安装<code>React Developer Tools</code></li>
<li>问题: 需要使用翻墙工具</li>
<li>方式二: 使用本地的安装包<!-- -->
<ul>
<li>进入<strong>扩展程序列表</strong></li>
<li>打开 <strong>开发者模式</strong></li>
<li>将<strong>安装包的文件夹</strong>拖入扩展程序列表界面, 直接安装</li>
</ul>
</li>
<li>测试<!-- -->
<ul>
<li>访问react项目, 插件图标会亮</li>
<li>多了调试选项: Components</li>
</ul>
</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="创建组件的两种方式">创建组件的两种方式<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F" class="hash-link" aria-label="创建组件的两种方式的直接链接" title="创建组件的两种方式的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="函数组件">函数组件<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="函数组件的直接链接" title="函数组件的直接链接">​</a></h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// return null</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">App</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 函数名就是组件名</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token maybe-class-name">App</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>1️⃣ 组件名首字母必须大写。因为react以此来区分组件元素/标签 和 一般元素/标签</p>
<p>2️⃣ 组件内部如果有多个标签,必须使用一个根标签包裹。只能有一个根标签</p>
<p>3️⃣ 必须有返回值。返回的内容就是组件呈现的结构, 如果返回值为 null，表示不渲染任何内容</p>
<p>4️⃣ 会在组件标签渲染时调用, 但不会产生实例对象（this-&gt;undefined）,  不能有状态</p>
</blockquote>
<blockquote>
<p>📝 <strong>注意</strong>: 后面我们会讲如何在函数组件中定义状态 ==&gt; hooks语法</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="类组件">类组件<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%B1%BB%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="类组件的直接链接" title="类组件的直接链接">​</a></h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">App</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">React</span><span class="token class-name punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">render</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">App</span><span class="token plain"> </span><span class="token maybe-class-name">Component</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">ReactDom</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">render</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token maybe-class-name">App</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'root'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>1️⃣ 组件名首字母必须大写。</p>
<p>2️⃣ 组件内部如果有多个标签,必须使用一个根标签包裹。只能有一个根标签</p>
<p>3️⃣ 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性</p>
<p>4️⃣ 类组件中必须要声明一个render函数, reander返回组件代表组件界面的虚拟DOM元素</p>
<p>5️⃣ 会在组件标签渲染时调用, 产生实例对象(this-&gt;组件实例对象),  可以有状态</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="类组件的状态-state">类组件的状态 state<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%B1%BB%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81-state" class="hash-link" aria-label="类组件的状态 state的直接链接" title="类组件的状态 state的直接链接">​</a></h2>
<p>函数组件又叫做无状态组件(不产生实例)，类组件又叫做有状态组件(有实例)</p>
<p>状态（state）即数据</p>
<p>函数组件没有state, 只能根据外部传入的数据（props）动态渲染</p>
<p>类组件有自己的state数据，<strong>一旦更新state数据， 界面就会自动更新</strong></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="state的基本使用">state的基本使用<a href="https://bianliangrensheng.cn/blog/react-basic#state%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="state的基本使用的直接链接" title="state的基本使用的直接链接">​</a></h3>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用 </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 组件对象的state属性</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 属性值为对象</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> 可以在state对象中保存多个数据</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 初始化state</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 构造器中</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">xxx</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 类体中</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> state </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 读取state数据</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">xxx</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 更新state数据</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 不能直接更新state数据</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 必须 </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> 要修改的属性数据 </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115313040.png" alt="image-20250330115313040" class="img_LIWi"></p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">StateTest</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">React</span><span class="token class-name punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* constructor () {</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    super() // 必须调用super()</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    // 初始化state</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    this.state = {</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">      count: 0,</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">      xxx: 'abc'</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    }</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  } */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 初始化状态(简洁语法)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  state </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">xxx</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'abc'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">render</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 读取state数据</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 直接更新状态数据 =&gt; 界面不会自动更新  不可用</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// this.state.count = count + 1</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 通过setState()更新state =&gt; 界面会自动更新</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> count </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">点击的次数</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="事件回调this问题">事件回调this问题<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BA%8B%E4%BB%B6%E5%9B%9E%E8%B0%83this%E9%97%AE%E9%A2%98" class="hash-link" aria-label="事件回调this问题的直接链接" title="事件回调this问题的直接链接">​</a></h3>
<p>为了提高代码的性能和阅读性,最好把事件处理函数定义在结构的外面.</p>
<p>但是这样就带来了this指向的问题:</p>
<blockquote>
<p>❌ <strong>问题</strong>: 类中定义的事件回调方法中this是undefined, 无法更新state</p>
<p>🔍 <strong>原因</strong>: 事件回调都不是组件对象调用的, 都是事件触发后,直接调用的,
class中所有方法都使用严格模式, 所以方法中的this就是undefined</p>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115414665.png" alt="image-20250330115414665" class="img_LIWi"></p>
<ul>
<li>
<p>基础代码：组件的虚拟DOM</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">当前count为: 0</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">点击报错, 有this问题</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">解决办法1 - 包裹箭头函数</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">解决办法2 - bind绑定this </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">解决办法3 - 箭头函数</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ul>
<blockquote>
<p>💡 <strong>解决办法1</strong> - 包裹箭头函数
原因: render中的this是组件对象, 处理函数是我们通过组件对象来调用的</p>
<p>💡 <strong>解决办法2</strong> - bind绑定this
原因: 构造器中的this是组件对象, 将处理函数通过bind绑定为了组件对象</p>
<p>💡 <strong>解决办法3</strong> - 箭头函数
原理: 利用bind给事件回调绑定this为组件对象(render中的this)</p>
</blockquote>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">EventThis</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">React</span><span class="token class-name punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">constructor</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 构造器中的this是组件对象</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">super</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    this.handle4 = () =&gt;  {</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">      console.log(this)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">      this.setState({</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">        count: this.state.count + 3</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">      })</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    } */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">	</span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 初始化state</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  state </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  问题: 类中定义的事件回调方法中this是undefined, 无法更新state</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  原因: babel编译jsx. 采用的是严格模式, 事件监听函数中this就指向undefined</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">handle1</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// this是undefined</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 报错</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">handle2</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">handle3</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  解决办法3 - 箭头函数</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  原因: 改为箭头函数后, 变为了给组件对象添加属性, 且是在构造器中执行的, 用的就是构造函数中的this</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handle4</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">render</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// render中的this是组件对象</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'render()'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">当前count为</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">handle1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">点击报错</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> 有</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token plain">问题</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">        解决办法1 - 包裹箭头函数</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">        原因: render中的this是组件对象, 处理函数是我们通过组件对象来调用的</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">        */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">handle2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">解决办法</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 包裹箭头函数</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">handle3</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">bind</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">解决办法</span><span class="token number" style="color:hsl(35, 99%, 36%)">2</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> bind绑定</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">handle4</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">解决办法</span><span class="token number" style="color:hsl(35, 99%, 36%)">3</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain"> 箭头函数</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<blockquote>
<p>🔍 <strong>最佳实践</strong>:</p>
<ol>
<li>一般用<code>箭头函数</code>、bind 方式,  编码简洁</li>
<li>如果要传递特定的数据, 一般选择用 <code>包裹箭头函数</code>方式</li>
</ol>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="组件的props">组件的props<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%BB%84%E4%BB%B6%E7%9A%84props" class="hash-link" aria-label="组件的props的直接链接" title="组件的props�的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="使用">使用<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="使用的直接链接" title="使用的直接链接">​</a></h3>
<p>组件是封闭的，要接收外部数据应该通过 props 来实现</p>
<p>props的作用：父组件向子组件传递数据</p>
<p>父向子传入数据：给组件标签添加属性</p>
<p>子读取父传入的数据：函数组件通过参数props接收数据，类组件通过this.props接收数据</p>
<p>props的特点:</p>
<table><thead><tr><th>特点</th><th>说明</th></tr></thead><tbody><tr><td>数据类型</td><td>可以给组件传递任意类型的数据</td></tr><tr><td>只读性</td><td>props 是只读的对象，只能读取属性的值，不要修改props</td></tr><tr><td>展开运算符</td><td>可以通过...运算符来将对象的多个属性分别传入子组件</td></tr><tr><td>动态更新</td><td>如果父组件传入的是动态的state数据, 父组件更新state, 子组件也会更新</td></tr></tbody></table>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330115433398.png" alt="image-20250330115433398" class="img_LIWi"></p>
<ul>
<li>
<p>子组件</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 函数组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">FunProps</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">props</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">FunProps</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">个人信息</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> 姓名</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">props</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">年龄</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">props</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 类组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">ClassProps</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">React</span><span class="token class-name punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">render</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> myName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">props</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">ClassProps</span><span class="token operator" style="color:hsl(221, 87%, 60%)">-</span><span class="token plain">个人信息</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> 姓名</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">myName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">年龄</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>父组件【状态数据传递给子组件】</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">class</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">App</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:hsl(35, 99%, 36%)">React</span><span class="token class-name punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token class-name" style="color:hsl(35, 99%, 36%)">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  state </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">person</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">myName</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'tom'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">12</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">render</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">myName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">person</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">p</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">人员信息</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">myName </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">' : '</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain">age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">p</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">setState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">            </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">person</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">myName</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> myName</span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token string" style="color:hsl(119, 34%, 47%)">'--'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">          </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">更新人员信息</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token maybe-class-name">FunProps</span><span class="token plain"> name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">myName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">age</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">hr</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* &lt;ClassProps myName={myName} age={age}/&gt; */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token maybe-class-name">ClassProps</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token spread operator" style="color:hsl(221, 87%, 60%)">...</span><span class="token keyword" style="color:hsl(301, 63%, 40%)">this</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">person</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="props校验与默认值-了解">props校验与默认值 (了解)<a href="https://bianliangrensheng.cn/blog/react-basic#props%E6%A0%A1%E9%AA%8C%E4%B8%8E%E9%BB%98%E8%AE%A4%E5%80%BC-%E4%BA%86%E8%A7%A3" class="hash-link" aria-label="props校验与默认值 (了解)的直接链接" title="props校验与默认值 (了解)的直接链接">​</a></h3>
<ul>
<li>props检验<!-- -->
<ul>
<li>对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据</li>
<li>如果传入的数据格式不对，可能会导致组件内部报错</li>
<li>关键问题：组件的使用者不知道明确的错误原因</li>
<li>允许在创建组件的时候，就指定 props 的类型、格式等</li>
<li>作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性</li>
</ul>
</li>
<li>props默认值<!-- -->
<ul>
<li>给 props 设置默认值，在未传入 props 时生效</li>
</ul>
</li>
</ul>
<blockquote>
<p>🔍 <strong>概念说明</strong>:</p>
<p>props校验: 检查接收的prop的类型和必要性
props默认值: 如果prop没有传入, 指定默认值是多少</p>
</blockquote>
<blockquote>
<p>📝 <strong>需求示例</strong>:</p>
<p>​		name/myName属性: 字符串类型, 必须的
​		age属性: 数值类型, 不是必须的, 默认值为0</p>
</blockquote>
<p><strong>实现方式:</strong></p>
<ol>
<li>
<p>导入 prop-types 包</p>
</li>
<li>
<p>使用propTypes来给组件的props添加校验规则</p>
</li>
</ol>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">PropTypes</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'prop-types'</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 引入属性检查的包</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 函数组件函数体外 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 指定prop的类型和必要性</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">FunPropsCheck</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">propTypes</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">myName</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token maybe-class-name">PropTypes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">string</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">isRequired</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token maybe-class-name">PropTypes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">number</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 指定prop的默认值</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">FunPropsCheck</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">defaultProps</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 类组件的类体中 */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 指定prop的类型和必要性</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> propTypes </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">name</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token maybe-class-name">PropTypes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">string</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">isRequired</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token maybe-class-name">PropTypes</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">number</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 指定prop的默认值</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">static</span><span class="token plain"> defaultProps </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">age</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="类组件的生命周期">类组件的生命周期<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%B1%BB%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F" class="hash-link" aria-label="类组件的生命周期的直接链接" title="类组件的生命周期的直接链接">​</a></h2>
<p>生命周期图谱: <a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/" target="_blank" rel="noopener noreferrer" class="link">https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/</a></p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140051127.png" alt="image-20250330140051127" class="img_LIWi"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="生命周期三大阶段">生命周期三大阶段<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E4%B8%89%E5%A4%A7%E9%98%B6%E6%AE%B5" class="hash-link" aria-label="生�命周期三大阶段的直接链接" title="生命周期三大阶段的直接链接">​</a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="挂载阶段">挂载阶段<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%8C%82%E8%BD%BD%E9%98%B6%E6%AE%B5" class="hash-link" aria-label="挂载阶段的直接链接" title="挂载阶段的直接链接">​</a></h4>
<blockquote>
<p>流程: constructor  ==&gt; render ==&gt; componentDidMount</p>
<p>触发: ReactDOM.render(): 渲染组件元素</p>
</blockquote>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="更新阶段">更新阶段<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%9B%B4%E6%96%B0%E9%98%B6%E6%AE%B5" class="hash-link" aria-label="更新阶段的直接链接" title="更新阶段的直接链接">​</a></h4>
<blockquote>
<p>流程: render  ==&gt;  componentDidUpdate</p>
<p>触发: setState() , forceUpdate(), 组件接收到新的props</p>
</blockquote>
<h4 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="卸载阶段">卸载阶段<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%8D%B8%E8%BD%BD%E9%98%B6%E6%AE%B5" class="hash-link" aria-label="卸载阶段的直接链接" title="卸载阶段的直接链接">​</a></h4>
<blockquote>
<p>流程: componentWillUnmount</p>
<p>触发: 不再渲染组件</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="生命周期钩子">生命周期钩子<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90" class="hash-link" aria-label="生命周期钩子的直接链接" title="生命周期钩子的直接链接">​</a></h3>
<ul>
<li>
<p>constructor:</p>
<p>只执行一次: 创建组件对象挂载第一个调用</p>
<p>用于初始化state属性或其它的实例属性或方法(可以简写到类体中)</p>
</li>
<li>
<p>render:</p>
<p>执行多次: 挂载一次 + 每次state/props更新都会调用</p>
<p>用于返回要初始显示或更新显示的虚拟DOM界面</p>
</li>
<li>
<p>componentDidMount:</p>
<p>执行一次: 在第一次调用render且组件界面已显示之后调用</p>
<p>用于初始执行一个异步操作: 发ajax请求/启动定时器等</p>
<p>应用：</p>
<ol>
<li>启动定时器</li>
<li>订阅消息</li>
<li>发送ajax请求</li>
</ol>
</li>
<li>
<p>componentDidUpdate:</p>
<p>执行多次: 组件界面更新(真实DOM更新)之后调用</p>
<p>用于数据变化后, 就会要自动做一些相关的工作(比如: 存储数据/发请求)</p>
<p>用得少  =&gt; 这次我们先简单了解, 后面需要时再深入说</p>
</li>
<li>
<p>componentWillUnmount:</p>
<p>执行一次: 在组件卸载前调用</p>
<p>用于做一些收尾工作, 如: 清除定时器、取消订阅</p>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="旧版react生命周期纯了解">旧版react生命周期(纯了解)<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%97%A7%E7%89%88react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%BA%AF%E4%BA%86%E8%A7%A3" class="hash-link" aria-label="旧版react生命周期(纯了解)的直接链接" title="旧版react生命周期(纯了解)的直接链接">​</a></h3>
<blockquote>
<p>componentWillMount</p>
<p>componentWillUpdate,</p>
<p>componentWillReceiveProps</p>
<p>以上生命周期钩子函数在React v16.3后废弃</p>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140430646.png" alt="image-20250330140430646" class="img_LIWi"></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="hooks-重要">Hooks [重要]<a href="https://bianliangrensheng.cn/blog/react-basic#hooks-%E9%87%8D%E8%A6%81" class="hash-link" aria-label="Hooks [重要]的直接链接" title="Hooks [重要]的直接链接">​</a></h2>
<blockquote>
<p>问题:
相对于类组件, 函数组件的编码更简单, 效率也更高, 但函数组件不能有state (旧版)</p>
<p>解决:
React 16.8版本设计了一套新的语法来让函数组件也可以有state</p>
</blockquote>
<ul>
<li><em>Hook</em> 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性</li>
<li>Hook也叫钩子，<strong>本质就是函数</strong>，能让你使用 React 组件的状态和生命周期函数...</li>
<li>Hook 语法 基本已经代替了类组件的语法</li>
<li>后面的 React 项目就完全是用Hook语法了</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="usestate">useState()<a href="https://bianliangrensheng.cn/blog/react-basic#usestate" class="hash-link" aria-label="useState()的直接链接" title="useState()的直接链接">​</a></h3>
<blockquote>
<p>用来定义状态数据</p>
<p>可以多次调用, 产生多个状态数据</p>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140444246.png" alt="image-20250330140444246" class="img_LIWi"></p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useState </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">App</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  useState(初始值): 返回包含内部管理的state数据和更新数据的函数的数组</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  我们可以用解构的写法取出state数据和更新数据的函数</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  state数据变量根据数据意义取名: xxx  =&gt; 界面根据xxx来显示</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  更新数据的函数一般取名: setXxx =&gt; 调用setXxx会重新执行组件函数 (也就是重新render组件)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  第一次调用useState</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  重新redner调用useState</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setCount</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token number" style="color:hsl(35, 99%, 36%)">0</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">App组件</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">p</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">p</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setCount</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">count </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">更新count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token maybe-class-name">App</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="useeffect">useEffect()<a href="https://bianliangrensheng.cn/blog/react-basic#useeffect" class="hash-link" aria-label="useEffect()的直接链接" title="useEffect()的直接链接">​</a></h3>
<blockquote>
<p>可以在一个组件中多次使用</p>
<p>相当于<code>componentDidMount，componentDidUpdate 和 componentWillUnmount</code>的组合</p>
</blockquote>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useState</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> useEffect</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Component</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> style </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">border</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'1px solid gray'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">padding</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">10</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">margin</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'10px 0'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">HookTest</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter">count</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">msg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setMsg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'abc'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 相当于 componentDidMount</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'effect回调...'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    第一次执行HookLifeTest() =&gt; msg=abc, setTimeout(() =&gt; {msg}, 5000)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    更新执行HookLifeTest =&gt; msg=abc+   effect回调不会再执行</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    注意: effect的回调当前情况只执行一次</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    在setInterval中看到的msg一直都是初始值</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">    */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> timeoutId </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// setMsg(msg + '+')  // 在setInterval中看到的msg一直都是初始值 =&gt; 界面只会更新一次</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">setMsg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">msg</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> msg </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'+'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// setMsg的回调中的msg是react从内部取出的最新值 =&gt; 界面会多次更新</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token number" style="color:hsl(35, 99%, 36%)">1000</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// effect回调返回的函数 相当于 willUnmount</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 清除定时器</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">clearTimeout</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">timeoutId</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 注意这里要传入空数组 </span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// componentDidMount + componentDidUpdate (所有state或props变化)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'effect回调2'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 与上面的等价</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'effect回调3'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> msg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// componentDidMount + componentDidUpdate (msg变化)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token function" style="color:hsl(221, 87%, 60%)">useEffect</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'effect回调3'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">msg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div style</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">style</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token maybe-class-name">LifeTest</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">state</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">msg</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">msg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">props</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">count</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">count</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">setMsg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">msg </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'+'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">更新msg</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="useref">useRef<a href="https://bianliangrensheng.cn/blog/react-basic#useref" class="hash-link" aria-label="useRef的直接链接" title="useRef的直接链接">​</a></h3>
<blockquote>
<p>用于得到组件中的某个DOM元素</p>
</blockquote>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useRef </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"react"</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">useRef: 用于得到组件中的某个DOM元素</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">1. 使用useRef创建用于存储input元素的容器对象(内部使用current属性存储)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">2. 将ref容器通过ref属性交给表单项标签 =&gt; 渲染时内部会将对应的input元素保存到ref容器的current属性上</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">3. 点击提交按钮时, 通过ref容器的current属性得到input DOM元素 =&gt; 就可以读取其value了</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">*/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">HookTest2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 1. 使用useRef创建用于存储input元素的容器对象(内部使用current属性存储)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> inputRef </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">inputRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// {current: undefined}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleClick</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 3. 点击提交按钮时, 通过ref容器的current属性得到input DOM元素 =&gt; 就可以读取其value了</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> input </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> inputRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">current</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">input</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 2. 将ref容器通过ref属性交给表单项标签 =&gt; 渲染时内部会将对应的input元素保存到ref容器的current属性上 */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">inputRef</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handleClick</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">提示输入框的值</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token maybe-class-name">HookTest2</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="usecontext">useContext<a href="https://bianliangrensheng.cn/blog/react-basic#usecontext" class="hash-link" aria-label="useContext的直接链接" title="useContext的直接链接">​</a></h3>
<blockquote>
<p>在hook组件函数中读取context的Provide提供的数数据</p>
</blockquote>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Child</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> data </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useContext</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="hook规则">Hook规则:<a href="https://bianliangrensheng.cn/blog/react-basic#hook%E8%A7%84%E5%88%99" class="hash-link" aria-label="Hook规则:的直接链接" title="Hook规则:的直接链接">​</a></h3>
<ol>
<li>只在React组件函数内部中调用 Hook, 不要在组件函数外部调用</li>
<li>Hook调用的次数要固定, 所以不要在循环或条件判断中调用</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="官方-hooks">官方 Hooks<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%AE%98%E6%96%B9-hooks" class="hash-link" aria-label="官方 Hooks的直接链接" title="官方 Hooks的直接链接">​</a></h3>
<ul>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#basic-hooks" target="_blank" rel="noopener noreferrer" class="link">基础 Hook</a>
<ul>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#usestate" target="_blank" rel="noopener noreferrer" class="link"><code>useState</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#useeffect" target="_blank" rel="noopener noreferrer" class="link"><code>useEffect</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#usecontext" target="_blank" rel="noopener noreferrer" class="link"><code>useContext</code></a></li>
</ul>
</li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#additional-hooks" target="_blank" rel="noopener noreferrer" class="link">额外的 Hook</a>
<ul>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#usereducer" target="_blank" rel="noopener noreferrer" class="link"><code>useReducer</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener noreferrer" class="link"><code>useCallback</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#usememo" target="_blank" rel="noopener noreferrer" class="link"><code>useMemo</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#useref" target="_blank" rel="noopener noreferrer" class="link"><code>useRef</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#useimperativehandle" target="_blank" rel="noopener noreferrer" class="link"><code>useImperativeHandle</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#uselayouteffect" target="_blank" rel="noopener noreferrer" class="link"><code>useLayoutEffect</code></a></li>
<li><a href="https://react.docschina.org/docs/hooks-reference.html#usedebugvalue" target="_blank" rel="noopener noreferrer" class="link"><code>useDebugValue</code></a></li>
</ul>
</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="收集表单数据">收集表单数据<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE" class="hash-link" aria-label="收集表单数据的直接链接" title="收集表单数据的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="非受控组件">非受控组件<a href="https://bianliangrensheng.cn/blog/react-basic#%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="非受控组件的直接链接" title="非受控组件的直接链接">​</a></h3>
<p>表单项不与state数据相向关联, 需要手动读取表单元素的值</p>
<p>借助于 useRef，使用原生 DOM 方式来获取表单元素值</p>
<p>useRef 的作用：用于获取 DOM元素</p>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">form</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h2</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">登陆页面</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h2</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  用户名: </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  密  码: </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">password</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"> </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">submit</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">登 陆</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">form</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140459756.png" alt="image-20250330140459756" class="img_LIWi"></p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useRef </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">非受控组件:</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  包含表单组件</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  在输入过程中, 不将输入数据收集到state数据中, 只是提交的回调中手动读取input中的输入值</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  表单项输入数据不与state数据相关联</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">编码过程</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  1. 使用useRef创建用于存储input元素的容器对象(内部使用current属性存储)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  2. 将ref容器通过ref属性交给表单项标签 =&gt; 渲染时内部会将对应的input元素保存到ref容器的current属性上</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  3. 点击提交按钮时, 通过ref容器的current属性得到input DOM元素 =&gt; 就可以读取其value了</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">不足:</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  不够自动 / 不方便进行实时的数据检验</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">*/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">FormTest</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> nameRef </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> pwdRef </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">nameRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// {current: undefined}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 点击登陆的回调</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">login</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">nameRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 阻止事件的默认行为 =&gt; 不提交表单</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">preventDefault</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 得到输入框</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> nameInput </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> nameRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">current</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> pwdInput </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> pwdRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">current</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 得到输入框的值</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> name </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> nameInput</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> pwd </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> pwdInput</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 发送登陆的请求</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">发送登陆的请求 name=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">name</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">, pwd=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">pwd</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">form</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token function" style="color:hsl(221, 87%, 60%)">登陆页面</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">非受控组件</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h2</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">用户名</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input ref</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">nameRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain">  type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"text"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      密  码</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input ref</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">pwdRef</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"password"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"submit"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"登 陆"</span><span class="token plain"> onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">login</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">form</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="受控组件">受控组件<a href="https://bianliangrensheng.cn/blog/react-basic#%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="受控组件的直接链接" title="受控组件的直接链接">​</a></h3>
<p>组件中的表单项根据状态数据动态初始显示和更新显示, 当用户输入时实时同步到状态数据中</p>
<p>也就是实现了页面表单项与state数据的双向绑定</p>
<p><strong>实现方式</strong></p>
<ol>
<li>在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）</li>
<li>给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）</li>
</ol>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useState </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">受控组件</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  在输入过程, 实时收集到state数据中 / 界面也可以根据state数据进行显示</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  表单项与state数据进行 双向同步 =&gt; 数据双向绑定  state &lt;===&gt; 页面的input</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">编码过程</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  1. 使用useState定义一个state数据，作为表单元素的value值（界面根据state动态显示） </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  2. 给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（界面输入变化时, 保存到state)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">数据双向绑定</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  state 到 页面 的绑定 =&gt; 将state数据指定为input的value</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  页面 到 state 的绑定 =&gt; 给input绑定change事件, 在回调中将输入的最新值更新到state</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">好处:</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  实时自动收集数据 =&gt; 需要数据时非常轻松</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  方便进行实时的数据检验</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">*/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">FormTest2</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 定义state</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'admin'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">pwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setPwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'123'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleSubmit</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 点击提交按钮的默认行为就是提交表单, 但不想自动提交表单 =&gt; 阻止一下事件的默认行为</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">preventDefault</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">准备提交登陆的ajax请求 name=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">name</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">, pwd=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">pwd</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 当用户名输入发生改变的回调</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleNameChange</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 将最新输入的值更新到name状态</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> name </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">setName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 对name进行实时检验: 不能超过6位</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">length</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token number" style="color:hsl(35, 99%, 36%)">6</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'用户名不能超过6位'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 当密码输入发生改变的回调</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handlePwdChange</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 将最新输入的值更新到pwd状态</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">setPwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">登陆页面(受控组件)</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h3</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">form</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">action</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">'</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">/xxx</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">'</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* 2. 给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值 */</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        用户名: </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">name</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handleNameChange</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        密码: </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">text</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">pwd</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handlePwdChange</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">br</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">input</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">submit</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">value</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">'</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">登陆</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">'</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">handleSubmit</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">/&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">form</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 更新state, 界面会自动更新</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">setName</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">name </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">'--'</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">        </span><span class="token tag script language-javascript function" style="color:hsl(221, 87%, 60%)">setPwd</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">pwd </span><span class="token tag script language-javascript operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag script language-javascript string" style="color:hsl(119, 34%, 47%)">'--'</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag script language-javascript" style="color:hsl(5, 74%, 59%)">      </span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">更新状态数据</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">button</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">    </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>优化: 使用同一个事件函数处理*多个事件</strong></p>
<blockquote>
<p>方式一: 柯里化函数</p>
<p>方式二: 包裹箭头函数</p>
</blockquote>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token imports"> </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token imports"> useState </span><span class="token imports punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'react'</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">优化: 将2个事件函数优化为1个</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">方式一: 柯里化函数</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">方式二: 包裹箭头函数</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">*/</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">default</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">FormTest3</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 定义state</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'admin'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">[</span><span class="token plain">pwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setPwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">]</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useState</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'123'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleSubmit</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    e</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">preventDefault</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">alert</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">准备提交登陆的ajax请求 name=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">name</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string string" style="color:hsl(119, 34%, 47%)">, pwd=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">${</span><span class="token template-string interpolation">pwd</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token template-string template-punctuation string" style="color:hsl(119, 34%, 47%)">`</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  方式一: 使用柯里化函数(也是一个高阶函数)</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleChange</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">setFn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token function" style="color:hsl(221, 87%, 60%)">setFn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token comment" style="color:hsl(230, 4%, 64%)">/* </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  方式二: 包裹箭头函数: 在外部包一个事件回调函数, 我们在其中调用传递特定参数</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">  */</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:hsl(221, 87%, 60%)">handleChange2</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">event</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> setFn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token function" style="color:hsl(221, 87%, 60%)">setFn</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">target</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token function" style="color:hsl(221, 87%, 60%)">登陆页面</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">受控组件</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">h3</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">form action</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">'/xxx'</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">用户名</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"text"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> onChange</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token function" style="color:hsl(221, 87%, 60%)">handleChange</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">setName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">密码</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"text"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">pwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> onChange</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token function" style="color:hsl(221, 87%, 60%)">handleChange</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">setPwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"submit"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">'登陆'</span><span class="token plain"> onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">handleSubmit</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">form</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">form action</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">'/xxx'</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">用户名</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"text"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">name</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> onChange</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter">event</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleChange2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token literal-property property" style="color:hsl(5, 74%, 59%)">密码</span><span class="token operator" style="color:hsl(221, 87%, 60%)">:</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"text"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">pwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token plain"> onChange</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token parameter">event</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">handleChange2</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> setPwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">br</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">input type</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"submit"</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">'登陆'</span><span class="token plain"> onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">handleSubmit</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">form</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">button onClick</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:hsl(221, 87%, 60%)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 更新state, 界面会自动更新</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">setName</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">name </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'--'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">        </span><span class="token function" style="color:hsl(221, 87%, 60%)">setPwd</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">pwd </span><span class="token operator" style="color:hsl(221, 87%, 60%)">+</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'--'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">更新状态数据</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">button</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="组件通讯">组件通讯<a href="https://bianliangrensheng.cn/blog/react-basic#%E7%BB%84%E4%BB%B6%E9%80%9A%E8%AE%AF" class="hash-link" aria-label="组件通讯的直接链接" title="组件通讯的直接链接">​</a></h2>
<blockquote>
<p>react组件通讯有三种方式.分别是props, context, pubsub</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="props">props<a href="https://bianliangrensheng.cn/blog/react-basic#props" class="hash-link" aria-label="props的直接链接" title="props的直接链接">​</a></h3>
<blockquote>
<p>单向数据流: 非函数属性通过标签属性, 由外层组件逐级传递给内层组件</p>
<p>父子间通信
祖孙间通信
兄弟间通信</p>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140554644.png" alt="image-20250330140554644" class="img_LIWi"></p>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140606618.png" alt="image-20250330140606618" class="img_LIWi"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="context--了解">context  (了解)<a href="https://bianliangrensheng.cn/blog/react-basic#context--%E4%BA%86%E8%A7%A3" class="hash-link" aria-label="context  (了解)的直接链接" title="context  (了解)的直接链接">​</a></h3>
<blockquote>
<p>与任意后代直接通信</p>
<p>一般应用中不使用, 但一些插件库内部会使用context封装, 如: react-redux</p>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140612017.png" alt="image-20250330140612017" class="img_LIWi"></p>
<ul>
<li>
<p>调用 React. createContext() 创建 context 对象</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> context </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">createContext</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>在<code>外部组件</code>中使用 context 上的 Provider 组件作为父节点, 使用value属性定义要传递的值。Provider【提供者】</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">Provider</span><span class="token plain"> value</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">要传递的值</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain">  提供数据</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div className</span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token string" style="color:hsl(119, 34%, 47%)">"App"</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token maybe-class-name">Child1</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token property-access maybe-class-name">Provider</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>在<code>任意后代组件</code>中, 通过 React 的<code>useContext</code>读取数据</p>
<div class="language-js codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-js codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Child</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> data </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">useContext</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">context</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">	</span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain">data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&lt;</span><span class="token operator" style="color:hsl(221, 87%, 60%)">/</span><span class="token plain">div</span><span class="token operator" style="color:hsl(221, 87%, 60%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ul>
<blockquote>
<p>应用: 利用 context 改造 todos 案例</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="pubsub">pubsub<a href="https://bianliangrensheng.cn/blog/react-basic#pubsub" class="hash-link" aria-label="pubsub的直接链接" title="pubsub的直接链接">​</a></h3>
<blockquote>
<p>pubsub不是react特有的，是一种技术，可以在任何js项目中使用。vue react</p>
<p>兄弟/任意组件间直接通信</p>
<p>发布订阅机制: publish / subscribe
pubsub-js是一个用JS编写的库。
利用订阅发布模式, 当一个组件的状态发生了变化，可以通知其他任意组件更新这些变化</p>
</blockquote>
<p><img decoding="async" loading="lazy" src="https://bianliangrensheng.cn/gImage/content/image-20250330140621164.png" alt="image-20250330140621164" class="img_LIWi"></p>
<p><strong>实现:</strong></p>
<ul>
<li>
<p>安装</p>
<div class="language-shell codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-shell codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token function" style="color:hsl(221, 87%, 60%)">npm</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">install</span><span class="token plain"> pubsub-js / </span><span class="token function" style="color:hsl(221, 87%, 60%)">yarn</span><span class="token plain"> </span><span class="token function" style="color:hsl(221, 87%, 60%)">add</span><span class="token plain"> pubsub-js</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>导入</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword module" style="color:hsl(301, 63%, 40%)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">PubSub</span><span class="token plain"> </span><span class="token keyword module" style="color:hsl(301, 63%, 40%)">from</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">"pubsub-js"</span><span class="token plain"> </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 导入的PubSub是一个对象.提供了发布/订阅的功能</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
<li>
<p>pubsub-js 提供的方法</p>
<div class="language-javascript codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-javascript codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">// 订阅消息</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 参数一: 消息名</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 参数二: 用于接收数据的函数</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// token 订阅消息返回的令牌(用于取消订阅)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token plain"> token </span><span class="token operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token plain"> </span><span class="token maybe-class-name">PubSub</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">subscribe</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'消息名'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token parameter">msg</span><span class="token parameter punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token parameter"> data</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token console class-name" style="color:hsl(35, 99%, 36%)">console</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">log</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"> msg</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> data </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 发布消息</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 参数一: 消息名</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 参数二: 要传递的数据</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">PubSub</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">publish</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token string" style="color:hsl(119, 34%, 47%)">'消息名'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">,</span><span class="token plain"> </span><span class="token string" style="color:hsl(119, 34%, 47%)">'hello world!'</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 取消指定的订阅</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">PubSub</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">unsubscribe</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">token</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 取消某个话题的所有订阅</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token maybe-class-name">PubSub</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">unsubscribe</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain">消息名</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 清除所有话题</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"> </span><span class="token maybe-class-name">PubSub</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token method function property-access" style="color:hsl(221, 87%, 60%)">clearAllSubscriptions</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token comment" style="color:hsl(230, 4%, 64%)">/*</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">div.addEventListener('click', (event) =&gt; {})</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">我们点击div =&gt; 浏览器自动帮我分发事件: 事件名, 包含事件相关数据的事件对象</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">div.removeEventListener('click')</span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token comment" style="color:hsl(230, 4%, 64%)">*/</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
</li>
</ul>
<blockquote>
<p>利用 pubsub 改造 users 案例</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="fragment">Fragment<a href="https://bianliangrensheng.cn/blog/react-basic#fragment" class="hash-link" aria-label="Fragment的直接链接" title="Fragment的直接链接">​</a></h2>
<blockquote>
<p>doucmentFragment: 是原生DOM中, 内存中可以用来保存多个DOM节点对象的容器</p>
<p>如果将这个fragment添加到页面中, 它本身不会进入页面, 它的所有子节点会进行页面</p>
<p>react组件中只能有一个根组件.</p>
<p>之前使用div包裹的方式会给html结构增加很多无用的层级</p>
<p>为了解决这个问题,可以使用React.Fragment</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="测试documentfragment">测试DocumentFragment<a href="https://bianliangrensheng.cn/blog/react-basic#%E6%B5%8B%E8%AF%95documentfragment" class="hash-link" aria-label="测试DocumentFragment的直接链接" title="测试DocumentFragment的直接链接">​</a></h3>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token doctype punctuation" style="color:hsl(119, 34%, 47%)">&lt;!</span><span class="token doctype doctype-tag" style="color:hsl(230, 8%, 24%)">DOCTYPE</span><span class="token doctype" style="color:hsl(230, 8%, 24%)"> </span><span class="token doctype name" style="color:hsl(230, 8%, 24%)">html</span><span class="token doctype punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">html</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">lang</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">en</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">head</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">meta</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">charset</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">UTF-8</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">title</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain">测试DocumentFragment</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">title</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">head</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">body</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">test</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> testDiv </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'test'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> h1 </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'h1'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    h1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'我是标题'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> p </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'p'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    p</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'我是内容'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> fragment </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">createDocumentFragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    fragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">appendChild</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">h1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    fragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">appendChild</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">p</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">    testDiv</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">appendChild</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">fragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">body</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">html</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="不使用reactfragment">不使用React.Fragment<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%B8%8D%E4%BD%BF%E7%94%A8reactfragment" class="hash-link" aria-label="不使用React.Fragment的直接��链接" title="不使用React.Fragment的直接链接">​</a></h3>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Hello</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 渲染到页面之后,这个div就是一个多余的</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">fragment</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">hello react</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="使用reactfragment">使用React.Fragment<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BD%BF%E7%94%A8reactfragment" class="hash-link" aria-label="使用React.Fragment的直接链接" title="使用React.Fragment的直接链接">​</a></h3>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Hello</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 这样就只会渲染h1和p</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">React.Fragment</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">fragment</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">hello react</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag class-name" style="color:hsl(35, 99%, 36%)">React.Fragment</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="使用简写无名标签-">使用简写(无名标签 <code>&lt;&gt;</code>)<a href="https://bianliangrensheng.cn/blog/react-basic#%E4%BD%BF%E7%94%A8%E7%AE%80%E5%86%99%E6%97%A0%E5%90%8D%E6%A0%87%E7%AD%BE-" class="hash-link" aria-label="使用简写无名标签-的直接链接" title="使用简写无名标签-的直接链接">​</a></h3>
<div class="language-jsx codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-jsx codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token keyword" style="color:hsl(301, 63%, 40%)">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:hsl(221, 87%, 60%)">Hello</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token keyword control-flow" style="color:hsl(301, 63%, 40%)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token comment" style="color:hsl(230, 4%, 64%)">// 这是React.Fragment的简写形式</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">fragment</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">h1</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">        </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text">hello react</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">p</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain-text"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain-text">      </span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain">    </span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token plain"> </span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token punctuation" style="color:hsl(119, 34%, 47%)">}</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_gEnb" id="documentfragment-了解">DocumentFragment (了解)<a href="https://bianliangrensheng.cn/blog/react-basic#documentfragment-%E4%BA%86%E8%A7%A3" class="hash-link" aria-label="DocumentFragment (了解)的直接链接" title="DocumentFragment (了解)的直接链接">​</a></h3>
<blockquote>
<p><code>&lt;React.Fragment&gt;</code> 内部就是使用 DocumentFragment 实现的</p>
<p>DocumentFragment 是也是一种 DOM 节点, 它有2个特点</p>
<ol>
<li>它只存在于内存中, 它本身是不会进入页面显示的</li>
<li>它专门用来存放任意多个节点</li>
<li>如果将它添加到页面标签中, 那进入页面的是它的所有子节点</li>
</ol>
</blockquote>
<div class="language-html codeBlockContainer_APcc theme-code-block" style="--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)"><div class="codeBlockContent_m3Ux"><pre class="prism-code language-html codeBlock_qGQc thin-scrollbar" style="background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)"><code class="codeBlockLines_p187"><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag" style="color:hsl(5, 74%, 59%)"> </span><span class="token tag attr-name" style="color:hsl(35, 99%, 36%)">id</span><span class="token tag attr-value punctuation attr-equals" style="color:hsl(119, 34%, 47%)">=</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag attr-value" style="color:hsl(119, 34%, 47%)">test</span><span class="token tag attr-value punctuation" style="color:hsl(119, 34%, 47%)">"</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">div</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token plain"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 得到页面的空div</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> testDiv </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">getElementById</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'test'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 创建h1标签, 并指定内容</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> h1 </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'h1'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  h1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'我是标题'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 创建p标签, 并指定内容</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> p </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">createElement</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'p'</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  p</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript property-access">innerHTML</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:hsl(119, 34%, 47%)">'我是内容'</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 创建fragment容器, 将h1和p添加为它的子节点</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript keyword" style="color:hsl(301, 63%, 40%)">const</span><span class="token script language-javascript"> fragment </span><span class="token script language-javascript operator" style="color:hsl(221, 87%, 60%)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:hsl(221, 87%, 60%)">document</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">createDocumentFragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  fragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">appendChild</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">h1</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  fragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">appendChild</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">p</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  </span><span class="token script language-javascript comment" style="color:hsl(230, 4%, 64%)">// 将fragment添加为页面div的子节点 =&gt; 但fragment不会进入页面</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript">  testDiv</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">.</span><span class="token script language-javascript method function property-access" style="color:hsl(221, 87%, 60%)">appendChild</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">(</span><span class="token script language-javascript">fragment</span><span class="token script language-javascript punctuation" style="color:hsl(119, 34%, 47%)">)</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript" style="display:inline-block"></span><br></span><span class="token-line" style="color:hsl(230, 8%, 24%)"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&lt;/</span><span class="token tag" style="color:hsl(5, 74%, 59%)">script</span><span class="token tag punctuation" style="color:hsl(119, 34%, 47%)">&gt;</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>]]></content:encoded>
            <category>React</category>
            <category>前端开发</category>
            <category>JavaScript框架</category>
        </item>
    </channel>
</rss>