当前位置: 首页 > news >正文

HOW - React Router v6.x Feature 实践(react-router-dom)

目录

  • 基本特性
  • ranked routes matching
  • active links
    • NavLink
    • useMatch
  • relative links
      • 1. 相对路径的使用
      • 2. 嵌套路由的增强行为
      • 3. 优势和注意事项
      • 4. . 和 ..
      • 5. 总结
  • data loading
  • loading or changing data and redirect
  • pending navigation ui
  • skeleton ui with suspense
  • data mutations with `<Route action>`
  • busy indicators with route actions
  • data fetchers

基本特性

  1. client side routing
  2. nested routes
  3. dynamic segments

比较好理解,这里不赘述。

ranked routes matching

https://reactrouter.com/en/main/start/overview#ranked-route-matching

When matching URLs to routes, React Router will rank the routes according to the number of segments, static segments, dynamic segments, splats, etc. and pick the most specific match.

这句话描述了 React Router 在匹配 URL 和路由时的策略,即根据路由的具体性来优先选择最合适的匹配项。让我们逐步解析这句话的含义:

  1. URL 和路由的匹配

    • 当用户访问某个 URL 时,React Router 需要确定哪个路由规则最适合处理该 URL。例如,对于 URL /users/123,React Router 需要决定是匹配 /users/:id 还是其他定义的路由。
  2. 路由匹配的考量因素:优先级由高到低

    • 路由的段数(Segments):URL 和路由可以分成多个段(segments),例如 /users/123 有两个段,/users/:id 也有两个段。React Router 会比较 URL 和每个路由的段数,越多的段数一般意味着路由更具体。

    • 静态段(Static Segments):静态段是指在路由中直接指定的固定路径,例如 /users 是一个静态段。React Router 会考虑静态段的数量来确定路由的具体性。

    • 动态段(Dynamic Segments):动态段是指在路由中使用参数化路径,例如 /users/:id 中的 :id 是一个动态段。动态段的存在可能使得路由更灵活但也更具体。

    • 通配符(Splat):通配符(如 *)表示匹配多个路径段,通常用于处理不确定数量的路径部分。

  3. 最具体的匹配

    • React Router 会通过比较以上因素来确定哪个路由定义是最具体的匹配。具体的路由定义意味着它能够最准确地匹配当前的 URL,而不会与其他可能的路由定义冲突。
  4. 示例

<Route path="/teams/:teamId" />
<Route path="/teams/new" />

对于 http://example.com/teams/new. 会优先匹配第二个 Route。因为静态段数为 2,更具体。

理解 React Router 的路由匹配策略,特别是根据路由的具体性来优先选择最合适的匹配项,有助于开发者更有效地设计和管理复杂的路由结构。通过正确的路由定义和优先级排序,可以确保应用程序在导航和页面渲染时行为符合预期,并能够灵活地应对各种场景和URL路径。

active links

NavLink

https://reactrouter.com/en/main/components/nav-link

<NavLinkstyle={({ isActive, isPending }) => {return {color: isActive ? "red" : "inherit",};}}className={({ isActive, isPending }) => {return isActive ? "active" : isPending ? "pending" : "";}}
/>

useMatch

https://reactrouter.com/en/main/hooks/use-match

function SomeComp() {const match = useMatch("/messages");return <li className={Boolean(match) ? "active" : ""} />;
}

relative links

理解 React Router 中 <Link><NavLink> 组件相对路径的使用需要考虑它们与 HTML 中 <a> 标签的行为差异,尤其是在嵌套路由场景下的增强行为。

1. 相对路径的使用

  • HTML <a> 标签:在 HTML 中,使用 <a> 标签时,相对路径通常相对于当前页面的完整 URL。这意味着,相对路径会根据当前页面的路径来构建最终的目标 URL。

    <a href="about">About</a>
    
    • 如果当前 URL 是 http://example.com/home,那么点击上述链接将导航到 http://example.com/about
  • React Router 中的 <Link><NavLink>:在 React Router 中,<Link><NavLink> 组件可以接受相对路径,但它们的行为略有不同。

    import { Link, NavLink } from 'react-router-dom';<Link to="about">About</Link>
    <NavLink to="about">About</NavLink>
    
    • 这里的 to="about" 是相对路径,相对于当前路由的路径来构建目标 URL。例如,如果当前路由是 /home,那么这两个链接将会导航到 /home/about

2. 嵌套路由的增强行为

  • 嵌套路由:当应用程序中存在嵌套路由时,React Router 的 <Link><NavLink> 组件表现出更智能的行为,确保相对路径的正确解析。

    <Route path="/home"><Link to="about">About</Link><NavLink to="about">About</NavLink>
    </Route>
    
    • 在上述例子中,假设当前路由是 /home,那么 <Link><NavLink> 组件会基于当前路由的路径 /home 构建相对路径,导航到 /home/about

3. 优势和注意事项

  • 灵活性和便利性:相对路径的使用使得在应用中链接管理更加灵活和简单,尤其是在处理嵌套路由时。

  • 注意路径解析:确保理解相对路径在不同嵌套层级下的解析规则。React Router 的行为通常是基于当前活动的路由来解析相对路径,而不是简单地相对于根路径

4. . 和 …

<Route path="/home"><Link to=".">About</Link><NavLink to=".">About</NavLink>
</Route>
  • 在上述例子中,假设当前路由是 /home,那么 <Link><NavLink> 组件会基于当前路由的路径 /home 构建相对路径,导航到 /home
<Route path="home" element={<Home />}><Route path="project/:projectId" element={<Project />}><Route path=":taskId" element={<Task />} /></Route>
</Route>

Project 中会渲染:

  <Link to="abc"><Link to="."><Link to=".."></Link><Link to=".." relative="path">
  • 在上述例子中,假设当前路由是 /home/project/123,那么 <Link> 会基于当前路由的路径构建相对路径,分别导航到 /home/project/123/abc/home/project/abc/home/home/project

注意后面两个的差异:

By default, the … in relative links traverse the route hierarchy, not the URL segments. Adding relative=“path” in the next example allows you to traverse the path segments instead.

5. 总结

理解 React Router 中 <Link><NavLink> 组件相对路径的行为,特别是在嵌套路由情况下的增强行为,有助于开发者更有效地管理和导航应用程序中的链接。相对路径的使用使得在不同层级和场景下的导航操作更加灵活和便捷,但需要注意理解和控制路径的解析和构建规则。

data loading

https://reactrouter.com/en/main/start/overview#data-loading

Combined with nested routes, all of the data for multiple layouts at a specific URL can be loaded in parallel.

<Routepath="/"loader={async ({ request }) => {// loaders can be async functionsconst res = await fetch("/api/user.json", {signal: request.signal,});const user = await res.json();return user;}}element={<Root />}
><Routepath=":teamId"// loaders understand Fetch Responses and will automatically// unwrap the res.json(), so you can simply return a fetchloader={({ params }) => {return fetch(`/api/teams/${params.teamId}`);}}element={<Team />}><Routepath=":gameId"loader={({ params }) => {// of course you can use any data storereturn fakeSdk.getTeam(params.gameId);}}element={<Game />}/></Route>
</Route>

Data is made available to your components through useLoaderData.

function Root() {const user = useLoaderData();// data from <Route path="/">
}function Team() {const team = useLoaderData();// data from <Route path=":teamId">
}function Game() {const game = useLoaderData();// data from <Route path=":gameId">
}

When the user visits or clicks links to https://example.com/real-salt-lake/45face3, all three route loaders will be called and loaded in parallel, before the UI for that URL renders.

loading or changing data and redirect

https://reactrouter.com/en/main/route/loader#throwing-in-loaders

<Routepath="dashboard"loader={async () => {const user = await fake.getUser();if (!user) {// if you know you can't render the route, you can// throw a redirect to stop executing code here,// sending the user to a new routethrow redirect("/login");}// otherwise continueconst stats = await fake.getDashboardStats();return { user, stats };}}
/>

pending navigation ui

https://reactrouter.com/en/main/start/overview#pending-navigation-ui

When users navigate around the app, the data for the next page is loaded before the page is rendered. It’s important to provide user feedback during this time so the app doesn’t feel like it’s unresponsive.

function Root() {const navigation = useNavigation();return (<div>{navigation.state === "loading" && <GlobalSpinner />}<FakeSidebar /><Outlet /><FakeFooter /></div>);
}

skeleton ui with suspense

https://reactrouter.com/en/main/start/overview#skeleton-ui-with-suspense

Instead of waiting for the data for the next page, you can defer data so the UI flips over to the next screen with placeholder UI immediately while the data loads.

defer enables suspense for the un-awaited promises

<Routepath="issue/:issueId"element={<Issue />}loader={async ({ params }) => {// these are promises, but *not* awaitedconst comments = fake.getIssueComments(params.issueId);const history = fake.getIssueHistory(params.issueId);// the issue, however, *is* awaitedconst issue = await fake.getIssue(params.issueId);// defer enables suspense for the un-awaited promisesreturn defer({ issue, comments, history });}}
/>;function Issue() {const { issue, history, comments } = useLoaderData();return (<div><IssueDescription issue={issue} />{/* Suspense provides the placeholder fallback */}<Suspense fallback={<IssueHistorySkeleton />}>{/* Await manages the deferred data (promise) */}<Await resolve={history}>{/* this calls back when the data is resolved */}{(resolvedHistory) => (<IssueHistory history={resolvedHistory} />)}</Await></Suspense><Suspense fallback={<IssueCommentsSkeleton />}><Await resolve={comments}>{/* ... or you can use hooks to access the data */}<IssueComments /></Await></Suspense></div>);
}function IssueComments() {const comments = useAsyncValue();return <div>{/* ... */}</div>;
}

涉及如下 API 结合使用:

  1. defer
  2. Await
  3. useAsyncValue

data mutations with <Route action>

https://reactrouter.com/en/main/start/overview#data-mutations

HTML forms are navigation events, just like links. React Router supports HTML form workflows with client side routing.

When a form is submitted, the normal browser navigation event is prevented and a Request, with a body containing the FormData of the submission, is created. This request is sent to the <Route action> that matches the form’s <Form action>.

Form elements’s name prop are submitted to the action:

<Form action="/project/new"><label>Project title<br /><input type="text" name="title" /></label><label>Target Finish Date<br /><input type="date" name="due" /></label>
</Form>
<Routepath="project/new"action={async ({ request }) => {const formData = await request.formData();const newProject = await createProject({title: formData.get("title"),due: formData.get("due"),});return redirect(`/projects/${newProject.id}`);}}
/>

在 HTML 中,<form> 元素的 action 属性定义了当用户提交表单时将数据发送到的服务器端的 URL。

具体来说:

  • action 属性的作用

    • 当用户提交表单时,浏览器会将表单中的数据发送到指定的 URL。
    • 这个 URL 可以是相对路径或绝对路径。
    • 如果 action 属性未指定,表单会被提交到当前页面的 URL(即自身)。
  • 使用示例

    <form action="/project/new" method="post"><!-- 表单内容 --><input type="text" name="project_name" /><button type="submit">提交</button>
    </form>
    
    • 在这个例子中,action 属性的值是 "/project/new"。当用户点击提交按钮时,表单数据将被发送到当前服务器的 /project/new 路径。
  • 重要说明

    • 如果 action 属性指向一个相对路径,表单数据会被提交到当前页面的基础 URL 加上 action 的值。
    • 如果 action 属性是绝对路径(例如 http://example.com/project/new),数据将被发送到指定的绝对路径。
  • HTTP 方法 (method 属性)

    • 另一个与 action 相关的重要属性是 method,它指定了使用何种 HTTP 方法将表单数据发送到服务器。
    • 常见的方法是 GETPOSTGET 方法将数据附加到 URL 上(可见),而 POST 方法将数据包含在请求体中(不可见)。

总结来说,action 属性定义了表单数据提交的目标 URL。这对于将用户输入数据发送到后端处理或其他指定的处理程序非常重要。

busy indicators with route actions

https://reactrouter.com/en/main/start/overview#busy-indicators

When forms are being submitted to route actions, you have access to the navigation state to display busy indicators, disable fieldsets, etc.

function NewProjectForm() {const navigation = useNavigation();const busy = navigation.state === "submitting";return (<Form action="/project/new"><fieldset disabled={busy}><label>Project title<br /><input type="text" name="title" /></label><label>Target Finish Date<br /><input type="date" name="due" /></label></fieldset><button type="submit" disabled={busy}>{busy ? "Creating..." : "Create"}</button></Form>);
}

data fetchers

HTML Forms are the model for mutations but they have one major limitation: you can have only one at a time because a form submission is a navigation.

Most web apps need to allow for multiple mutations to be happening at the same time, like a list of records where each can be independently deleted, marked complete, liked, etc.

Fetchers allow you to interact with the route actions and loaders without causing a navigation in the browser, but still getting all the conventional benefits like error handling, revalidation, interruption handling, and race condition handling.

Imagine a list of tasks:

function Tasks() {const tasks = useLoaderData();return tasks.map((task) => (<div><p>{task.name}</p><ToggleCompleteButton task={task} /></div>));
}

Each task can be marked complete independently of the rest, with its own pending state and without causing a navigation with a fetcher:

function ToggleCompleteButton({ task }) {const fetcher = useFetcher();return (<fetcher.Form method="post" action="/toggle-complete"><fieldset disabled={fetcher.state !== "idle"}><input type="hidden" name="id" value={task.id} /><inputtype="hidden"name="status"value={task.complete ? "incomplete" : "complete"}/><button type="submit">{task.status === "complete"? "Mark Incomplete": "Mark Complete"}</button></fieldset></fetcher.Form>);
}

相关文章:

HOW - React Router v6.x Feature 实践(react-router-dom)

目录 基本特性ranked routes matchingactive linksNavLinkuseMatch relative links1. 相对路径的使用2. 嵌套路由的增强行为3. 优势和注意事项4. . 和 ..5. 总结 data loadingloading or changing data and redirectpending navigation uiskeleton ui with suspensedata mutati…...

`padding`、`border`、`width`、`height` 和 `display` 这些 CSS 属性的作用

盒模型中的属性 padding&#xff08;内边距&#xff09; padding 用于控制元素内容与边框之间的空间&#xff0c;可以为元素的每个边&#xff08;上、右、下、左&#xff09;分别设置内边距。内边距的单位可以是像素&#xff08;px&#xff09;、百分比&#xff08;%&#xf…...

C++ QT 全局信号的实现

每次做全局信号都需要重新建立文件&#xff0c;太麻烦了&#xff0c;记录一下&#xff0c;以后直接复制。 头文件 globalSignalEmitter.h #pragma once //#ifndef GLOBALSIGNALEITTER_H //#define GLOBALSIGNALEITTER_H#include <QObject>class GlobalSignalEmitter : …...

十款绚丽的前端 CSS 菜单导航动画

CSS汉堡菜单是一种非常流行的PC端和移动端web菜单风格&#xff0c;特别是移动端&#xff0c;这种风格的菜单应用更为广泛。这款菜单便非常适合在手机App上使用&#xff0c;它的特点是当顶部菜单弹出时&#xff0c;页面内容将会配合菜单出现适当的联动&#xff0c;让整个页面变得…...

debain系统使用日志

账号 vboxuser changeme ssh远程登录vbox虚拟机 https://www.cnblogs.com/BuzzWeek/p/17557981.html Terminal su - root changeme sudo apt-get update sudo apt-get -y install openssh-server #启动sshd systemctl status sshd 设置允许ssh登录vbox虚拟机 参考&#xf…...

【Word】快速对齐目录

目录标题 1. 全选要操作的内容 → 右键 → 段落2. 选则制表位3. 配置制表符4. Tab键即可 1. 全选要操作的内容 → 右键 → 段落 2. 选则制表位 3. 配置制表符 4. Tab键即可...

MATLAB基础应用精讲-【数模应用】 岭回归(Ridge)(附MATLAB、python和R语言代码实现)

目录 前言 算法原理 数学模型 Ridge 回归的估计量 Ridge 回归与标准多元线性回归的比较 3. Ridge 参数的选择 算法步骤 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 6、输出结果分析 7、注意事项 8、模型理论 SPSSAU 岭回归分析案…...

推荐6个开源博客项目源码,你会选哪个呢

搭建个人博客系统时&#xff0c;可以选择多种开源平台&#xff0c;以下是一些受欢迎的开源博客系统及其特点&#xff1a; 1. Plumemo Plumemo 是一个轻量、易用、前后端分离的博客系统&#xff0c;为了解除开发人员对后端的束缚&#xff0c;真正做到的一个面向接口开发的博客…...

OCR text detect

主干网络 VoVNet&#xff1a;实时目标检测的新backbone网络_vovnet pytorch-CSDN博客 DenseNet&#xff1a; arxiv.org/pdf/1608.06993 密集连接&#xff1a; DenseNet 的核心思想是将网络中的每一层与其前面的所有层直接连接。对于一个 L 层的网络&#xff0c;DenseNet 具有…...

【MySQL】MySQL连接池原理与简易网站数据流动是如何进行

MySQL连接池原理与简易网站数据流动是如何进行 1.MySQL连接池原理2.简易网站数据流动是如何进行 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f60…...

学数据结构学的很慢,毫无头绪怎么办 ?

这个情况比较正常诶&#xff0c;不用有太大的心理压力。 然后程序设计那个没有学过&#xff0c;而数据结构的前置课程之一就是程序设计&#xff0c;比如栈/队列/树&#xff0c;这些数据结构都要基于代码实现的。我估计是因为你之前缺少学习程序设计的经验&#xff0c;所以学起…...

VSCode常用快捷键和功能

格式化代码&#xff1a; ShiftAltF JS中自动输入console.log()的方法&#xff1a; 先在vscode中&#xff0c;找到文件 > 首选项 > 配置用户代码片段&#xff0c;在弹出的下拉框处方输入javascript.json&#xff0c;复制下面的代码&#xff0c;覆盖原来的代码&#xff0…...

上海市计算机学会竞赛平台2023年2月月赛丙组平分数字(一)

题目描述 给定 &#x1d45b;n 个整数&#xff1a;&#x1d44e;1,&#x1d44e;2,⋯ ,&#x1d44e;&#x1d45b;a1​,a2​,⋯,an​&#xff0c;请判定能否将它们分成两个部分&#xff08;不得丢弃任何数字&#xff09;&#xff0c;每部分的数字之和一样大。 输入格式 第…...

Qwen1.5-1.8b部署

仿照ChatGLM3部署&#xff0c;参考了Qwen模型的文档&#xff0c;模型地址https://modelscope.cn/models/qwen/Qwen1.5-1.8B-Chat/summary http接口 服务端代码api.py from fastapi import FastAPI, Request from transformers import AutoTokenizer, AutoModelForCausalLM, …...

关于7月1号centos官方停止维护7系列版本导致centos7+版本的机器yum等命令无法使用的解决教程

更换yum源两种方式 第一种 在还能使用yum等命令的情况是执行下面的命令 注意&#xff1a;阿里云和腾讯云二选一即可 一丶 yum源 腾讯云&#xff1a; wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.cloud.tencent.com/repo/centos7_base.repo curl -o /etc/yum.…...

2024人工智能大会_强化学习论坛相关记录

求解大规模数学优化问题 规划也称为优化 四要素&#xff1a;数据、变量、目标、约束 将一个简单的数学规划问题项gpt进行提问&#xff0c;GPT给了一个近似解&#xff0c;但不是确切的解。 大模型的训练本身就是一个优化问题。 大模型是如何训练的&#xff1f;大模型训练通常使…...

Android SurfaceFlinger——创建EGLContext(二十五)

前面文章我们获取了 EGL 的最优配置,创建了 EGLSurface 并与 Surface 进行了关联,然后还需要获取 OpenGL ES 的上下文 Context,这也是 EGL 控制接口的三要素(Displays、Contexts 和 Surfaces)之一。 1)getInternalDisplayToken:获取显示屏的 SurfaceControl 令牌(Token…...

python 10个自动化脚本

目录 &#x1f31f; 引言 &#x1f4da; 理论基础 &#x1f6e0;️ 使用场景与代码示例 场景一&#xff1a;批量重命名文件 场景二&#xff1a;自动下载网页内容 场景三&#xff1a;数据清洗 场景四&#xff1a;定时执行任务 场景五&#xff1a;自动化邮件发送 场景六…...

填报高考志愿,怎样正确地选择大学专业?

大学专业的选择&#xff0c;会关系到未来几年甚至一辈子的发展方向。这也是为什么很多人结束高考之后就开始愁眉苦脸&#xff0c;因为他们不知道应该如何选择大学专业&#xff0c;生怕一个错误的决定会影响自己一生。 毋庸置疑&#xff0c;在面对这种选择的时候&#xff0c;我…...

Java 使用sql查询mongodb

在现代应用开发中&#xff0c;关系型数据库和NoSQL数据库各有千秋。MongoDB作为一种流行的NoSQL数据库&#xff0c;以其灵活的文档模型和强大的扩展能力&#xff0c;受到广泛欢迎。然而&#xff0c;有时开发者可能更熟悉SQL查询语法&#xff0c;或者需要在现有系统中复用SQL查询…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...