React Router初学者入门指南（2023版）

news2024/11/28 14:44:31

1ddeeff44f57a299ef3e874397ddd090.jpeg

React Router，简单来说，是一个帮助处理React应用程序中导航和路由的库。它是用于管理React中路由的最流行的路由工具。如果你对路由的概念不熟悉，可以将其视为在网站的不同部分之间导航的过程。例如，当你进入网站的“联系我们”部分时，你已经成功进行了一次路由过程。本文将为您提供有关React Router的所有细节，以便您可以充分利用它。

如果你对React Router还不熟悉，你可能习惯使用普通的链接（a标签）在你的应用程序中进行导航。然而，当你想在导航时保留应用程序的当前状态时，就会出现问题。不幸的是，普通的链接通常会触发页面刷新来显示组件，从而破坏用户体验。这就是React Router的用武之地。

React Router允许您在应用程序中定义不同的路由，并将它们链接到各自的组件，而无需重新加载页面。这种方法使得React Router能够轻松更新页面上的内容，并使网站感觉像一个原生应用程序。

使用React Router还有其他好处，比如创建复杂的导航、无缝的页面导航结构以及对动态URL的支持。

设置环境

要理解React Router的工作原理，最好的方法之一是构建一个简单的网站。因此，让我们构建一个小型的历史网站，不要太复杂。

所以，让我们准备好一切开始使用React Router所需的东西。

安装React：有几种方法可以做到这一点，但让我们选择最简单的方法：create-react-app（CRA）。通过代码编辑器终端安装React，运行以下命令：

npx create-react-app history-app

然后，通过运行cd history-app导航到创建的React应用程序。

  • 安装React Router：要在React网站中安装react-router包，请在终端中运行以下命令：

npm install react-router-dom

这个命令允许你安装React Router，一个必要的包。

完成后，您可以通过运行npm start来启动React应用程序。就是这样！React和React Router已经准备好使用了。

让我们添加一些React组件，以便在历史应用程序上获得一些虚拟内容。您只需将其复制并粘贴到App.js中，即默认的应用程序组件。

export default function App() {
 return (
   <>
     <Home />
   </>
 );
}

function Home() {
 return (
   <div>
     <h1>The Paradise of History</h1>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vero
       laudantium repella
     </p>
   </div>
 );
}

function Eras() {
 return (
   <div>
     <h1>The Eras of Time</h1>
     <ul>
       <li>
         <a href="/">Medieval</a>
       </li>
       <li>
         <a href="/">Digital</a>
       </li>
     </ul>
   </div>
 );
}

运行后的效果

37f9ae0792cbd5dc6415ff58a71b4cc7.png

理解路由概念

在我们继续之前，让我们快速了解一些React Router中的关键概念：

History Stack：React Router智能地使用HTML5 History API来跟踪用户的导航历史。当用户访问一个新的URL时，React Router将该URL推送到历史堆栈中。当用户导航到其他URL时，它们也会被推送到堆栈中。这就是React Router在不刷新页面的情况下来回导航路由的方式。

Location：这指的是在浏览网站时当前所在的URL。它是历史堆栈中的顶级URL，以及React Router如何动态更改显示的内容以匹配正确的URL。

在一些浏览器中，比如Chrome，你可以点击并长按“返回”按钮来查看历史记录中所有的URL列表。

浏览器路由器及其用途

众所周知，React使用组件和钩子，React Router也是如此。而React Router提供的一个关键组件是。

就像body元素是网站的骨干一样，BrowserRouter 对于 React Router 也是如此。它为网站内所有可能的路由提供了基础。

注意：BrowserRouter使用HTML5 History API来操作浏览器的URL，并将其与当前显示的页面保持同步。

BrowserRouter可以放置在应用程序的任何位置，但通常情况下，您会希望将BrowserRouter放置在组件树的顶部，以包裹整个应用程序的组件。

现在，回到构建我们简单的历史网站的过程中。为了实现BrowserRouter，将整个App组件包裹在其中。要做到这一点，请转到index.js文件：

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
 <React.StrictMode>
   <BrowserRouter>
     <App />
   </BrowserRouter>
 </React.StrictMode>
);

通过 <BrowserRouter /> App 组件，路由功能在 App 组件中的所有组件中都可用。

关于BrowserRouter的内容就这些了，我们继续吧。

值得注意的是，还有其他类似的组件可用，比如 MemoryRouter、StaticRouter 等等。

使用 Routes 和 Route

要完全掌握React Router中的 Routes 组件的作用，首先我们需要了解 Route 的作用。

Route

简单来说， Route 定义了一个特定的URL路径，并指向在访问该URL路径时应该渲染的组件。

路由组件有两个主要属性：

Path：此属性接受一个字符串，用于指定 Route 的路径。例如，如果有一个 Route ，其 path 设置为 "/eras" ，每当URL变为
https://historyApp.com/eras 时，将触发此 Route 。

Element:当 path 属性中的路径被访问时，该属性被分配给要渲染的React组件。因此，如果访问 /eras 路径，则 <Eras /> 组件将在页面上呈现。

这里是一个代码示例：

<Route path='/eras' element={<Eras />} />

Routes

Routes 是 Route 组件的容器组件。它负责检查当前URL位置，并将其与子 Route 组件中指定的路径进行比较，以找到匹配项。

在 Routes 内，您可以嵌套所有的 Route 组件，然后在浏览网站时， Routes 会获取当前的URL，并将其与每个子路由组件进行匹配，以找到与之对应的最佳组件。

因此，在历史应用程序中设置 Routes 和 Route 的步骤如下：

import { Routes, Route } from 'react-router-dom';

export default function App() {
 return (
   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/eras" element={<Eras />} />
   </Routes>
 );
}

这段代码中:

  • 首先从 react-router-dom 包中导入 Routes 和 Route 组件。

  • 然后，在 App 组件内部， Routes 组件限制了不同的 Route 组件。

  • 第一个路由的路径设置为("/")，当访问时将渲染 Home 组件。这个默认路由将始终在访问根URL时渲染。

  • 该 /eras 路由与 Eras 组件相关联。这意味着每当URL路径与 /eras 匹配时，将显示 <Eras /> 内容。

当您在地址栏中的根URL后添加 /eras 时，React Router使用 Routes 组件来匹配具有路径设置为 /eras 的确切 Route 。一旦找到，将渲染在匹配的 Route 的 element 属性中定义的组件；在这种情况下，是 <Eras /> 组件。

1b0292b8d1ac1b4a3f5ac4037d252a51.gif

404 页面

404错误是一个HTTP状态码，当请求的资源或页面无法找到时会显示出来。这可能发生在用户输入了一个不存在的URL时。

React Router 包含了一种处理 404 错误的方式，当访问一个未定义的网址时，会渲染一个自定义组件。

要处理React Router中的404错误，请创建一个 route ，将其 path 属性设置为 * ，并将其 element 属性设置为应该呈现的错误组件。

可以这样实施：

首先，让我们创建一个错误404组件

function Error404() {
 return (
   <div>
     <h1>404 — Page Not Found</h1>
     <a href="/">Take me back!</a>
   </div>
 );
}

然后创建一个 route 来渲染 <Error404 />.

export default function App() {
 return (
   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/eras" element={<Eras />} />
     {/* 404 page */}
     <Route path="*" element={<Error404 />} />
   </Routes>
 );
}

有了这个设置，每当访问一个不存在的URL时，React Router会自动使用 route 组件，并将 path 设置为 * ，然后渲染其元素，即 Error404 组件。

8591066c72ad6792b9d9cbc14c6edc43.gif

现在，我们可以放心地确保网站能够处理任何意外的URL。

路由之间的连接

到目前为止，我们只讨论了如何通过手动在地址栏中输入URL来访问路由。然而，这种方式并不理想，因为用户必须记住每个页面的确切URL才能访问。

a 标签通常用于解决这个问题，但它有一些限制。为了绕过这些限制，React Router使用 Link 组件。

在React Router中， Link 是路由导航的主要方式。链接组件在底层使用 a 标签，但通过阻止默认页面重新加载来增强它。相反， Link 将其 to 属性中的URL推送到历史堆栈，然后 routes 组件找到具有相同URL的匹配 route 并显示相关组件。

React Router使用 Link 组件而不是 a 标签，因为 Link 被设计用于防止页面重新加载，保留应用程序状态，并在路由之间提供无缝导航。

这是在历史网站中使用 Link 的方法。前往 App.js 并创建一个导航组件：

import { Link } from "react-router-dom";

function Nav() {
 return (
   <ul className='nav'>
     <li>
       <Link to='/'>Home</NavLink>
     </li>
     <li>
       <Link to='/eras'>Eras</NavLink>
     </li>
   </ul>
 );
}

首先从 react-router-dom 导入 Link 组件。然后，创建一个功能组件 Nav ，用作历史网站的导航。

这个 Nav 组件遵循了典型导航菜单的结构；只是使用了 Link 组件而不是 a 标签。

每个 <Link /> 都有一个特定的路径分配给 to 属性；这为 Link 设置了目标路由。因此，当点击任何这些链接时，React Router会从 to 属性获取URL，匹配正确的 route 路径，并渲染指定的组件。

由于 Nav 组件应该在所有页面上可见，让我们将其放置在 App 组件的顶部：

export default function App() {
 return (
   <>
     <Nav />
     <Routes>
       <Route path='/' element={<Home />} />
       <Route path='/eras' element={<Eras />} />
       <Route path='*' element={<Error404 />} />
     </Routes>
   </>
 );
}

我们还可以给它添加一些简单的样式来增加吸引力：App.css

a {
 text-decoration: none;
 color: inherit;
}
a:hover {
 color: #e32a30;
}

.nav {
 list-style: none;
 display: flex;
 width: 500px;
 justify-content: space-around;
 align-items: center;
 font-size: 1.1rem;
 font-weight: bold;
}

e0357af9a10003a8562b2632fa9be1ea.gif

NavLink 与 Link 的不同

React Router有一个叫做 NavLink 的组件。它类似于 Link ，但主要用于处理菜单导航链接，不同于 Link 组件，后者可用于任何类型的链接。

NavLink 和 Link 之间的主要区别是 NavLink 能够检测自身是否处于活动状态。当 NavLink 检测到自身处于活动状态时，默认会给其组件添加一个 active 类。

由于历史网站中存在导航菜单，让我们将 Link 组件更新为 NavLink

import { Link, NavLink } from "react-router-dom";

function Nav() {
 return (
   <ul className='nav'>
     <li>
       <NavLink to='/'>Home</NavLink>
     </li>
     <li>
       <NavLink to='/eras'>Eras</NavLink>
     </li>
   </ul>
 );
}

active 类可以使用CSS进行自定义。前往 App.css 进行修改：

.active {
 color: #e32a30;
}

5a02b4c016099f81ea45831579d1471e.gif

总的来说， NavLink 在创建导航菜单链接时比 Link 组件更强大。

嵌套路由

在React Router中，嵌套可以被视为在路由之间建立父子连接。这可以用来组织共享相同URL路径的路由。

嵌套路由使用一个 Route 组件作为父路由，另一个 Route 组件用于定义父路由内的子路由。因此，只有在父路由上时才能渲染子路由。

在历史网站上，可以在时代部分找到“中世纪（Medieval）”和“数字化（Digital）”这两个可用的时代类别。因此，要访问这些时代的详细信息，我们可以将它们嵌套在 /eras 路径中。

让我们将这个功能添加到历史网站上：

创建“Medieval”和“Digital”组件：

function MedievalEra() {
 return (
   <div>
     <hr />
     <h3>The Medieval Era</h3>
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
 );
}

function DigitalEra() {
 return (
   <div>
     <hr />
     <h3>The Digital Era</h3>
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
 );
}

转到 App 组件，并在 /eras 路由内创建嵌套路由：

export default function App() {
 return (
   <>
     <Nav />
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/eras" element={<Eras />}>
         <Route path="medieval" element={<MedievalEra />} />
         <Route path="digital" element={<DigitalEra />} />
       </Route>
       <Route path="*" element={<Error404 />} />
     </Routes>
   </>
 );
}

此时，导航到 /eras/medieval 或 /eras/digital 应该分别呈现 <MedievalEra /> 和 <DigitalEra /> 组件。然而，它不会按预期呈现。

这是因为React Router不知道如何放置这些嵌套组件。为了解决这个问题，React Router提供了一个名为 Outlet 的组件，可以明确指出嵌套路由组件应该放置在哪里。

导入 Outlet 组件：

import { Outlet } from "react-router-dom";

将 Outlet 组件放置在 Eras 组件内部：

function Eras() {
 return (
   <div>
     <h1>The Eras of Time</h1>
     <ul>
       <li>
         <Link to="medieval">Medieval</Link>
       </li>
       <li>
         <Link to="digital">Digital</Link>
       </li>
     </ul>

     <Outlet />
   </div>
 );
}

在这段代码中，之前使用的 a 标签已被替换为 Link 组件，并将相应的路径放置在 to 属性中。

在此之后， <Outlet /> 组件将被放置在下方，因为这是嵌套路由组件将被渲染的位置。

e748c3b14ec06d5d9878af6c798638ec.gif

嵌套路由有各种用途，比如层次化组织路由、代码效率、提高性能等。

动态路由与useParams

动态路由是一个概念，它允许您创建不是硬编码的路由，而是根据用户操作或数据生成的路由。

React Router使用 Route 组件和 useParams 钩子来处理动态路由。

设置动态路由时，在 route 组件的 path 属性中使用占位符（用冒号 : 表示）。

就像这样：

<Route path="/eras/:type" element={<EraType />} />

这里，对于 Route 的占位符是 : type ，它表示 type 参数的值将会动态生成。

React Router 提供了一个叫做 useParams 的钩子，用于有效处理动态路由。

基本上， useParams hook 返回一个包含来自 Route 组件的动态值的对象，该值可以在负责渲染动态内容的组件中使用。

让我们看看它是如何工作的：

import { useParams } from "react-router-dom";

function EraType() {
 const { type } = useParams();

 return (
   <div>
     <hr />
     <h3>The {type} Era</h3>
   </div>
 );
}

现在更新在 /eras 中找到的路由，以包括动态路由：

export default function App() {
 return (
   <>
     <Nav />
     <Routes>
       <Route path='/' element={<Home />} />
       <Route path='/eras' element={<Eras />}>
         <Route path='medieval' element={<MedievalEra />} />
         <Route path='digital' element={<DigitalEra />} />
         {/* Dynamic route */}
         <Route path=':type' element={<EraType />} />
       </Route>
       <Route path='*' element={<Error404 />} />
     </Routes>
   </>
 );
}

有了这个动态 Route ，当你在 /eras 路由内导航时，像 /eras/ancient 这样。值“ancient”是动态路径，并且可以通过从 useParams 提取的 type 变量进行访问。

由于嵌套的路由结构， <Eras /> 组件内的 <EraType /> 被渲染出来。

38dd725c7deb05edb896009ae13d4dff.gif

这只是 useParams 的一个基本用例；这个钩子可以用于其他方式，比如从API中获取类似的动态数据。

使用useRoutes钩子

React Router 提供的另一个钩子是 useRoutes 钩子。

这个钩子只是React Router中用于结构化 Routes 和 Route 的另一种方式。它的工作原理是：不使用React组件（JSX）的形式，而是使用JavaScript对象。

在 App.js 中，这是我们如何构建 Routes 和 Route 组件的结构：

export default function App() {
 return (
   <>
     <Nav />
     <Routes>
       <Route path='/' element={<Home />} />
       <Route path='/eras' element={<Eras />}>
         <Route path='medieval' element={<MedievalEra />} />
         <Route path='digital' element={<DigitalEra />} />
         <Route path=':type' element={<EraType />} />
       </Route>
       <Route path='*' element={<Error404 />} />
     </Routes>
   </>
 );
}

现在，通过使用 useRoutes 钩子，代码可以重构如下：

import { useRoutes } from 'react-router-dom';

export default function App() {
 const routes = useRoutes([
   {
     path: "/",
     element: <Home />,
   },
   {
     path: "/eras",
     element: <Eras />,
     children: [
       {
         path: "medieval",
         element: <MedievalEra />,
       },
       {
         path: "digital",
         element: <DigitalEra />,
       },
       {
         path: ":type",
         element: <EraType />,
       },
     ],
   },
   {
     path: "*",
     element: <Error404 />,
   },
 ]);

 return (
   <>
     <Nav />
     {routes}
   </>
 );
}

useRoutes 钩子从 react-router-dom 导入。然后，一个路由对象数组被传递给 useRoutes 。每个路由对象都有一个 path 和 element 属性，用于指定路径和在路由匹配时应该渲染的组件。

所以，在 useRoutes 钩子或 Routes 和 Route 组件之间的选择归结为个人偏好。选择最适合你风格的那个。

结束

总之，学习React Router是React开发者应该迈出的重要一步。通过使用这个工具，在应用中管理路由导航和创建良好结构化的路由系统变得轻而易举。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1145980.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

UE5实现相机水平矫正

UE5实现相机水平矫正

UE5实现相机水平矫正 思路&#xff0c;用HIT获得基于相机视角的 离散采样点&#xff0c;然后根据距离相机距离进行权重分析。 距离越近&#xff0c;采样约中心&#xff0c;即越接近人眼注意点&#xff0c;最后算出加权平均高度&#xff0c;赋予给相机&#xff0c;相机将水平旋…
阅读更多...
C++ -- 深入理解多态

C++ -- 深入理解多态

前言&#xff1a;多态的概念&#xff0c;通俗地来讲就是多种形态。当我们要完成某个行为的时候&#xff0c;不同的对象去完成时会产生不同的状态&#xff0c;这就叫做多态。具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会 产生出不同的状态。多态在C的类和对象中…
阅读更多...
python裁剪图片

python裁剪图片

我原本想找到一个小一点的彩色人脸数据集&#xff0c;但是都没有找到合适的 但是我找到了一个人脸数据集的封面 于是我把这两个图片裁开&#xff0c;得到了6464张彩色人脸照片 from PIL import Image# 打开大图 big_image Image.open(female.jpg) # 获取大图的宽度和高度 wid…
阅读更多...
windows 系统不设置密码也能远程登陆

windows 系统不设置密码也能远程登陆

前言 如果windows系统不设置密码&#xff0c;默认情况下是不能远程登陆的 解决办法 按下winr&#xff0c;输入gpedit.msc 再回车 点击windows设置 ----安全设置 ------本地策略-----安全选项 设置为禁用 远程就可以不输入密码了
阅读更多...
PMI-ACP（103：1-16）

PMI-ACP（103：1-16）

英文名&#xff1a;ACP 外文名&#xff1a;Agile Certified Practitioner 中文名&#xff1a;敏捷管理专业人士资格认证 是由 美国项目管理协会 PMI Project Management Institute 发起的&#xff0c;严格评估项目管理人员知识技能是否具有高品质的资格认证。 一年开展4次考…
阅读更多...
摆玩具[算法赛]（差分）

摆玩具[算法赛]（差分）

本题链接&#xff1a;用户登录 题目&#xff1a; 样例&#xff1a; 输入 5 2 2 5 7 10 13 输出 8 思路&#xff1a; 由题意&#xff0c;这是一个递增的数组&#xff0c;其次要求最小的极差&#xff0c;对 数组 进行分成 k 个分段数组。 由于是一个递增的数组&#xf…
阅读更多...
postgresql14管理（六）-备份与恢复

postgresql14管理（六）-备份与恢复

定义 备份&#xff08;backup&#xff09;&#xff1a;通过物理复制或逻辑导出的方式&#xff0c;将数据库的文件或结构和数据拷贝到其他位置进行存储&#xff1b; 还原&#xff08;restore&#xff09;&#xff1a;是一种不完全的恢复。使用备份文件将数据库恢复到备份时的状…
阅读更多...
4.多层感知机

4.多层感知机

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 多层感知机一、感知机1、感知机2、训练感知机3、图形解释4、收敛定理5、XOR问题6、总结 二、多层感知机1、XOR2、单隐藏层3、单隐藏层-单分类4、为什么需要非线性激活函数5、Sigmoid函数6、Tanh函数7、ReLU函数8、多类分…
阅读更多...
C语言十进制转其它进制

C语言十进制转其它进制

短除法介绍 短除法&#xff1a; 主要功能为将十进制数据转为其它进制的数据&#xff0c;假设我们要转换为 X 进制&#xff0c;那么具体的流程如下&#xff1a; 十进制数字不断除以 X&#xff0c;直到商为 0 记录每次计算得到的余数 将余数倒序输出&#xff0c;即为对应的 X 进…
阅读更多...
C# 递归算法使用简介_常用整理

C# 递归算法使用简介_常用整理

一、递归简介 递归算法是一种直接或者间接调用自身函数或者方法的算法。 递归算法的实质是把问题分解成规模缩小的同类问题的子问题&#xff0c;然后递归调用方法来表示问题的解。递归算法对解决一大类问题很有效&#xff0c;它可以使算法简洁和易于理解。 递归本质是循环&a…
阅读更多...
正五边形的周长 题解

正五边形的周长 题解

描述 已知一个正五边形的一条边的长度是a&#xff0c;计算输出该正五边形的周长。 输入 一行一个正整数a&#xff0c;表示该正五边形的边长。a的数值不会超过int的范围。 输出 一行一个正整数&#xff0c;表示这个该正五边形的周长&#xff0c;也就是5条边加起来的和。 输入样…
阅读更多...
计网小题题库整理第一轮（面向期末基础）（1）

计网小题题库整理第一轮（面向期末基础）（1）

整理了一部分选择和填空&#xff0c;比较基础。计网的核心在于&#xff1a;背就完事~ 一.填空题 在采用电信号表达数据的系统中&#xff0c;数据有数字数据 和 模拟数据 两种。域名系统 DNS 是一个 分布式数据库 系统。TCP/IP 的网络层最重要的协议是 IP 互连网协议&#xff0…
阅读更多...
STM32GPIO有几种模式，

STM32GPIO有几种模式，

一&#xff1a;GPIO有八种模式 输入&#xff1a; GPIO_Mode_AIN 模拟输入 GPIO_Mode_IN_FLOATING 浮空输入 GPIO_Mode_IPD 下拉输入 GPIO_Mode_IPU 上拉输入 输出 GPIO_Mode_Out_OD 开漏输出 GPIO_Mode_Out_PP 推挽输出 GPIO_Mode_AF_OD 复用开漏输出 GPIO_Mode_AF_PP 复用推挽…
阅读更多...
数组与链表算法-单向链表算法

数组与链表算法-单向链表算法

目录 数组与链表算法-单向链表算法 C代码 单向链表插入节点的算法 C代码 单向链表删除节点的算法 C代码 对单向链表进行反转的算法 C代码 单向链表串接的算法 C代码 数组与链表算法-单向链表算法 在C中&#xff0c;若以动态分配产生链表节点的方式&#xff0c;则可以…
阅读更多...
标准ACL，扩展ACL，基本ACL，高级ACL

标准ACL，扩展ACL，基本ACL，高级ACL

其实标准ACL&#xff0c;扩展ACL&#xff0c;基本ACL&#xff0c;高级ACL是同一个概念的不同名称&#xff0c;区别在于: 思科路由器支持标准ACL和扩展ACL两种类型的访问控制列表&#xff0c;没有”基本ACL“和”高级ACL“的概念&#xff0c;而华为路由器都支持 编号范围&…
阅读更多...
2024年天津中德应用技术大学专升本自动化专业基础考试大纲

2024年天津中德应用技术大学专升本自动化专业基础考试大纲

天津中德应用技术大学自动化专业&#xff08;高职升本科&#xff09;2024年专业基础考试大纲 一、试卷类型&#xff08;仅供参考&#xff09; 试卷卷面成绩共200分&#xff0c;考试时间为2小时。内容包含电工基础30%&#xff0c;电子技术30%&#xff0c;电机原理与拖动40%。试…
阅读更多...
PLC程序常用模块

PLC程序常用模块

常用程序块 中继复位&#xff08;使用特殊中继SM&#xff09;初始化置位&#xff08;set&#xff09;初始化急停互锁按时断电模块&#xff08;按下按钮&#xff0c;1s后自动断电&#xff09;一次性开关循环的几种方法并联常开点定时器循环&#xff08;串联常闭&#xff0c;断电…
阅读更多...
对Happens-Before的理解

对Happens-Before的理解

Happens-Before Happens-Before 是一种可见性模型&#xff0c;也就是说&#xff0c;在多线程环境下。原本因为指令重排序的存在会导致数据的可见性问题&#xff0c;也就是 A 线程修改某个共享变量对 B 线程不可见。因此&#xff0c;JMM 通过 Happens-Before 关系向开发人员提供…
阅读更多...
使用 kube-downscaler 降低Kubernetes集群成本

使用 kube-downscaler 降低Kubernetes集群成本

新钛云服已累计为您分享772篇技术干货 介绍 Kube-downscaler 是一款开源工具&#xff0c;允许用户定义 Kubernetes 中 pod 资源自动缩减的时间。这有助于通过减少非高峰时段的资源使用量来降低基础设施成本。 在本文中&#xff0c;我们将详细介绍 kube-downscaler 的功能、安装…
阅读更多...
Vue全局事件总线实现任意组件间通信

Vue全局事件总线实现任意组件间通信

一、安装全局事件总线 全局事件总线就像是一个工具&#xff0c;专门用于挂载自定义事件和。 想要所有的组件都能使用这个全局事件总线&#xff0c;就只有在Vue的原型身上添加一个能够绑定自定义事件的属性。 所以我们在创建Vue实例对象的时候就可以添加如下代码&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023