react知识点汇总四--react router 和 redux

news2024/9/23 3:20:23

react-router

React-Router 是一个用于在 React 应用中实现页面导航和路由管理的库。它提供了一种方式来创建单页应用（Single-Page Application，SPA），其中页面的切换是在客户端进行的，而不需要每次跳转都向服务器请求新的页面。

使用 React-Router，你可以定义应用的路由规则，并且根据这些规则渲染不同的组件。你可以将路由映射到特定的URL，当用户在浏览器中访问这些 URL 时，React-Router 将会根据配置的规则找到对应的组件并将其渲染到页面上。

更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。‘

React-Router 提供了一些核心组件，包括 Router、Route、Link 和 Switch。

  1. Router：Router 是整个应用的容器组件，它负责管理应用的路由信息。React-Router 提供了多个不同的 Router 组件，如 BrowserRouter、HashRouter 和 MemoryRouter，你可以根据需要选择适合的 Router 组件。

  2. Route：Route 组件用于定义路由规则和要渲染的组件。你可以通过 path 属性指定匹配的 URL 路径，通过 component 属性指定要渲染的组件。当 URL 匹配到对应的路由规则时，Route 会渲染相应的组件。

  3. Link：Link 组件用于创建导航链接，它会生成一个带有正确 URL 的可点击元素，使用户可以导航到其他路由。使用 Link 组件，可以避免刷新整个页面，而只更新需要变化的部分。

  4. Switch：Switch 组件用于包裹多个路由规则，它只会渲染第一个匹配成功的路由规则对应的组件。这对于避免多个路由同时匹配的情况非常有用，确保只有一个组件被渲染。

除了以上核心组件，React-Router 还提供了其他一些实用的组件和功能，如 Redirect 组件用于重定向到其他路由，嵌套路由用于构建复杂的页面结构，动态路由参数用于处理可变的 URL 参数等等。

以下是一个简单的使用 React-Router 的示例：

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

const App = () => (
  <Router>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </Router>
);

export default App;

在上述示例中，我们使用 BrowserRouter 作为 Router 组件，并定义了三个路由规则：根路径对应 Home 组件，“/about” 对应 About 组件，“/contact” 对应 Contact 组件。导航链接使用 Link 组件来创建，点击链接时，React-Router 会根据规则渲染相应的组件。

这只是 React-Router 的基本用法，它还提供了更多高级功能，如嵌套路由、动态路由、路由参数等，可以根据实际需求进行进一步学习和应用。

React-Router V5 VS React-Router V6

React-Router 是一个流行的用于在 React 应用程序中进行导航和路由管理的库。目前最新版本是 React-Router V6。

React-Router V6 相比于 V5 有一些重要的改进和变化。以下是一些 V6 的主要特点：

  1. 路由声明方式改变: 在 V6 中，路由声明方式发生了重大变化。不再使用 <Route> 组件，而是改为使用 useRoutes() 和 Outlet 组件。这种更加函数式的声明方式使得在组件内部定义路由成为可能。

  2. 动态路由匹配: V6 引入了新的 path-to-regexp 匹配引擎，它可以在运行时动态生成路由匹配规则。这意味着你可以在路由声明中使用变量和占位符，使得路由配置更加灵活和动态。

  3. 路由导航: 在 V6 中，路由导航发生了一些改变。通过 useNavigate 钩子函数，在组件内部可以轻松地进行编程式导航。此外，针对导航的声明式组件（如 <Link>、<NavLink>）也有所变化。

  4. 嵌套路由: V6 改进了嵌套路由的处理方式。现在可以在一个组件中定义子组件的路由，这样可以更好地组织和管理复杂的应用程序结构。

  5. 重定向: V6 引入了 <React.Fragment> 组件，它可以用于在路由配置中定义重定向。这使得管理重定向更加清晰和灵活。

总的来说，React-Router V6 提供了更加灵活、简洁和直观的 API，使开发者能够更好地控制应用程序的导航和路由。然而，由于它与 V5 在很多方面有较大的不兼容性，如果你打算升级你的项目到 V6，请确保仔细阅读官方文档并进行适当的迁移工作。

React-Router 的实现原理是什么？

客户端路由实现的思想：

基于 hash 的路由：通过监听hashchange 事件，感知 hash 的变化改变 hash 可以直接通过 location.hash=xxx

基于 H5 history 路由：

改变 url 可以通过 history.pushState 和 resplaceState 等，会将 URL 压入堆栈，同时能够应用 history.go() 等 API监听 url 的变化可以通过自定义事件触发实现

react-router 实现的思想：

基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知

通过维护的列表，在每次 URL 发生变化的回收，通过配置的 路由路径，匹配到对应的 Component，并且 render

react-router 里的 Link 标签和 a 标签的区别

在 React-Router 中，Link 组件和 <a> 标签都用于创建导航链接，但它们在实际使用中有一些重要的区别。

  1. 路由导航：Link 组件通过 React-Router 提供的路由机制进行导航，而 <a> 标签则是浏览器默认的页面跳转行为。使用 Link 组件时，React-Router 会处理导航请求，只更新需要更新的组件，而不刷新整个页面。这样可以提高性能并保持页面状态。

  2. 嵌套路由：Link 组件在嵌套路由中的表现更好。它会自动处理父级路由和子级路由之间的关系，确保正确匹配和渲染嵌套的路由层次结构。当你使用 <a> 标签时，可能需要手动处理嵌套路由的逻辑。

  3. 阻止默认行为：Link 组件会阻止默认的点击事件行为，从而防止页面刷新。相反，<a> 标签会触发浏览器的默认跳转行为，导致整个页面重新加载。

  4. 活动状态样式：Link 组件可以自动管理活动状态的样式。当链接与当前路由匹配时，Link 组件会自动添加活动状态的类名，使得你可以方便地为活动链接定义样式。而 <a> 标签不提供自动管理活动状态的功能，你需要手动添加类名来表示当前活动的链接。

总结：Link 组件是 React-Router 提供的专门用于导航的组件，它通过 React-Router 的路由机制进行导航，提供更好的性能和用户体验。相较之下，<a> 标签则是普通的 HTML 元素，用于普通网页的跳转。在使用 React-Router 构建导航时，推荐使用 Link 组件来确保正确的导航行为和优化性能。

a 标签默认事件禁掉之后做了什么才实现了跳转?

react-router 声明式路由和编程式路由

在 React Router 中，有两种主要的路由方式：声明式路由和编程式路由。

它们在实现上有一些区别和不同的应用场景。

  1. 声明式路由：

    • 声明式路由是通过配置路由规则来定义路径和组件之间的映射关系。
    • 使用 JSX 或者路由配置对象的形式定义路由规则，使代码更具可读性。
    • 在 React Router v6 中，我们使用 <Routes> 和 <Route> 组件来创建声明式的路由表。
    • 优点：
      • 易于阅读和理解，将路由规则集中于一个地方，方便维护和扩展。
      • 结构清晰，代码组织得当。
    • 示例代码（React Router v6）：
      import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

  2. 编程式路由：

    • 编程式路由是通过 JavaScript 代码来控制路由的跳转和导航。

    • 通过调用路由 API，如 history 对象的方法或钩子函数返回的导航函数，来进行页面的导航。

    • 可以根据业务逻辑和用户操作进行灵活的路由控制和跳转。

    • 优点：

      • 可以根据动态条件触发路由导航，适合处理复杂的路由逻辑。
      • 可以在事件处理程序、条件语句等任意位置触发路由操作。

    • 示例代码（React Router v6）：

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

function MyComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/about');
  }

  return (
    <button onClick={handleClick}>Go to About</button>
  );
}

声明式路由适合静态路由配置，而编程式路由适合根据动态条件进行路由导航和跳转。

在实际应用中，两种方式通常会结合使用，以满足不同的需求。

实例

React-Router V5 实例

React-Router 提供了一种声明式的方式来定义路由表，这使得我们可以清晰地描述页面导航关系。以下是一个使用声明式路由表的示例：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

function App() {
  return (
    <Router>
      <Switch>
        {routes.map(route => (
          <Route
            key={route.path}
            exact
            path={route.path}
            component={route.component}
          />
        ))}
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

在上述示例中，我们首先创建了一个名为 routes 的数组，用于存储每个路径对应的组件信息。每个路由对象都包含 path 和 component 两个属性。

接下来，在 App 组件中，我们使用 <Switch> 组件包裹了多个 <Route> 组件。在 <Switch> 内部，我们通过 routes.map() 方法遍历路由数组，并为每个路由对象创建一个 <Route> 组件。

在每个 <Route> 组件中，我们通过 key 属性给每个路由对象提供唯一的标识符，并使用 exact 精确匹配路径。然后，我们分别传入 path 和 component 属性，将路由路径与对应的组件进行关联。

最后，我们使用 <Route component={NotFound} /> 定义了一个默认的路由，用于匹配无法找到对应组件的情况。

通过这种声明式的方式，我们可以更加清晰地定义整个应用程序的路由表，使代码更易于维护和理解。记得在使用 React-Router 时导入相关组件，并正确配置路由容器（如 BrowserRouter）。

React-Router V6 实例

React-Router V6 的基本用法包括以下几个步骤：

  1. 安装 react-router-dom 库，使用 npm 或 yarn 命令。
  2. 在 React 项目的根文件（index.js）中导入 BrowserRouter 组件，包裹 App 组件。
  3. 在 App 组件中导入 Routes, Route, Link 等组件，创建路由和导航。
  4. 使用嵌套路由、index 路由、通配符等方式来实现复杂的路由功能。
  5. 使用 useParams, useSearchParams, useNavigate 等 hooks 来获取参数和跳转路由。

下面是一个使用 React-Router V6 的示例代码：

首先，确保你已经安装了相关的依赖包 react-router-dom 和 react。

创建一个名为 App.js 的组件，并设置路由规则：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

在 Home.js、About.js 和 NotFound.js 中，你可以编写对应的组件内容，例如：

Home.js:

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

export default Home;

About.js:

function About() {
  return <h1>About Us</h1>;
}

export default About;

NotFound.js:

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

export default NotFound;

在根组件中引入并渲染 App.js 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

以上代码示例中，我们使用 React-Router V6 来设置三个路由：根路径 '/'、关于页面 '/about' 和通配符路径 '*' 用于处理找不到的页面。你可以根据自己的需求添加更多的路由和组件。

React-Router V6 在使用上与 V5 有所不同，例如使用 <Routes> 组件替代之前的 <Switch>，<Route> 组件中的 path 属性改为在元素上直接使用 path 属性。请确保查阅 React-Router V6 的文档以获取更多详细信息和示例。

react router v6 路由表实例（参考）

安装路由并配置路由表

首先，我们先安装路由：npm i react-router-dom --save 或者yarn add react-router-dom --save，现在默认安装的式router6.x

//安装路由
npm i react-router-dom --save 或者
yarn add react-router-dom --save

创建好需要的目录

在routers文件夹下的index.js中配置路由

import { Navigate } from 'react-router-dom'
import Message from '../pages/Message/Message'
import News from '../pages/News/News'
import About from '../pages/About/About'
import Home from '../pages/Home/Home'
import Detail from '../pages/Message/Detail/Detail'
  
export default [
	{
		path: '/about',
		element: <About/>
	},
	{
		path: '/home',														//路径，这里式一级路由，所以在路径前要带上'/'
		element: <Home/>,													//在该路径下需要渲染的元素节点
		children: [		//home下的子路由							//该路径下的子路由
			{
				path: 'message',											//子路由的路径，不需要'/'，如果加了'/'则会覆盖掉前面的路由路径
				element: <Message/>,									//子路由下需要渲染的元素节点
				children: [		//message下的子路由				//子路由的子路由，下面称为孙子路由
					{
						//使用params的方式传参时，需要在path上声明接收参数
						// path: 'detail/:id/:title/:msg',
						path: 'detail',										//孙子路由的路径，一样不需要'/'，否则将会覆盖前面的路由路径
						element: <Detail/>								//孙子路由下需要渲染的元素节点
					}
				]
			},
			{
				path: 'news',
				element: <News/>,
				children: [
					{
						path: 'detail',
						element: <Detail/>
					}
				]
			},
		]
	},
	{
		path: '/',																	//当路径的端口号后面没有地址时就渲染'<Navigate>'
		element: <Navigate to="/about"/>						//只要`<Navigate>`组件被渲染，就会修改路径，切换视图
	}
]

创建一级路由

创建路由页面，在App.js里面写一级路由，并写一个简单的样式

import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routers'		//导入路由表
 
import('./App.css')			//导入APP.js
 
function App () {
	const element = useRoutes(routes)
	return (
		<div>
			<div className="nav">
				<NavLink className='navLink' to="/about">About</NavLink>
				<NavLink className='navLink' to="/home">Home</NavLink>
			</div>
			<div className="main">
				{element}
			</div>
		</div>
	)
}
 
export default App

Redux

对 Redux 的理解，主要解决什么问题

React 是视图层框架。Redux 是一个用来管理数据状态和 UI 状态的JavaScript 应用工具。

随着 JavaScript 单页应用（SPA）开发日趋复杂， JavaScript 需要管理比任何时候都要多的 state（状态），Redux 就是降低管理难度的。（Redux 支持React、Angular、jQuery甚至纯JavaScript）

在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。但React 中 组件间通信的数据流是单向的，顶层组件可以通过 props属性向下层组件传递数据，而下层组件不能向上层组件传递数据，兄弟组件之间同样不能。这样简单的单向数据流支撑起了 React 中的数据可控性。

当项目越来越大的时候，管理数据的事件或回调函数将越来越多，也将越来越不好管理。 管理不断变化的 state 非常困难。如果一个model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等。state 的管理在大项目中相当复杂。

Redux 提供了一个叫 store 的统一仓储库 ，组件通过 dispatch 将state 直接传入 store， 不用通过其他的组件。并且组件通过 subscribe 从 store 获取到 state 的改变。使用了 Redux，所有的组件都可以从 store 中获取到所需的 state，他们也能从 store获取到 state 的改变。这比组件之间互相传递数据清晰明朗的多。

主要解决的问题：

单纯的Redux 只是一个状态机，是没有UI 呈现的 ，react- redux 作用是将Redux 的状态机和React 的UI 呈现绑定在一起，当你dispatch action 改变state 的时候，会自动更新页面。

Redux 状态管理器和变量挂载到 window 中有什么区别

两者都是存储数据以供后期使用。

但是 Redux 状态更改可回溯——Time travel，数据多了的时候可以很清晰的知道改动在哪里发生，完整的提供了一套状态管理模式。

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。

如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性，难道就这么放弃了吗?当然不是。

这里的复杂性很大程度上来自于：我们总是将两个难以理清的概念混淆在一起：变化和异步。 可以称它们为曼妥思和可乐。如果把二者分开，能做的很好，但混到一起，就变得一团糟。一些库如 React 视图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是，React 依旧把处理 state 中数据的问题留给了你。Redux 就是为了帮你解决这个问题。

Redux 和 Vuex 有什么区别，它们的共同思想

（1） Redux 和 Vuex 区别

Vuex 改进了 Redux 中的Action 和Reducer 函数，以 mutations 变化函数取代 Reducer，无需 switch，只需在对应的mutation 函数里改变 state 值即可

Vuex 由于 Vue 自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State 即可

Vuex 数据流的顺序是∶View 调用 store.commit 提交对应的请求到Store 中对应的mutation 函数->store 改变（vue 检测到数据变化自动渲染）

通俗点理解就是，vuex 弱化 dispatch，通过commit 进行 store 状态的一次更变；取消了 action 概念，不必传入特定的 action 形式进行指定变更；弱化 reducer，基于 commit 参数直接对数据进行转变，使得框架更加简易;

（2） 共同思想

单—的数据源

变化可以预测

本质上∶ redux 与 vuex 都是对 mvvm 思想的服务，将数据从视图中抽离的一种方案。

Redux 中间件是怎么拿到 store 和 action? 然后怎么处理?

redux 中间件本质就是一个函数柯里化。

redux applyMiddleware Api源码中每个middleware 接受 2 个参数， Store 的getState 函数和dispatch 函数，分别获得store 和action，最终返回一个函数。

该函数会被传入 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数， 这个函数可以直接调用 next（action），或者在其他需要的时刻调用，甚至根本不去调用它。

调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数，并借此结束调用链。

所以，middleware 的函数签名是（{ getState，dispatch })=> next => action。

扩展：函数柯里化

在 JavaScript 中，函数柯里化是 一种将接收多个参数的函数转换为接收单个参数的函数序列的技术。

函数柯里化可以帮助我们创建更加灵活和可组合的函数。以下是几种实现函数柯里化的方法：

  1. 使用闭包和递归：
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(null, args);
    } else {
      return function (...args2) {
        return curried.apply(null, args.concat(args2));
      };
    }
  };
}

// 示例使用:
function add(x, y, z) {
  return x + y + z;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出 6
console.log(curriedAdd(1, 2)(3)); // 输出 6
console.log(curriedAdd(1)(2, 3)); // 输出 6
console.log(curriedAdd(1, 2, 3)); // 输出 6
  1. 使用 bind 方法：
function add(x, y, z) {
  return x + y + z;
}

const curriedAdd = add.bind(null, 1).bind(null, 2);
console.log(curriedAdd(3)); // 输出 6
  1. 使用箭头函数和递归：
const curry = (fn) => {
  const curried = (...args) =>
    args.length >= fn.length
      ? fn(...args)
      : (...args2) => curried(...args, ...args2);
  return curried;
};

// 示例使用同第一个方法

这些方法都可以实现函数柯里化。你可以根据个人偏好和项目需求选择适合的方法。无论哪种方法，函数柯里化都能让函数更加灵活、可复用和可组合，提供更好的函数编程体验。

参考文档

  • https://blog.csdn.net/weixin_46360938/article/details/126747219

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

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

相关文章

Mac上绿色软件怎么长期保存

Mac上绿色软件怎么长期保存

1、找到想长期保存的绿色软件&#xff0c;右键拷贝 2、来到「应用程序」&#xff0c;点工具栏-操作-粘贴项目 3、这样绿色软件就长期保留下来了
阅读更多...
华纳云：一台香港多IP服务器如何设置多个IP?

华纳云：一台香港多IP服务器如何设置多个IP?

在一台香港多IP服务器上设置多个IP的步骤如下&#xff1a; 1.确认服务器支持多个IP地址&#xff1a;首先&#xff0c;确保你的服务器有多个网卡接口或虚拟网卡接口&#xff0c;以支持多个IP地址。 2.查看当前IP配置&#xff1a;运行以下命令来查看当前的IP配置信息&#xff1a;…
阅读更多...
深度学习——神经网络参数的保存和提取

深度学习——神经网络参数的保存和提取

代码与详细注释&#xff1a; Talk is cheap. Show you the code&#xff01; import torch import matplotlib.pyplot as plt# 造数据 x torch.unsqueeze(torch.linspace(-1, 1, 100), dim1) # x data (tensor), shape(100, 1) y x.pow(2) 0.2*torch.rand(x.size()) # n…
阅读更多...
unity 调用高德SDK

unity 调用高德SDK

unity 2022.2.20f1c1 一、准备工作&#xff1a; 方式一&#xff1a;Unity打包arr 导入AndroidStudio &#xff0c;AndroidStudio打包 方式二&#xff1a;Unity通过MainActivity.java调用SDK &#xff0c;MainActivity.java 放入到Android Studio中编写代码 二、打包环境…
阅读更多...
数字化时代，企业的数据指标体系

数字化时代，企业的数据指标体系

在社会节奏越来越快&#xff0c;处理的信息量越来越大的今天&#xff0c;传统的经营管理模式已经适应不了当下的环境。而由经验、情感组成的业务调整以及决策能力不再能正确指导企业走在正确的方向上&#xff0c;所以数据就成为了企业新的业务优化调整和支撑企业高层管理进行决…
阅读更多...
关于saltstack的监控系统部署

关于saltstack的监控系统部署

环境 master 是centos7-linux 192.14.0.79 minios 是 windows11 192.14.0.207 下载saltstack主节点 sudo yum install salt-master下载saltstack 客户端 windows的minios配置Salt-Minion-3006.1-Py3-AMD64-Setup.exe 过程 master 端 vim /etc/salt/master.d/network.conf…
阅读更多...
如何让一个盒子因为内容不同，而样式也不同呢

如何让一个盒子因为内容不同，而样式也不同呢

例如&#xff0c;每个盒子上面都有一个色块&#xff0c;静态&#xff0c;动态&#xff0c;岗位。如何让不同的内容就有不同的字体颜色和背景呢&#xff1f; 可以给每个盒子重复一样的步骤&#xff0c;但是显然最简单的方法是用一个循环。循环遍历数据&#xff0c;直接写一个盒…
阅读更多...
《Pytorch深度学习和图神经网络(卷 1)》学习笔记——第八章

《Pytorch深度学习和图神经网络(卷 1)》学习笔记——第八章

本书之后的内容与当前需求不符合不再学习 信息熵与概率的计算关系… 联合熵、条件熵、交叉熵、相对熵&#xff08;KL散度&#xff09;、JS散度、互信息 无监督学习 监督训练中&#xff0c;模型能根据预测结果与标签差值来计算损失&#xff0c;并向损失最小的方向进行收敛。无…
阅读更多...
CRYPTO-36D-rsaEZ

CRYPTO-36D-rsaEZ

0x00 前言 CTF 加解密合集&#xff1a;CTF 加解密合集 0x01 题目 给了一个秘钥&#xff0c;三个加密后的文件 0x02 Write Up 先获取n和e # 导入公钥 with open(r"C:\Users\wdd\Downloads\flag\fujian\public.key", "rb") as f:key RSA.import_key(f…
阅读更多...
行业追踪，2023-07-10，汽车零部件如期调整，需要耐心等待第二波

行业追踪，2023-07-10，汽车零部件如期调整，需要耐心等待第二波

自动复盘 2023-07-10 成交额超过 100 亿 排名靠前&#xff0c;macd柱由绿转红 成交量要大于均线 有必要给每个行业加一个上级的归类&#xff0c;这样更能体现主流方向 rps 有时候比较滞后&#xff0c;但不少是欲杨先抑&#xff0c; 应该持续跟踪&#xff0c;等 macd 反转时参与…
阅读更多...
Vue简单使用及整合elementui

Vue简单使用及整合elementui

创建vue工程 在vue工程目录下npm install vue 下载离线vue https://v2.vuejs.org/v2/guide/installation.html 引入工程中 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" c…
阅读更多...
C语言指针进阶

C语言指针进阶

目录 0.指针初阶回顾&#xff1a; 1.字符指针 2.指针数组 3.数组指针 &#xff08;1&#xff09;数组指针的定义&#xff1a; &#xff08;2&#xff09;数组名和&数组名 &#xff08;3&#xff09;数组指针的使用 &#xff08;4&#xff09;数组指针的数组&#x…
阅读更多...
使用均值漂移来量化带宽分类数据

使用均值漂移来量化带宽分类数据

均值漂移概念 均值漂移的基本概念&#xff1a;沿着密度上升方向寻找聚簇点&#xff0c;其计算过程如下&#xff1a; 1 均值漂移算法首先找到一个中心点center&#xff08;随机选择&#xff09;&#xff0c;然后根据半径划分一个范围 把这个范围内的点输入簇x的标记个数加1 2 在…
阅读更多...
GPT和爬虫有什么区别?如何利用爬虫实现GPT功能

GPT和爬虫有什么区别?如何利用爬虫实现GPT功能

GPT&#xff08;Generative Pre-trained Transformer&#xff09;和爬虫是两个完全不同的概念和技术。GPT是一种基于Transformer模型的自然语言处理模型&#xff0c;用于生成文本&#xff0c;而爬虫是一种用于从互联网上收集数据的技术。 GPT是由OpenAI开发的一种深度学习模型&…
阅读更多...
以太网之ARP协议（八）

以太网之ARP协议（八）

一、概要 在网络通信中主要以IP为主机标识进行数据通信的&#xff0c;但实际的数据链路层传输以MAC地址为数据传输的节点地址。那设备之间又是如何通过IP地址确认对应主机的MAC地址的&#xff1f;这就是ARP协议的工作。 ARP是一种以目标IP地址为线索&#xff0c;用来定位下一个…
阅读更多...
300PLC转以太网模块plc300以太网通信模块

300PLC转以太网模块plc300以太网通信模块

摘要 工业通讯的发展已经迅速到了一个令人咋舌的地步&#xff0c;以太网通讯已经成为了工业通讯的主流。而今天&#xff0c;我们要介绍的是一款以太网通讯处理器——捷米特ETH-S7300-JM01&#xff0c;它不仅成熟、稳定&#xff0c;而且价格优惠&#xff0c;为工业以太网通讯领域…
阅读更多...
Qt对地震数据(文件格式*.Segd)实现将时域数据转频域数据

Qt对地震数据(文件格式*.Segd)实现将时域数据转频域数据

文件格式以segd为例&#xff0c;其他地震文件格式同理。 时域数据 时域数据通俗点讲就是我在某个时间段记录的一个值&#xff0c;然后经过一段时间后&#xff0c;产生的一组数据就是时域数据。 频域数据 频域数据是指信号在频率域上的表示&#xff0c;即信号的频率特性。频…
阅读更多...
PowerShell快速ssh

PowerShell快速ssh

文件 ~/.ssh/config 内容 Host masterHostName 192.168.10.154User root访问 $ ssh master 效果 进阶 配置秘钥 待续。。。
阅读更多...
Transform、GameObject、Rigidbody

Transform、GameObject、Rigidbody

文章目录 零、初衷和溯源一、Transform类二、GameObject类三、Rigidbody类 零、初衷和溯源 这三个类的API官方文档&#xff0c;有些杂乱——本可以把它们分门别类的整理好&#xff0c;结果却是凌乱的堆在一起&#xff0c;令人恼火。   之所以把它仨放一起总结&#xff0c;是因…
阅读更多...
【数据挖掘】时间序列教程【十】

【数据挖掘】时间序列教程【十】

5.4 通用卡尔曼滤波 上一节中描述的状态空间模型作为观测方程的更一般的公式 和状态方程 这里是一个p1 向量
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023