黑马React18: Redux

黑马React: Redux

Date: November 19, 2023
Sum: Redux基础、Redux工具、调试、美团案例

Redux介绍

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行

作用：通过集中管理的方式管理应用的状态

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/1.png

为什么要使用Redux？

  1. 独立于组件，无视组件之间的层级关系，简化通信问题
  2. 单项数据流清晰，易于定位bug
  3. 调试工具配套良好，方便调试

Redux快速体验

1. 实现计数器

需求：不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计数器

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/2.png

使用步骤：

  1. 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态）
  2. 使用createStore方法传入 reducer函数 生成一个store实例对象
  3. 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知）
  4. 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据）
  5. 使用store实例的 getState方法 获取最新的状态数据更新到视图中

代码实现：

<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button><script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script><script>// 定义reducer函数// 内部主要的工作是根据不同的action 返回不同的statefunction counterReducer (state = { count: 0 }, action) {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 }case 'DECREMENT':return { count: state.count - 1 }default:return state}}// 使用reducer函数生成store实例const store = Redux.createStore(counterReducer)// 订阅数据变化store.subscribe(() => {console.log(store.getState())document.getElementById('count').innerText = store.getState().count})// 增const inBtn = document.getElementById('increment')inBtn.addEventListener('click', () => {store.dispatch({type: 'INCREMENT'})})// 减const dBtn = document.getElementById('decrement')dBtn.addEventListener('click', () => {store.dispatch({type: 'DECREMENT'})})
</script>

2. Redux数据流架构

Redux的难点是理解它对于数据修改的规则, 下图动态展示了在整个数据的修改中，数据的流向

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/3.png

为了职责清晰，Redux代码被分为三个核心的概念，我们学redux，其实就是学这三个核心概念之间的配合，三个概念分别是:

  1. state: 一个对象 存放着我们管理的数据
  2. action: 一个对象 用来描述你想怎么改数据
  3. reducer: 一个函数 根据action的描述更新state

Redux与React - 环境准备

Redux虽然是一个框架无关可以独立运行的插件，但是社区通常还是把它与React绑定在一起使用，以一个计数器案例体验一下Redux + React 的基础使用

1. 配套工具

在React中使用redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux

  1. Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
  2. react-redux - 用来 链接 Redux 和 React组件 的中间件

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/4.png

2. 配置基础环境

  1. 使用 CRA 快速创建 React 项目
npx create-react-app react-redux
  1. 安装配套工具
npm i @reduxjs/toolkit  react-redux
  1. 启动项目
npm run start

3. store目录结构设计

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/5.png

  1. 通常集中状态管理的部分都会单独创建一个单独的 store 目录
  2. 应用通常会有很多个子store模块，所以创建一个 modules 目录，在内部编写业务分类的子store
  3. store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store

Redux与React - 实现counter

1. 整体路径熟悉

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/6.png

2. 使用 React Toolkit 创建 counterStore

modules/counterStore.js

import { createSlice } from '@reduxjs/toolkit'const counterStore = createSlice({// 模块名称独一无二name: 'counter',// 初始数据initialState: {count: 1},// 修改数据的同步方法 支持直接修改reducers: {increment (state) {state.count++},decrement(state){state.count--}}
})
// 解构出actionCreater
const { increment,decrement } = counterStore.actions// 获取reducer函数
const counterReducer = counterStore.reducer// 导出
export { increment, decrement }
export default counterReducer

store/index.js

import { configureStore } from '@reduxjs/toolkit'import counterReducer from './modules/counterStore'export default configureStore({reducer: {// 注册子模块counter: counterReducer}
})

3. 为React注入store

react-redux负责把Redux和React 链接 起来，内置 Provider组件 通过 store 参数把创建好的store实例注入到应用中，链接正式建立

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 导入store
import store from './store'
// 导入store提供组件Provider
import { Provider } from 'react-redux'ReactDOM.createRoot(document.getElementById('root')).render(// 提供store数据<Provider store={store}><App /></Provider>
)

✅4. React组件使用store中的数据 - useSelector

在React组件中使用store中的数据，需要用到一个钩子函数 - useSelector，它的作用是把store中的数据映射到组件中，使用样例如下：

useSelector作用：把store中的数据映射到组件中

注：上面是组件counterStore，下面是store/index.js. 即根组件

注：上面是组件counterStore，下面是store/index.js. 即根组件

src/App.js

import { useDispatch ,useSelector } from "react-redux"
import { increment, decrement, addToNum } from "./store/modules/counterStore1"function App() {const { count } = useSelector(state => state.counter )const dispatch = useDispatch()return (<div className="App"><button onClick={() => dispatch(decrement())}>-</button>{ count }<button onClick={() => dispatch(increment())}>+</button><button onClick={() => dispatch(addToNum)}>add to 10</button><button onClick={() => dispatch(addToNum)}>add to 20</button></div>)
}export default App

✅5. React组件修改store中的数据 - dispatch

React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的dispatch函数

dispatch作用：在组件中提交action对象，从而修改store中数据

使用样例如下：

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/8.png

✅Redux与React - 提交action传参

需求：组件中有俩个按钮2

add to 10

和

add to 20

可以直接把count值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候传递参数

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/9.png

实现方式：利用action传参实现

1-在reducers的同步修改方法中添加action对象参数

在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上

理解：这边直接理解 addToNum 接受的参数会被传递到 action.payload 即可

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/10.png

总结:

  1. 组件中使用哪个hook函数获取store中的数据？
    useSelector
  2. 组件中使用哪个hook函数获取dispatch方法？
    useDispatch
  3. 如何得到要提交action对象？
    执行store模块中导出的actionCreater方法

Redux与React - 异步action处理

需求理解

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/11.png

实现步骤

  1. 创建store的写法保持不变，配置好同步修改状态的方法

  2. 单独封装一个函数，在函数内部return一个新函数，在新函数中

    2.1 封装异步请求获取数据

    2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交

  3. 组件中dispatch的写法保持不变

Untitled

代码实现 > 测试接口地址： http://geek.itheima.net/v1_0/channels

modules/channelStore.js

import { createSlice } from '@reduxjs/toolkit'
import axios from 'axios'const channelStore = createSlice({name: 'channel',initialState: {channelList: []},reducers: {setChannelList (state, action) {state.channelList = action.payload}}
})// 创建异步
const { setChannelList } = channelStore.actions
const url = 'http://geek.itheima.net/v1_0/channels'
// 封装一个函数 在函数中return一个新函数 在新函数中封装异步
// 得到数据之后通过dispatch函数 触发修改
const fetchChannelList = () => {return async (dispatch) => {const res = await axios.get(url)dispatch(setChannelList(res.data.data.channels))}
}export { fetchChannelList }const channelReducer = channelStore.reducer
export default channelReducer

src/App.js

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchChannelList } from './store/channelStore'function App () {// 使用数据const { channelList } = useSelector(state => state.channel)useEffect(() => {dispatch(fetchChannelList())}, [dispatch])return (<div className="App"><ul>{channelList.map(task => <li key={task.id}>{task.name}</li>)}</ul></div>)
}export default App

Redux-React链路过程

Untitled

Redux调试 - devtools

Redux官方提供了针对于Redux的调试工具，支持实时state信息展示，action提交信息查看等

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/12.png

工具处理:

Untitled

美团小案例

1. 案例演示

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/13.png

基本开发思路：

使用 RTK（Redux Toolkit）来管理应用状态, 组件负责 数据渲染 和 dispatch action

2. 准备并熟悉环境

  1. 克隆项目到本地（内置了基础静态组件和模版）
git clone http://git.itcast.cn/heimaqianduan/redux-meituan.git
  1. 安装所有依赖
npm i
  1. 启动mock服务（内置了json-server）
npm run serve
  1. 启动前端服务
npm run start

3. 分类和商品列表渲染

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/14.png

1- 编写store逻辑

// 编写store
import { createSlice } from "@reduxjs/toolkit"
import axios from "axios"const foodsStore = createSlice({name: 'foods',initialState: {// 商品列表foodsList: []},reducers: {// 更改商品列表setFoodsList (state, action) {state.foodsList = action.payload}}
})// 异步获取部分
const { setFoodsList } = foodsStore.actions
const fetchFoodsList = () => {return async (dispatch) => {// 编写异步逻辑const res = await axios.get('http://localhost:3004/takeaway')// 调用dispatch函数提交actiondispatch(setFoodsList(res.data))}
}export { fetchFoodsList }const reducer = foodsStore.reducerexport default reducer

2- 组件使用store数据

// 省略部分代码
import { useDispatch, useSelector } from 'react-redux'
import { fetchFoodsList } from './store/modules/takeaway'
import { useEffect } from 'react'const App = () => {// 触发action执行// 1. useDispatch -> dispatch 2. actionCreater导入进来 3.useEffectconst dispatch = useDispatch()useEffect(() => {dispatch(fetchFoodsList())}, [dispatch])return (<div className="home">{/* 导航 */}<NavBar />{/* 内容 */}<div className="content-wrap"><div className="content"><Menu /><div className="list-content"><div className="goods-list">{/* 外卖商品列表 */}{foodsList.map(item => {return (<FoodsCategorykey={item.tag}// 列表标题name={item.name}// 列表商品foods={item.foods}/>)})}</div></div></div></div>{/* 购物车 */}<Cart /></div>)
}export default App

4. 点击分类激活交互实现

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/15.png

1- 编写store逻辑

// 编写storeimport { createSlice } from "@reduxjs/toolkit"
import axios from "axios"const foodsStore = createSlice({name: 'foods',initialState: {// 菜单激活下标值activeIndex: 0},reducers: {// 更改activeIndexchangeActiveIndex (state, action) {state.activeIndex = action.payload}}
})// 导出
const { changeActiveIndex } = foodsStore.actionsexport { changeActiveIndex }const reducer = foodsStore.reducerexport default reducer

2- 编写组件逻辑

const Menu = () => {const { foodsList, activeIndex } = useSelector(state => state.foods)const dispatch = useDispatch()const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))return (<nav className="list-menu">{/* 添加active类名会变成激活状态 */}{menus.map((item, index) => {return (<div// 提交action切换激活indexonClick={() => dispatch(changeActiveIndex(index))}key={item.tag}// 动态控制active显示className={classNames('list-menu-item',activeIndex === index && 'active')}>{item.name}</div>)})}</nav>)
}

5. 商品列表切换显示

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/16.png

image.png

 <div className="list-content"><div className="goods-list">{/* 外卖商品列表 */}{foodsList.map((item, index) => {return (activeIndex === index && <FoodsCategorykey={item.tag}// 列表标题name={item.name}// 列表商品foods={item.foods}/>)})}</div>
</div>

6. 添加购物车实现

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/17.png

1- 编写store逻辑

// 编写storeimport { createSlice } from "@reduxjs/toolkit"
import axios from "axios"const foodsStore = createSlice({name: 'foods',reducers: {// 添加购物车addCart (state, action) {// 是否添加过？以action.payload.id去cartList中匹配 匹配到了 添加过const item = state.cartList.find(item => item.id === action.payload.id)if (item) {item.count++} else {state.cartList.push(action.payload)}}}
})// 导出actionCreater
const { addCart } = foodsStore.actionsexport { addCart }const reducer = foodsStore.reducerexport default reducer

关键：

a.判断商品是否添加过

// 是否添加过？以action.payload.id去cartList中匹配 匹配到了 添加过
const item = state.cartList.find(item => item.id === action.payload.id)

2- 编写组件逻辑

<div className="goods-count">{/* 添加商品 */}<spanclassName="plus"onClick={() => dispatch(addCart({id,picture,name,unit,description,food_tag_list,month_saled,like_ratio_desc,price,tag,count}))}></span>
</div>

Bug修复：

修复count增加问题

7. 统计区域实现

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/18.png

image.png

实现思路

  1. 基于store中的cartList的length渲染数量
  2. 基于store中的cartList累加price * count
  3. 购物车cartList的length不为零则高亮
// 计算总价
const totalPrice = cartList.reduce((a, c) => a + c.price * c.count, 0){/* fill 添加fill类名购物车高亮*/}
{/* 购物车数量 */}
<div onClick={onShow} className={classNames('icon', cartList.length > 0 && 'fill')}>{cartList.length > 0 && <div className="cartCornerMark">{cartList.length}</div>}
</div>

拓展：

react中不存在computed计算属性，因为每次数值的变化都会引起组件的重新渲染

8. 购物车列表功能实现

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/19.png

image.png

1-控制列表渲染

const Cart = () => {return (<div className="cartContainer">{/* 添加visible类名 div会显示出来 */}<div className={classNames('cartPanel', 'visible')}>{/* 购物车列表 */}<div className="scrollArea">{cartList.map(item => {return (<div className="cartItem" key={item.id}><img className="shopPic" src={item.picture} alt="" /><div className="main"><div className="skuInfo"><div className="name">{item.name}</div></div><div className="payableAmount"><span className="yuan">¥</span><span className="price">{item.price}</span></div></div><div className="skuBtnWrapper btnGroup">{/* 数量组件 */}<Countcount={item.count}/></div></div>)})}</div></div></div>)
}export default Cart

2- 购物车增减逻辑实现

// count增
increCount (state, action) {// 关键点：找到当前要修改谁的count idconst item = state.cartList.find(item => item.id === action.payload.id)item.count++
},
// count减
decreCount (state, action) {// 关键点：找到当前要修改谁的count idconst item = state.cartList.find(item => item.id === action.payload.id)if (item.count === 0) {return}item.count--
}

<div className="skuBtnWrapper btnGroup">{/* 数量组件 */}<Countcount={item.count}onPlus={() => dispatch(increCount({ id: item.id }))}onMinus={() => dispatch(decreCount({ id: item.id }))}/>
</div>

3-清空购物车实现

// 清除购物车clearCart (state) {  state.cartList = []}

<div className="header"><span className="text">购物车</span><spanclassName="clearCart"onClick={() => dispatch(clearCart())}>清空购物车</span>
</div>

9. 控制购物车显示和隐藏

https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/20.png

image.png

// 控制购物车打开关闭的状态
const [visible, setVisible] = useState(false)const onShow = () => {if (cartList.length > 0) {setVisible(true)}
}{/* 遮罩层 添加visible类名可以显示出来 */}
<divclassName={classNames('cartOverlay', visible && 'visible')}onClick={() => setVisible(false)}
/>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【MySQL】宝塔面板结合内网穿透实现公网远程访问

【MySQL】宝塔面板结合内网穿透实现公网远程访问

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cpo…
阅读更多...
想问问各位大佬，网络安全这个专业普通人学习会有前景吗？

想问问各位大佬，网络安全这个专业普通人学习会有前景吗？

网络安全是一个非常广泛的领域&#xff0c;涉及到许多不同的岗位。这些岗位包括安全服务、安全运维、渗透测试、web安全、安全开发和安全售前等。每个岗位都有自己的要求和特点&#xff0c;您可以根据自己的兴趣和能力来选择最适合您的岗位。 渗透测试/Web安全工程师主要负责模…
阅读更多...
STM32：基本定时器原理和定时程序

STM32：基本定时器原理和定时程序

一、初识定时器TIM 定时器就是计数器&#xff0c;定时器的作用就是设置一个时间&#xff0c;然后时间到后就会通过中断等方式通知STM32执行某些程序。定时器除了可以实现普通的定时功能&#xff0c;还可以实现捕获脉冲宽度&#xff0c;计算PWM占空比&#xff0c;输出PWM波形&am…
阅读更多...
Android开发从0开始（服务）

Android开发从0开始（服务）

Android后台运行的解决方案&#xff0c;不需要交互&#xff0c;长期运行。 服务基础框架&#xff1a; public class MyService extends Service { public MyService() { } Override public IBinder onBind(Intent intent) { //activity与service交互&#xff08;需要继…
阅读更多...
解决：javax.websocket.server.ServerContainer not available 报错问题

解决：javax.websocket.server.ServerContainer not available 报错问题

原因&#xff1a; 用于扫描带有 ServerEndpoint 的注解成为 websocket&#xff0c;该方法是 服务器端点出口&#xff0c;当进行 SpringBoot 单元测试时&#xff0c;并没有启动服务器&#xff0c;所以当加载到这个bean时会报错。 解决方法&#xff1a; 加上这个注解内容 Spr…
阅读更多...
C语言数组的距离（ZZULIOJ1200:数组的距离）

C语言数组的距离（ZZULIOJ1200:数组的距离）

题目描述 已知元素从小到大排列的两个数组x[]和y[]&#xff0c; 请写出一个程序算出两个数组彼此之间差的绝对值中最小的一个&#xff0c;这叫做数组的距离 。 输入&#xff1a;第一行为两个整数m, n(1≤m, n≤1000)&#xff0c;分别代表数组f[], g[]的长度。第二行有m个元素&a…
阅读更多...
鸿蒙(HarmonyOS)应用开发——安装DevEco Studio安装

鸿蒙(HarmonyOS)应用开发——安装DevEco Studio安装

前言 HarmonyOS华为开发的操作系统&#xff0c;旨在为多种设备提供统一的体验。它采用了分布式架构&#xff0c;可以在多个设备上同时运行&#xff0c;提供更加流畅的连接和互动。HarmonyOS的目标是提供更高的安全性、更高效、响应更快的用户体验&#xff0c;并通过跨设备功能…
阅读更多...
行业案例：如何打造高效内容团队

行业案例：如何打造高效内容团队

内容团队如何适应当下热点高频更新的时代&#xff1f;Zoho Projects项目管理软件能为内容团队带来什么&#xff1f;本文以真实用户案例为您详细解答&#xff01; 背景介绍&#xff1a; 该漫画团队已有十余年的奋斗历史&#xff0c;以原创漫画和绘本内容创作为主&#xff0c;出…
阅读更多...
拼多多平台全面API接口对接

拼多多平台全面API接口对接

对接流程&#xff08;支持虚拟商品&#xff09; 拼多多与商家之间数据双向请求&#xff0c;同步更新及相关数据传输。对接主要分为三大部分&#xff1a;准备阶段、对接测试、上线使用&#xff1b;针对每部分具体说明如下&#xff1a; 接口连通性测试重点关注两类接口的连通性&a…
阅读更多...
一文带你快速了解Python史上最快Web框架

一文带你快速了解Python史上最快Web框架

文章目录 1. 写在前面2. Sanic框架简介2.1 背景2.2 特征与优势 3. Sanic框架实战3.1. 安装Sanic3.2. Demo案例编写 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&a…
阅读更多...
【Azure 架构师学习笔记】-Azure Storage Account（7）- 权限控制

【Azure 架构师学习笔记】-Azure Storage Account（7）- 权限控制

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account&#xff08;6&#xff09;- File Layer 前言 存储帐户作为其中一个数据终端存储&#xff0c;对安全性的要求非常高&#xff0c;不管…
阅读更多...
手写数字可视化_Python数据分析与可视化

手写数字可视化_Python数据分析与可视化

手写数字可视化 手写数字流形学习 手写数字 手写数字无论是在数据可视化还是深度学习都是一个比较实用的案例。 数据在sklearn中&#xff0c;包含近2000份8 x 8的手写数字缩略图。 首先需要先下载数据&#xff0c;然后使用plt.imshow()对一些图形进行可视化&#xff1a; 打开c…
阅读更多...
外贸自建站服务器怎么选？网站搭建的工具？

外贸自建站服务器怎么选？网站搭建的工具？

外贸自建站服务器用哪个好&#xff1f;如何选海洋建站的服务器&#xff1f; 外贸自建站是企业拓展海外市场的重要手段之一。而在这个过程中&#xff0c;选择一个适合的服务器对于网站的稳定运行和优化至关重要。海洋建站将为您介绍如何选择适合的外贸自建站服务器。 外贸自建…
阅读更多...
优化记录 -- 记一次搜索引擎（SOLR）优化

优化记录 -- 记一次搜索引擎（SOLR）优化

业务场景 某服务根据用户相关信息&#xff0c;使用搜索引擎进行数据检索 软件配置 solr 1台&#xff1a;32c 64g 数据10gb左右&#xff0c;版本 7.5.5 应用服务器1台&#xff1a;16c 64g 应用程序 3节点 问题产生现象 1、因业务系统因处理能不足&#xff0c;对业务系统硬件…
阅读更多...
idea修改行号颜色

idea修改行号颜色

前言 i当idea用了深色主题后&#xff0c;发现行号根本看不清&#xff0c;或者很模糊 例如下面这样 修改行号颜色 在IntelliJ IDEA中&#xff0c;你可以根据自己的喜好和需求定制行号的颜色。下面是修改行号颜色的步骤&#xff1a; 打开 IntelliJ IDEA。 转到 “File”&…
阅读更多...
010 OpenCV中的4种平滑滤波

010 OpenCV中的4种平滑滤波

目录 一、环境 二、平滑滤波 2.1、均值滤波 2.2、高斯滤波 2.3、中值滤波 2.4、双边滤波 三、完整代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、平滑滤波 2.1、均值滤波 在OpenCV库中&#xff0c;blur函数是一种简…
阅读更多...
【Docker】从零开始：9.Docker命令:Push推送仓库（Docker Hub，阿里云）

【Docker】从零开始：9.Docker命令:Push推送仓库（Docker Hub，阿里云）

【Docker】从零开始&#xff1a;9.Docker命令:Push推送仓库 知识点1.Docker Push有什么作用&#xff1f;2.Docker仓库有哪几种2.1 公有仓库2.2 第三方仓库2.3 私有仓库2.4 搭建私有仓库的方法有哪几种 3.Docker公有仓库与私有仓库的优缺点对比 Docker Push 命令标准语法操作参数…
阅读更多...
中国毫米波雷达产业分析2——毫米波雷达产业链分析

中国毫米波雷达产业分析2——毫米波雷达产业链分析

一、产业链构成 毫米波雷达产业链分为三部分&#xff1a;上游主要包括射频前端组件&#xff08;MMIC&#xff09;、数字信号处理器&#xff08;DSP/FPGA&#xff09;、高频PCB板、微控制器&#xff08;MCU&#xff09;、天线及控制电路等硬件供应商&#xff1b;中游主体是毫米波…
阅读更多...
使用Python实现几种底层技术的数据结构

使用Python实现几种底层技术的数据结构

使用Python实现几种底层技术的数据结构 数据结构(data structure)是带有结构特性的数据元素的集合&#xff0c;它研究的是数据的逻辑结构和数据的物理结构以及它们之间的相互关系&#xff0c;并对这种结构定义相适应的运算&#xff0c;设计出相应的算法&#xff0c;并确保经过这…
阅读更多...
项目中常用的 19 条 SQL 优化宝典

项目中常用的 19 条 SQL 优化宝典

一、EXPLAIN 做MySQL优化，我们要善用 EXPLAIN 查看SQL执行计划。 下面来个简单的示例，标注(1,2,3,4,5)我们要重点关注的数据 type列，连接类型。一个好的sql语句至少要达到range级别。杜绝出现all级别 key列，使用到的索引名。如果没有选择索引，值是NULL。可以采取强制索引…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023