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

5.6 react组件化开发基础

news 来源：原创 2025/8/22 4:59:08

react 组件开发基础

  • 组件分类与组件使用

  • 组件传参

    • 父传子 【函数数据传值 实参 形参对应关系】

    • 子传父

    • 插槽

    • 透传 useContext 上下文（作用域）

    • 跨层级调用方法 通过子组件的实例对象useRef 直接调用子组件的方法 和数据

  • 状态管理（非常多） useReducer

    • redux

    • redux-toolkit 最佳实践

    • mobx

    • dva

  • 路由 react-router-dom

    • 配置式 路由 router.jsx

    • 将路由的代码 直接写入到 父组件里面

  • UI 库 ：antd 管理系统 antd mobile 移动端 app nutUi+taro 小程序

1.组件分类与组件使用

组件分类：

​ 页面级组件

​ 业务组件

​ 公共组件

组件使用步骤： 1创 2导 3使用 4传值、

组件名： 必须使用大驼峰

  • 父组件

  ​import React from 'react'// 导入import AppHeader from '@/components/appHeader/AppHeader'export default function App() {return (<><AppHeader/><AppHeader> </AppHeader></>)}​

  • 子组件

  import React from 'react'import './index.less'export default function AppHeader() {return (<div>AppHeader</div>)}​

2.组件通信【单向数据流】

1.父传子 子传父

react 的组件就是一个普通函数

父传子

组件使用： 父函数 调用 子函数

父组件 写入实参

子组件 通过形参接受数据

  • 父组件

父组件 写入实参： 通过 静态属性 或动态属性 传递

  import Child from '@/components/child/Child'​export default ()=>{return (<Child title="我是爸爸传递的数据" num={1000}   obj={name="张麻子"}> </Child>)}​​

  • 子组件

子组件通过形参 props 全部一次性接收父组件传递的数据

  export default (props)=>{let {num,title,obj} = props;if(typeof num !='Number'){return 'num的数据格式错误'}if(Object.prototype.toString.call(obj) !='[object Object]'){return 'obj数据格式错误！'}return (<><div>我是儿子组件</div>{props.num}{obj.name}</>)}

2.子传父

将父组件的方法 传递给子组件

子组件调用这个方法 直接修改父组件的数据

  • 父组件

  import Child from '@/components/child/Child'​export default ()=>{const [num,setNum] = useState(1000)const changeNum=(newNum)=>{setNum(newNum)}return (<Child title="我是爸爸传递的数据" num={num} changeNum={changeNum}   obj={name="张麻子"}> </Child>)}

  • 子组件

  ​export default (props)=>{const {num,title,obj,changeNum} = props;return (<><div>我是儿子组件</div>{props.num}{obj.name}  ​<button οnclick={()=>changeNum(num+1) > +++</button></>)

3.插槽

父组件 将 html 代码 传递给子组件

父组件 传递给子组件的html代码 全部会自动的 放到 props.children

props.children 值

如果父组件没有传递html代码 ，children 的值 是 undefined

如果父组件只传递了 一行html代码 ，children 的值 就是一个对象（描述传递过来的html jsx ）

如果父组件传递了 多行html代码，children的值 就是 一个数组（包含多个对象）

  • 父组件

  <h1>我是爸爸组件的html代码</h1><hr /><Son ><div>我是爸爸组件传递给儿子组件的 html代码</div><table><thead><tr><th>姓名</th><th>年龄</th><th>成绩</th></tr></thead><tbody><tr><td>嘻嘻嘻</td><td>22</td><td>88</td></tr></tbody></table></Son>

  • 子组件

  import React from 'react'​export default function Son(props) {const {children} = propsreturn (<>      {children[1]}<h1>我是儿子组件自己的html代码</h1>{children[0]}</>)}​

4.透传 useContext createContext 上下文（作用域）

爷爷组件 可以直接传递数据 给孙子组件

跨层级 不限制

vue2 $bus eventBus 中央事件总线

  • 爷爷组件

商品信息 传递 --商品列表 Goods.jsx

  import {createContext,useState} from 'react'import Info from '@/components/info/Info'//在顶级组件 暴露之前必须定义好 上下文export const GoodsContext = createContext(null);​export default  ()=>{const [goodsInfo,setGoodsInfo] = useState({id:1122,title:'华为收集 mate6',price:5000})const changeGoodsInfo = ()=>{let goods = {...goodsInfo}goods.price++setGoodsInfo(goods)}return (<><GoodsContext.Provider value={goodsInfo}><Info /></GoodsContext.Provider>​<button onClick={changeGoodsInfo}>+</button></>)}​

  • 爸爸组件 Info.jsx

商品详情组件

  import Order from '@/components/order/Order'export default ()=>{return (<><div>爸爸组件自己的内容</div><Order /></>)}

  • 孙子组件 Order.jsx

下单组件

  import {useContext} from 'react'import {GoodsContext} from '@/App2'export default ()=>{const goodsInfo =  useContext(GoodsContext)return (<><div> 价格：{goodsInfo.price} </div></>)}

5.子组件的实例对象useRef useImperativeHandle

父组件 需要拿子组件的数据

  • 父组件

  import Son1 from '@/components/son1/Son1'import {useRef,useEffect} from 'react'export default ()=>{const sonRef = useRef(null);useEffect(()=>{let res =  sonRef.current.getData()console.log(res);},[])return (<><div >爸爸组件自己的内容</div><Son1 ref={sonRef} /></>)}

  • 子组件

useImperativeHandle ： 通过hoos 将子组件 想要暴露给 父组件的 方法和数据 暴露出去

  import {useState,useImperativeHandle} from 'react'​export default ({ref})=>{const [num,setNum] = useState(100)const getData = ()=>{return '我是子组件的方法，获取数据的方法'}const changeNum = ()=>{setNum(num+1)}//  需要子组件通脱useImperativeHandle(ref,()=>{return {num,getData,} })​return (<><div> 价格：{num} </div><button onClick={changeNum}>+ </button></>)}

  • localStorage sessionStorage

6.路由 react-router v7

react 19 ===router v7

react16.8--react 18 ====router v6

react13-react16.8 ===reouterv5

1.创 2配 router.jsx 3.占位 4.测试

  • 安装

  pnpm install react-router

  • 创建页面

  • router/index.jsx

  import {createBrowserRouter} from "react-router";import Home from '@/pages/home/Home'import Coding from '@/pages/coding/Coding'import Pins from '@/pages/pins/Pins'import Course from '@/pages/course/Course'import App from '@/App.jsx'import Following from '@/pages/following/Following'import Frontend from "@/pages/frontend/Frontend";const router = createBrowserRouter([{path:'/',Component:App,children:[{Component:Home,children:[{index:true,Component:Following},{path:'frontend',Component:Frontend},]},{path: "coding",Component:Coding},{path: "pins",Component:Pins},{path: "course",Component:Course}]}]);​export default router

  • main.jsx

  ​import { createRoot } from 'react-dom/client'import './index.css'​import { RouterProvider} from "react-router";import router from './router'​createRoot(document.getElementById('root')).render(<RouterProvider router={router}> </RouterProvider>)​

  • 占位

App.jsx 给所有一级路由占位

  import React from 'react'import { Outlet } from 'react-router'export default function App() {return (<><div>我是顶部</div><Outlet/></>​)}​

Home.jsx 给 home子页面占位

  import React from 'react'import { Outlet } from 'react-router'export default function Home() {return (<><div className="left">左侧菜单</div><div className="content"><Outlet></Outlet></div><div className="toplist">排行榜</div></>)}​

相关文章：

5.6 react组件化开发基础

react 组件开发基础 组件分类与组件使用 组件传参 父传子 【函数数据传值 实参 形参对应关系】 子传父 插槽 透传 useContext 上下文&#xff08;作用域&#xff09; 跨层级调用方法 通过子组件的实例对象useRef 直接调用子组件的方法 和数据 状态管理&#xff08;非常多…...

编程日记 2025/8/22 4:59:08

react-14defaultValue（仅在首次渲染时生效）和value（受 React 状态控制）

在 React 中&#xff0c;defaultChecked/checked 和 defaultValue/value 是用于处理表单元素初始值和受控值的属性对。区别在于表单元素是否受 React 组件状态控制。 1. defaultValue 作用&#xff1a;设置表单元素的初始值&#xff08;仅在首次渲染时生效&#xff09;。特点…...

编程日记 2025/8/22 4:57:06

HarmonyOS 5.0 低时延音视频开发​​

大家好&#xff0c;我是 V 哥。 在HarmonyOS 5.0的开发中&#xff0c;支持低时延音视频开发&#xff0c;为了确保语法正确&#xff0c; V 哥以下代码符合HarmonyOS NEXT API 14的规范。为了方便初学者更好入门&#xff0c;V 哥伙同2位小伙伴花了1年时间&#xff0c;搞了三本鸿蒙…...

编程日记 2025/8/21 14:47:22

视频智能分析网关助力小区/住宅/街道智慧社区管理服务全面升级

一、引言​ 随着信息技术的飞速发展&#xff0c;智慧社区建设已成为提升居民生活质量、优化社区管理的重要趋势。智能分析网关作为智慧社区的核心技术支撑之一&#xff0c;凭借其强大的数据处理和智能分析能力&#xff0c;在社区的安防监控、人员车辆管理、环境卫生检测等多个…...

编程日记 2025/8/22 4:50:54

ShardingJdbc-水平分表

ShardingJdbc-水平分表 水平分表 表结构相同表数据记录不同多张分表记录数和才是总的记录数通常根据主键ID进行分表&#xff0c;这里采用奇偶策略 案例 建立库 sharding-demo建立表 user_1、user_2 表结构相同id 为主键&#xff0c;bigint 类型分表规则 id 为偶数的记录存储…...

编程日记 2025/8/21 22:36:54

AI应用爆发或将进入临界点

在科技发展的长河中，总有一些时刻如惊雷般震撼世界，预示着新时代的到来。如今，AI应用似乎正站在这样一个关键节点上，一场前所未有的变革风暴或许即将席卷而来，AI应用的爆发或将进入临界点。 当我们回顾科技发展的历程，不难发现每一次重大的技术突破都曾引发社会的巨大变…...

编程日记 2025/8/19 11:02:17

Javase 基础加强 —— 05 Map集合

本系列为笔者学习Javase的课堂笔记&#xff0c;视频资源为B站黑马程序员出品的《黑马程序员JavaAI智能辅助编程全套视频教程&#xff0c;java零基础入门到大牛一套通关》&#xff0c;章节分布参考视频教程&#xff0c;为同样学习Javase系列课程的同学们提供参考。 01 概述 Ma…...

编程日记 2025/8/21 9:23:19

LINUX——例行性工作

单一执行的例行性工作 仅处理一次的工作&#xff0c;可用于在特定时间执行工作 at命令的工作过程&#xff1a; at命令使用时的权限控制&#xff1a;通过两个文件/etc/at.allow和/etc/at.deny来控制哪些用户可以使用at命令。如果这两个文件都不存在&#xff0c;那么只有root用户…...

编程日记 2025/8/19 18:07:49

天线测试报告解读学习

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、无源测试和有源测试二、无源测试报告1.驻波2.回损3.史密斯圆图4.效率5.增益6.天线方向图7.天线隔离度8.无源测试总结 三、有源测试报告1.TRP与TIS2.测试指标…...

编程日记 2025/8/19 19:19:07

Kotlin Android开发过渡指南

为了帮助Java开发者顺利过渡到Kotlin进行Android开发，以下是一本指南的详细大纲设计，涵盖关键知识点、迁移策略和实践案例： 《Kotlin for Android开发：从Java到Kotlin的平滑过渡指南》大纲 第一部分：为什么选择Kotlin？ Kotlin的优势 简洁性、安全性、与Java的互操作性Go…...

编程日记 2025/8/19 19:19:05

Hadoop架构再探讨

文章目录 1.Hadoop的优化与发展1.1Hadoop的局限与不足1.2针对Hadoop的改进与提升 2.HDFS2.0新特性2.1HDFS HA1.HDFS 1.0 组件及功能回顾​2. HDFS 1.0 的单点故障问题​3. HDFS HA&#xff08;高可用&#xff09;解决方案​ 2.2HDFS Federation1.HDFS1.0中存在的问题2.HDFS Fed…...

编程日记 2025/8/19 19:19:02

ffmpeg录音测试

ffmpeg ffmpeg 是一个强大的多媒体处理工具&#xff0c;可以用于录音、音频处理、视频录制等多种功能。以下是使用 ffmpeg 进行录音的详细指令和参数说明。 基本录音指令 以下是一个简单的 ffmpeg 录音命令&#xff0c;将音频录制为 WAV 格式文件&#xff1a; ffmpeg -f …...

编程日记 2025/8/19 19:19:00

Kotlin-解构声明

我们在使用对象时可能需要访问它们内部的一些属性: class Student(var name: String, var age: Int) fun main() {val student Student("小明", 18)println(student.name)println(student.age) }这样看起来不太优雅,我们可以像下面这样编写: class Student(var na…...

编程日记 2025/8/21 8:07:46

【MCP Node.js SDK 全栈进阶指南】专家篇（2）：MCP多模型支持架构

引言 在实际应用中，单一模型往往难以满足所有业务需求，这就需要一种灵活的架构来支持多模型集成和智能调度。Model Context Protocol (MCP) 作为连接应用与AI模型的标准协议，为多模型支持提供了理想的基础架构。 本文作将深入探讨如何基于MCP构建多模型支持架构，包括多LL…...

编程日记 2025/8/21 9:22:58

使用阿里AI的API接口实现图片内容提取功能

参考链接地址&#xff1a;如何使用Qwen-VL模型_大模型服务平台百炼(Model Studio)-阿里云帮助中心 在windows下&#xff0c;使用python语言测试&#xff0c;版本&#xff1a;Python 3.8.9 一. 使用QVQ模型解决图片数学难题 import os import base64 import requests# base 64 …...

编程日记 2025/8/21 20:55:06

mapbox基础，加载Fog云雾效果

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️fog 云雾 api1.3.1 ☘️配置项二、🍀…...

编程日记 2025/8/19 19:18:52

数据可视化与分析

数据可视化的目的是为了数据分析&#xff0c;而非仅仅是数据的图形化展示。 项目介绍 项目案例为电商双11美妆数据分析&#xff0c;分析品牌销售量、性价比等。 数据集包括更新日期、ID、title、品牌名、克数容量、价格、销售数量、评论数量、店名等信息。 1、数据初步了解…...

编程日记 2025/8/20 20:21:05

git的push.default配置详解

Git的push.default配置用于定义执行git push时未指定远程和分支的默认行为。以下是各选项的详解及使用场景&#xff1a; 1. simple&#xff08;默认值&#xff0c;Git ≥2.0&#xff09; 行为&#xff1a;仅推送当前分支到与其关联的上游分支&#xff08;即remote-tracked分支…...

编程日记 2025/8/19 19:18:47

高频电流探头：通信测试中的隐形守护者

在5G基站调试现场&#xff0c;工程师李工正手持一个火柴盒大小的装置贴近电路板&#xff0c;示波器屏幕上瞬间显示出精确的电流波形——这个看似普通的场景&#xff0c;背后折射出高频电流探头在通信测试中的关键作用。随着通信技术迈入毫米波时代&#xff0c;这类精密测试工具…...

编程日记 2025/8/19 19:18:45

淘宝拍立淘 API 接口探秘：如何通过图片挖掘海量商品信息

在互联网技术飞速发展的当下&#xff0c;传统的文字搜索商品方式已无法完全满足用户日益增长的个性化需求。基于图像识别技术的以图搜物模式应运而生&#xff0c;成为电商行业的新宠。淘宝拍立淘 API 接口作为这一技术的重要载体&#xff0c;能够帮助开发者和企业通过一张图片&…...

编程日记 2025/8/19 19:18:43

第二章：langchain文本向量化（embed）搭建与详细教程-本地服务方式（下）

文章目录 前言一、本地构建模型与服务端搭建代码1、完整代码2、结果示例 二、基于flask服务端构建langchain调用的向量方法代码1、完整代码2、结果示例 总结 前言 在上篇文章介绍了langchain源码embed方法与基于api key方式构建向量模型。然而&#xff0c;某些情况&#xff0c…...

编程日记 2025/8/19 19:18:41

飞牛云如何开启及使用ssh:小白用户上手指南-家庭云计算专家

最近很多用户希望提供飞牛云下的可道云onlyoffice的安装服务,但是很多都是萌新小白,不知道怎么启用ssh和使用ssh客户端.这里提供简单的方法,统一答复: 重要的事情说3遍:一定不要自己发挥,全部按说明的来;一定要在内网环境用内网ip访问;不要用域名和端口号,谢谢各位萌新了!!! 一…...

编程日记 2025/8/19 19:18:38

12.模方ModelFun工具-立面修整

摘要&#xff1a;本文主要介绍模方ModelFun修模工具——立面修整的操作方法。 点击工具栏即可找到立面修整工具&#xff0c;点击可打开并使用该工具&#xff0c;如下图&#xff1a; 图 工具菜单栏 &#xff08;1&#xff09;截面绘制&#xff1a; 快速绘制竖直矩形&#xff1…...

编程日记 2025/8/19 19:18:36

消失的两个数字 --- 位运算

目录 一&#xff1a;题目 二&#xff1a;算法原理 三&#xff1a;代码实现 一&#xff1a;题目 题目链接&#xff1a;面试题 17.19. 消失的两个数字 - 力扣&#xff08;LeetCode&#xff09; 二&#xff1a;算法原理 只出现一次的数字III&#xff1a;常见位运算总结-CSDN…...

编程日记 2025/8/19 6:15:01

centos的根目录占了大量空间怎么办

问题 当根目录磁盘不够时&#xff0c;就必须删除无用的文件了 上面的&#xff0c;如果删除/usr 或/var是可以释放出系统盘的 定位占空间大的文件 经过命令&#xff0c;一层层查哪些是占磁盘的。 du -sh /* | sort -rh | head -n 10 最终排查&#xff0c;是有个系统日志占了20…...

编程日记 2025/8/19 19:18:31

Protobuf的速成之旅

注意事项:本文使用Linux下的Ubuntu C/C 一.Protobuf的安装 在安装Protobuf前需要先安装protobuf的依赖库 sudo apt-get install autoconf automake libtool curl make g unzip -y Protobuf的安装链接:https://github.com/protocolbuffers/protobuf/releases 这里根据自己的环…...

编程日记 2025/8/19 19:18:29

使用 Python 监控系统资源

使用 Python 监控系统资源 在开发分布式系统或性能敏感的应用时&#xff0c;实时监控系统资源&#xff08;如 CPU、内存、磁盘、网络和 GPU 使用率&#xff09;至关重要。本文介绍一个基于 Python 的 SystemMonitor 类&#xff0c;它以单例模式持续采集系统资源信息&#xff0…...

编程日记 2025/8/19 19:18:27

【Qt4】Qt4中实现PDF预览

方案一&#xff1a; 在Qt4中预览PDF文件&#xff0c;你可以使用多种方法&#xff0c;但最常见和简单的方法之一是使用第三方库。Qt本身并没有内置直接支持PDF预览的功能&#xff0c;但你可以通过集成如Poppler、MuPDF等库来实现这一功能。下面我将展示如何使用Poppler库在Qt4中…...

编程日记 2025/8/21 15:28:26

从试错到智能决策：Python与强化学习优化自动驾驶策略

从试错到智能决策：Python与强化学习优化自动驾驶策略 一、引言：自动驾驶如何更聪明？ 自动驾驶技术的发展，已经从简单的感知与规则控制，迈向更加智能化的强化学习（Reinforcement Learning，RL）决策优化时代。过去，自动驾驶更多依赖 传统算法（如A、Dijkstra路径规划）…...

编程日记 2025/8/19 2:42:10

【免费下载】全国范围的城市用地类型数据

该数据以路网及水系切分得到的交通小区为最小地块&#xff0c;并基于卫星影像、夜间灯光数据、POI数据、手机信令数据对地块进行分类。 需要这份数据&#xff0c;请在文末查看下载方法。 一、数据介绍 该数据的用地类型可分为居住用地、商务办公用地、商业服务用地、工业用地…...

编程日记 2025/8/19 20:49:17

小程序问题(记录版)

1、样式不生效 在h5上生效 但是 小程序上没反应 解决办法&#xff1a;解除组件样式隔离 1、isolated 表示启用样式隔离&#xff0c;在自定义组件内外&#xff0c;使用 class 指定的样式将不会相互影响&#xff08;一般情况下的默认值&#xff09; 2、apply-shared 表示页面 wxs…...

编程日记 2025/8/21 20:38:26

STL之stackqueue

stack的介绍&#xff08;可以想象成栈&#xff09; 1.stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作 2.stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特点类封装作为其…...

编程日记 2025/8/19 19:18:20

学习海康VisionMaster之间距检测

一&#xff1a;进一步学习了 今天学习下VisionMaster中的间距检测工具&#xff1a;主要类似于卡尺工具&#xff0c;测量物体的长度或者宽度或者间距 二&#xff1a;开始学习 1&#xff1a;什么是间距检测&#xff1f; 间距测量模块用于检测两特征边缘之间的间距&#xff0c;首…...

编程日记 2025/8/19 19:18:18

【SpringBoot教程】SpringBoot自定义注解与AOP实现切面日志

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 文章目录 1.前言2.SpringAOP实现切面日志快速入门1.1 创建SpringBoot项目1.2 依赖配置pom.xml1.3 自定义日志注解1.4 配置 AOP 切面1.5 怎么使用呢&#xff1f;1.6 实…...

编程日记 2025/8/19 9:15:18

C++学习之路，从0到精通的征途：stack_queue的模拟实现及deque原理介绍

目录 一.容器适配器 1.什么是适配器 2.STL标准库中stack和queue的底层结构 3.deque的原理介绍 deque是如何借助其迭代器维护其假想连续的结构呢&#xff1f; 头插 尾插 遍历 4.deque的优缺点 二.stack的模拟实现 三.queue的模拟实现 一.容器适配器 1.什么是适配…...

编程日记 2025/8/19 19:18:16

文件上传漏洞篇：upload-labs靶场搭建

一、文件上传漏洞简述 文件上传漏洞是一种常见的Web安全漏洞&#xff0c;当网站或应用程序允许用户上传文件&#xff08;如图片、文档等&#xff09;时&#xff0c;若未对上传的文件进行充分的安全检查&#xff0c;攻击者可能利用此漏洞上传恶意文件&#xff08;如Web Shell、…...

编程日记 2025/8/21 22:36:49

TikTok 矩阵账号运营实操细节：打造爆款矩阵

在 TikTok 的流量版图里&#xff0c;打造 TikTok 矩阵账号能显著提升影响力与吸粉能力。而借助 AI 工具&#xff0c;更可为 TikTok 矩阵运营效率的提升赋能&#xff0c;让运营如虎添翼。下面就为大家详细讲讲其中的实操细节&#xff0c;并结合一些伪代码示例辅助理解。 一、矩…...

编程日记 2025/8/19 19:18:11

Nginx安全防护与HTTPS部署实战

一.核心安全配置 1.编译安装Nginx &#xff08;1&#xff09;安装支持软件 Nginx的配置及运行需要pcre、zlib等软件包的支持&#xff0c;因此应预先安装这些软件的开发包&#xff08;devel&#xff09;&#xff0c;以便提供相应的库和头文件&#xff0c;确保Nginx的安装顺利…...

编程日记 2025/8/19 15:22:08

【C语言】初阶数据结构相关习题（一）

&#x1f386;个人主页&#xff1a;夜晚中的人海 今日语录&#xff1a;人的生命似洪水在奔流&#xff0c;不遇着岛屿、暗礁&#xff0c;难以激起美丽的浪花。——奥斯特洛夫斯基 文章目录 ⭐一、判定是否互为字符重排&#x1f389;二、 回文排列&#x1f680;三、字符串压缩&am…...

编程日记 2025/8/19 19:18:07

MySQL从入门到精通（一）：MySQL介绍及数据库相关概念

目录 一、MySQL 介绍 二、数据库相关概念 &#xff08;一&#xff09;数据库基础知识 &#xff08;二&#xff09;主流的关系型数据库管理系统 三、关系型数据库与非关系型数据库 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;数据模型对比 &#xff08;…...

编程日记 2025/8/19 19:18:05

宁德时代区块链+数字孪生专利解析：去中心化身份认证重构产业安全底座

引言&#xff1a;当动力电池巨头瞄准数字孪生安全 2025年5月6日&#xff0c;金融界披露宁德时代未来能源&#xff08;上海&#xff09;研究院与母公司宁德时代新能源科技股份有限公司联合申请的一项关键专利——“身份验证方法、系统、电子设备及存储介质”。这项技术将区块链…...

编程日记 2025/8/19 20:49:15

Kotlin数据类在Android开发中的应用

在 Android 开发中，Kotlin 的数据类（Data Class）因其简洁性和自动生成的功能特性，成为了提升开发效率的利器。以下是我总结的 7 大核心妙用场景，配合代码示例助您快速掌握： 1️⃣ JSON 解析利器 → 网络请求模型 与 Retrofit/Moshi 完美配合，自动生成 equals()/hashCod…...

编程日记 2025/8/19 20:49:13

程序员学商务英语之Shipment Claim 运输和索赔

Dia-3: Claim 1 索赔 1. He claimed that he would quit smoking. 他宣布他将要禁烟。 2. BYD is inferior to Tesla. 差 be worse than… 比亚迪比特斯拉差。 Tesla is superior to BYD. 特斯拉比比亚迪好。 be better than… 3. The survey report reveals/s…...

编程日记 2025/8/19 20:49:12

Kotlin密封类优化Android状态管理

Kotlin 的密封类&#xff08;Sealed Class&#xff09;确实是 Android 开发中管理复杂 UI 状态的利器。它通过类型安全的层次结构&#xff0c;让状态管理代码更加清晰简洁。让我们从实际开发场景出发&#xff0c;深入探讨其应用&#xff1a; 一、密封类核心优势 受限的类继承…...

编程日记 2025/8/19 6:02:10

基于图像处理的道路监控与路面障碍检测系统设计与实现 (源码+定制+开发） 图像处理 计算机视觉 道路监控系统 视频帧分析 道路安全监控 城市道路管理

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/8/19 20:49:07

依赖注入详解与案例（前端篇）

依赖注入详解与案例&#xff08;前端篇&#xff09; 一、依赖注入核心概念与前端价值 依赖注入&#xff08;Dependency Injection, DI&#xff09; 是一种通过外部容器管理组件/类间依赖关系的设计模式&#xff0c;其核心是控制反转&#xff08;Inversion of Control, IoC&…...

编程日记 2025/8/20 14:22:44

Spark 的 Shuffle 机制：原理与源码详解

Apache Spark 是一个分布式数据处理框架&#xff0c;专为大规模数据分析设计。其核心操作之一是 Shuffle&#xff0c;这是一个关键但复杂的机制&#xff0c;用于在某些操作期间在集群中重新分配数据。理解 Shuffle 需要深入探讨其目的、机制和实现&#xff0c;既包括概念层面&a…...

编程日记 2025/8/19 20:49:02

IdeaVim配置指南

一、什么是 IdeaVim&#xff1f; IdeaVim 是 JetBrains 系列 IDE&#xff08;如 IntelliJ IDEA, WebStorm, PyCharm 等&#xff09;中的一个插件&#xff0c;让你在 IDE 里使用 Vim 的按键习惯&#xff0c;大大提升效率。 安装方法&#xff1a; 在 IDE 中打开 设置(Settings) →…...

编程日记 2025/8/19 20:48:58

[监控看板]Grafana+Prometheus+Exporter监控疑难排查

采用GrafanaPrometheusExporter监控MySQL时发现经常数据不即时同步&#xff0c;本示例也是本地搭建采用。 Prometheus面板 1&#xff0c;Detected a time difference of 11h 47m 22.337s between your browser and the server. You may see unexpected time-shifted query res…...

编程日记 2025/8/22 4:06:16

P56-P60 统一委托,关联游戏UI,UI动画,延迟血条

这一部分首先把复杂的每个属性委托全部换成了简洁可复用的委托,之后重新修改了UI蓝图,然后在新增了一个与之前表格关联的动画与血条延迟下降的蓝图 OverlayAuraWidgetController.h // Fill out your copyright notice in the Description page of Project Settings. #pragma …...

编程日记 2025/8/19 20:48:54