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

React 入门教程：构建第一个 React 应用

news 来源：原创 2025/8/25 14:33:02

本教程将带你从零开始构建你的第一个 React 应用。我们将创建一个简单的计数器应用，涵盖 React 的基本概念和开发流程。

准备工作

在开始之前，请确保你的开发环境满足以下要求：

  • Node.js (建议使用最新的 LTS 版本)

  • npm 或 yarn (Node.js 安装时会自带 npm)

  • 代码编辑器 (如 VS Code)

第一步：创建 React 应用

React 官方推荐使用 create-react-app 工具来快速搭建项目：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

执行这些命令后，你的默认浏览器应该会自动打开 http://localhost:3000 并显示 React 的欢迎页面。

第二步：理解项目结构

让我们看一下 create-react-app 生成的主要文件和目录：

my-first-react-app/
├── node_modules/     # 所有依赖项
├── public/           # 静态文件
│   ├── index.html    # 主HTML文件
│   └── ...
├── src/              # React 源代码
│   ├── App.js        # 主React组件
│   ├── index.js      # 应用入口点
│   └── ...
├── package.json      # 项目配置和依赖
└── ...

第三步：创建第一个组件

让我们修改 src/App.js 来创建我们的计数器组件：

import React, { useState } from 'react';function App() {// 使用 useState Hook 来管理状态const [count, setCount] = useState(0);// 增加计数const increment = () => {setCount(count + 1);};// 减少计数const decrement = () => {setCount(count - 1);};// 重置计数const reset = () => {setCount(0);};return (<div style={{ textAlign: 'center', marginTop: '50px' }}><h1>我的第一个 React 应用</h1><h2>计数器: {count}</h2><button onClick={increment} style={{ margin: '5px' }}>增加</button><button onClick={decrement} style={{ margin: '5px' }}>减少</button><button onClick={reset} style={{ margin: '5px' }}>重置</button></div>);
}export default App;

第四步：理解代码

让我们分解一下这个简单的组件：

  1. 导入 React：import React, { useState } from 'react'; - 导入 React 和 useState Hook

  2. 函数组件：我们使用函数式组件而不是类组件，这是 React 的现代写法

  3. useState Hook：const [count, setCount] = useState(0); 创建了一个状态变量 count 和更新它的函数 setCount，初始值为 0

  4. 事件处理：我们定义了三个函数来处理按钮点击事件，分别用于增加、减少和重置计数器

  5. JSX：返回的 JSX 描述了 UI 的结构和外观

第五步：运行应用

确保你的开发服务器正在运行（如果没有，使用 npm start 启动它）。你应该能在浏览器中看到：

  • 一个标题 "我的第一个 React 应用"

  • 显示当前计数的文本

  • 三个按钮：增加、减少和重置

尝试点击这些按钮，观察计数器的变化。

第六步：添加样式

让我们为计数器添加一些基本样式。在 src/App.js 中，我们可以添加 CSS-in-JS 样式：

// 在 return 语句前定义样式对象
const styles = {container: {textAlign: 'center',marginTop: '50px',fontFamily: 'Arial, sans-serif'},counter: {fontSize: '48px',margin: '20px 0',color: '#333'},button: {padding: '10px 20px',fontSize: '16px',margin: '5px',cursor: 'pointer',backgroundColor: '#61dafb',border: 'none',borderRadius: '5px',color: 'white'},buttonHover: {backgroundColor: '#4fa8d3'}
};// 然后修改 JSX 部分
return (<div style={styles.container}><h1>我的第一个 React 应用</h1><h2 style={styles.counter}>计数器: {count}</h2><button onClick={increment} style={styles.button}onMouseOver={(e) => e.target.style.backgroundColor = styles.buttonHover.backgroundColor}onMouseOut={(e) => e.target.style.backgroundColor = styles.button.backgroundColor}>增加</button>{/* 其他按钮类似 */}</div>
);

第七步：组件拆分

随着应用增长，最好将组件拆分为更小的可重用部分。让我们创建一个单独的 Counter 组件：

  1. 创建 src/components/Counter.js:

    import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);const increment = () => setCount(count + 1);const decrement = () => setCount(count - 1);const reset = () => setCount(0);return (<div style={{ textAlign: 'center', margin: '20px' }}><h2>计数器: {count}</h2><button onClick={increment}>增加</button><button onClick={decrement}>减少</button><button onClick={reset}>重置</button></div>);
}export default Counter;

  2. 修改 src/App.js:

    import React from 'react';
import Counter from './components/Counter';function App() {return (<div style={{ textAlign: 'center', marginTop: '50px' }}><h1>我的第一个 React 应用</h1><Counter /></div>);
}export default App;

第八步：添加多个计数器

现在我们可以轻松地添加多个计数器实例：

function App() {return (<div style={{ textAlign: 'center', marginTop: '50px' }}><h1>我的第一个 React 应用</h1><Counter /><Counter /><Counter /></div>);
}

每个计数器都有自己独立的状态！

第九步：测试与部署

添加单元测试

React 应用通常使用 Jest 和 React Testing Library 进行测试。CRA 已经配置好了这些工具。

创建 src/components/Counter.test.js：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';test('计数器初始值正确', () => {const { getByText } = render(<Counter initialValue={5} />);expect(getByText('当前值: 5')).toBeInTheDocument();
});test('增加按钮工作正常', () => {const { getByText } = render(<Counter />);fireEvent.click(getByText('+'));expect(getByText('当前值: 1')).toBeInTheDocument();
});

运行测试：

npm test

构建生产版本

准备部署时，运行：

npm run build

这会：

  1. 优化代码（压缩、tree-shaking 等）

  2. 生成静态文件到 build 目录

  3. 准备好部署到任何静态文件服务器

部署选项

有多种方式可以部署 React 应用：

  1. Vercel：最简单的部署平台之一

    npm install -g vercel
vercel

  2. Netlify：拖放 build 文件夹到 Netlify

  3. GitHub Pages：

    • 安装 gh-pages：npm install gh-pages --save-dev

    • 在 package.json 中添加：

      "homepage": "https://username.github.io/repo-name",
"scripts": {"predeploy": "npm run build","deploy": "gh-pages -d build"
}

    • 运行 npm run deploy

React 生态系统丰富而充满活力，持续学习和实践是掌握它的关键。记住，最好的学习方式是构建真实项目——尝试扩展这个计数器应用，或者开始一个全新的项目！ 

相关文章：

React 入门教程：构建第一个 React 应用

本教程将带你从零开始构建你的第一个 React 应用。我们将创建一个简单的计数器应用&#xff0c;涵盖 React 的基本概念和开发流程。 准备工作 在开始之前&#xff0c;请确保你的开发环境满足以下要求&#xff1a; Node.js (建议使用最新的 LTS 版本) npm 或 yarn (Node.js 安…...

编程日记 2025/8/25 14:33:02

【数字图像处理】数字图像空间域增强（3）

图像锐化 图像细节增强 图像轮廓&#xff1a;灰度值陡然变化的部分 空间变化&#xff1a;计算灰度变化程度 图像微分法&#xff1a;微分计算灰度梯度突变的速率 一阶微分&#xff1a;单向差值 二阶微分&#xff1a;双向插值 一阶微分滤波 1&#xff1a;梯度法 梯度&#xff1…...

编程日记 2025/8/25 12:45:18

mapstruct使用详解

一、背景&#xff1a;为什么需要 mapstruct 在 Java 开发中&#xff0c;对象之间的映射&#xff08;如 DTO 转实体类、实体类转 VO&#xff09;是一项高频且繁琐的任务。手动编写映射代码存在以下问题&#xff1a; 冗余代码多&#xff1a;每个类都需要重复编写 setter 和 get…...

编程日记 2025/8/24 20:50:54

Token与axios拦截器

目录 一、Token 详解 1. Token 的定义与作用 2. Token 的工作流程 3. Token 的优势 4. Token 的安全实践 5. JWT 结构示例 二、Axios 拦截器详解 1. 拦截器的作用 2. 请求拦截器 3. 响应拦截器 4. 拦截器常见场景 5. 移除拦截器 三、完整代码示例 四、总结 五、…...

编程日记 2025/8/25 14:30:25

windows上安装Jenkins

1. 下载windows版 jenkins安装包 2. 配置本地安全策略 在 Windows 11/10 上打开本地安全策略。 Secpol.msc 或本地安全策略编辑器是一个 Windows 管理工具&#xff0c;允许您在本地计算机上配置和管理与安全相关的策略。 安全设置-》本地策略-》用户权限分配-》作为服务登录…...

编程日记 2025/8/25 14:26:03

鸿蒙NEXT开发文件预览工具类（ArkTs）

import { uniformTypeDescriptor } from kit.ArkData; import { filePreview } from kit.PreviewKit; import { FileUtil } from ./FileUtil; import { AppUtil } from ./AppUtil; import { WantUtil } from ./WantUtil;/*** 文件预览工具类* 提供文件预览、加载、判断等功能。…...

编程日记 2025/8/25 14:30:26

【WPF-VisionMaster源代码】应用OpenCVSharp仿Vision Master页面开发的软件源代码

一、目的&#xff1a;开放WPF-VisionMaster源代码 二、简介 WPF-Vision Master 视觉处理软件源码 WPF-Vision Master是基于WPF-Control的UI框架与OpenCVSharp计算机视觉库联合&#xff0c;并参考Vision Master界面开发的视觉处理软件。该平台深度融合WPF强大的界面控制能力和Op…...

编程日记 2025/8/25 14:32:59

软件研发过程中的技术债

引言&#xff1a;数字时代的“技术利息” 在金融领域&#xff0c;债务是推动发展的杠杆&#xff1b;而在软件开发中&#xff0c;技术债&#xff08;Technical Debt&#xff09;却是一把双刃剑。据行业调查显示&#xff0c;70%的软件项目存在技术债&#xff0c;其中超过半数团队…...

编程日记 2025/8/25 14:14:16

鸿蒙应用（医院诊疗系统）开发篇2·Axios网络请求封装全流程解析

一、项目初始化与环境准备 1. 创建鸿蒙工程 src/main/ets/ ├── api/ │ ├── api.ets # 接口聚合入口 │ ├── login.ets # 登录模块接口 │ └── request.ets # 网络请求核心封装 └── pages/ └── login.ets # 登录页面逻辑…...

编程日记 2025/8/24 15:10:55

重新定义“边缘”：边缘计算如何重塑人类与数据的关系

在数字化浪潮中&#xff0c;云计算曾是科技界的宠儿&#xff0c;但如今&#xff0c;边缘计算正在悄然改变游戏规则。它不仅是一种技术进步&#xff0c;更是对人类与数据关系的一次深刻反思。本文将探讨边缘计算如何从“中心化”走向“分布式”&#xff0c;以及它如何在效率、隐…...

编程日记 2025/8/24 19:42:59

Flink CDC 出现错误码 1236 和 SQL 状态 HY000 的原因及解决方法

Flink CDC 出现错误码 1236 和 SQL 状态 HY000 的原因及解决方法 常见原因 server-id 冲突：当多个 Flink CDC 任务连接同一个 MySQL 实例，且使用了相同的 server-id 时，会导致该冲突。因为 MySQL 服务器通过 server-id 来区分不同的从服务器，如果多个 Flink CDC 任务使用相…...

编程日记 2025/8/25 14:30:26

如何解除Excel只读状态？4种方法全解析

在日常办公中&#xff0c;我们经常会遇到Excel文件被设置为只读模式的情况。只读模式可以防止文件被意外修改&#xff0c;但在需要编辑时&#xff0c;解除只读模式就显得尤为重要。下面小编分享退出Excel只读方式的4种方法&#xff0c;让你能够轻松编辑工作表。 方法1&#xf…...

编程日记 2025/8/25 14:30:05

深度学习与 Flask 应用常见问题解析

在深度学习和 Flask 应用开发过程中&#xff0c;我们常常会遇到一些关键的知识点和容易混淆的问题。下面我们就来对这些问题进行详细的解析。 一、卷积神经网络&#xff08;CNN&#xff09;常用层 在定义卷积神经网络时&#xff0c;有一些常用的层&#xff1a; Conv2D&#x…...

编程日记 2025/8/25 14:24:09

零浪费，最高效率：通往0%废品率的道路

在工业自动化领域&#xff0c;努力实现废品率为 0% 是最大的挑战之一。这意味着不生产任何有缺陷的产品 —— 从而减少浪费、降低成本&#xff0c;并提高客户满意度。尽管实现这一目标颇具雄心壮志&#xff0c;但企业可以采取几个步骤来改进自身流程&#xff0c;以达成这一目标…...

编程日记 2025/8/25 14:28:35

【c++深入系列】：new和delete运算符详解

&#x1f525; 本文专栏&#xff1a;c &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; “生活不会向你许诺什么&#xff0c;尤其不会向你许诺成功。它只会给你挣扎、痛苦和煎熬的过程。但只要你坚持下去&#xff0c;终有一天&…...

编程日记 2025/8/25 14:33:00

基础（测试用例：介绍，测试用例格式，案例）

目录 测试用例介绍 测试用例编写格式 案例 测试用例介绍 用例&#xff1a;用户使用软件的案例场景 测试用例&#xff1a;是为测试项目而设计的测试执行文档 测试用例的作用&#xff1a; 防止漏测是实施测试的标准可以作为测试工作量的评估 测试用例编写格式 用例编号 用例…...

编程日记 2025/8/25 14:30:03

MCP协议，.Net 使用示例

服务器端示例 基础服务器 以下是一个基础的 MCP 服务器示例&#xff0c;它使用标准输入输出&#xff08;stdio&#xff09;作为传输方式&#xff0c;并实现了一个简单的回显工具&#xff1a; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.H…...

编程日记 2025/8/24 22:52:24

Node.js 数据库 事务 项目示例

1、参考&#xff1a;JavaScript语言的事务管理_js 函数 事务性-CSDN博客 或者百度搜索&#xff1a;Nodejs控制事务&#xff0c; 2、实践 2.1、对于MySQL或MariaDB&#xff0c;你可以使用mysql或mysql2库&#xff0c;并结合Promise或async/await语法来控制事务。 使用 mysql2…...

编程日记 2025/8/25 14:30:25

【AI插件开发】Notepad++ AI插件开发实践：支持多平台多模型

引言 上篇文章我们的Notepad插件介绍到Dock窗口集成&#xff0c;本篇将继续完善插件功能&#xff0c;主要包括两个部分&#xff1a; 支持多平台、多模型支持多种授权验证、接口类型 一、多平台 原先的配置项很简单&#xff1a; // PluginConf.h class PlatformConf { publ…...

编程日记 2025/8/24 8:26:50

微信小程序数字滚动效果

效果图 .wxml <view class"container"><view class"container-num" wx:for"{{number}}" wx:key"index"><view class"num-container" style"--h:{{h}}px;--y:{{-item * h }}px;"><view wx:f…...

编程日记 2025/8/24 0:04:42

wx219基于ssm+vue+uniapp的教师管理系统小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…...

编程日记 2025/8/22 20:10:20

Python 注释进阶之Google风格

文章目录 1. Google 风格 Docstring 的核心特点2. Google 风格的基本结构3. 编写规则和注意事项4. 最常用的 Google 风格 Docstring 示例示例 1&#xff1a;普通函数 示例 2&#xff1a;带默认参数和可变参数的函数示例 3&#xff1a;类示例 4&#xff1a;生成器函数示例 5&…...

编程日记 2025/8/22 23:16:55

写测试文档时，需要的环境配置怎么查看

操作系统 cat /etc/os-releaseCPU信息 lscpu 内存 sudo dmidecode --type memory | grep -E "Size:|Type:|Speed:"硬盘 列出当前系统中 所有块设备&#xff08;Block Devices&#xff09; 的信息&#xff0c;并显示指定列&#xff08;-o 参数&#xff09; lsblk…...

编程日记 2025/8/19 2:47:49

强化学习的数学原理（十）actor-critic 方法

由于全文太长&#xff0c;只好分开发了。(已完结&#xff01;在专栏查看本系列其他文章&#xff09; 个人博客可以直接看全文~ 本系列为在学习赵世钰老师的“强化学习的数学原理” 课程后所作笔记。 课堂视频链接https://www.bilibili.com/video/BV1sd4y167NS/ 第十章 acto…...

编程日记 2025/8/19 7:34:49

多个定时器同时工作时，会出现哪些常见的bug ，如何解决？？（定时任务未实时更新但刷新后正常的问题分析）

1. 定时器冲突与覆盖 问题&#xff1a;后设置的定时器可能覆盖先前的定时器&#xff0c;导致前一个定时器失效 原因&#xff1a;未正确管理定时器ID或未清除前一个定时器 2. 性能问题 内存泄漏&#xff1a;未清除不再需要的定时器会导致内存占用不断增加 CPU过载&#xff1a…...

编程日记 2025/8/21 18:22:32

代码随想录算法训练营day5（哈希表）

华子目录 有效的字母异位词思路 有效的字母异位词 https://leetcode.cn/problems/valid-anagram/description/ 思路 使用哈希表&#xff0c;这里哈希表使用数组先申请一个26空间的大小的数组遍历第一个字符串&#xff0c;记录每个字符出现的次数1遍历第二个字符串&#xff0c…...

编程日记 2025/8/22 8:51:33

Python（17）Python字符编码完全指南：从存储原理到乱码终结实战

目录 背景介绍一、字符编码核心原理1. 计算机存储本质2. Python3的编码革命3. 主流编码格式对比 二、编码转换核心方法1. 编码&#xff08;Encode&#xff09;过程2. 解码&#xff08;Decode&#xff09;过程3. 错误处理策略 三、文件操作编码实战1. 文本文件读写2. 二进制模式…...

编程日记 2025/8/22 17:11:56

Node.js 文件读取与复制相关内容

Node.js 文件读取与复制相关内容的系统总结&#xff0c;包括 同步读取、异步读取、流式读取、复制操作、两者对比及内存测试。 &#x1f9e9; 一、Node.js 文件读取方式总结 Node.js 使用 fs&#xff08;文件系统&#xff09;模块进行文件操作&#xff1a; 1. 同步读取&#…...

编程日记 2025/8/24 8:49:26

大数据面试问答-HBase/ClickHouse

1. HBase 1.1 概念 HBase是构建在Hadoop HDFS之上的分布式NoSQL数据库&#xff0c;采用列式存储模型&#xff0c;支持海量数据的实时读写和随机访问。适用于高吞吐、低延迟的场景&#xff0c;如实时日志处理、在线交易等。 RowKey&#xff08;行键&#xff09; 定义&#xf…...

编程日记 2025/8/20 21:44:56

jupyter 文件浏览器，加强版，超好用，免费exe

第一步&#xff1a;github搜索 lukairui的 jupyter-viewer-plus 仓库 第二步&#xff1a; git clone 到本地。 解压zip包 第三步&#xff1a; 进入压缩包&#xff0c;第一次双击打开jupyter-viewer-plus.exe运行&#xff0c;第一次运行后&#xff0c;界面上有一个“设为…...

编程日记 2025/8/17 20:53:40

【AI工具】用大模型生成脑图初试

刚试用了一下通过大模型生成脑图&#xff0c;非常简单&#xff0c;记录一下 一、用大模型生成脑图文件 关键&#xff1a;存在markdown文件 举例&#xff1a;使用Deepseek&#xff0c;输入问题&#xff1a;“针对大模型的后训练&#xff0c;生成一个开发计划&#xff0c;用ma…...

编程日记 2025/8/23 13:59:09

数据结构-树与二叉树

一、树的定义与基本术语 1.1 树的定义 树&#xff08;Tree&#xff09;是一种非线性的数据结构&#xff0c;它是由 n&#xff08;n ≥ 0&#xff09;个有限节点组成的集合。如果 n 0&#xff0c;称为空树&#xff1b;如果 n > 0&#xff0c;则&#xff1a; 有一个特定的节…...

编程日记 2025/8/25 1:01:46

STL_unordered_map_01_基本用法

&#x1f44b; Hi, I’m liubo&#x1f440; I’m interested in harmony&#x1f331; I’m currently learning harmony&#x1f49e;️ I’m looking to collaborate on …&#x1f4eb; How to reach me …&#x1f4c7; sssssdsdsdsdsdsdasd&#x1f383; dsdsdsdsdsddfsg…...

编程日记 2025/8/23 5:00:15

ARCGIS国土超级工具集1.5更新说明

ARCGIS国土超级工具集V1.5版本更新说明&#xff1a;因作者近段时间工作比较忙及正在编写ARCGISPro国土超级工具集&#xff08;截图附后&#xff09;的原因&#xff0c;故本次更新为小更新&#xff08;没有增加新功能&#xff0c;只更新了已有的工具&#xff09;。本次更新主要修…...

编程日记 2025/8/21 6:40:28

主流物理仿真引擎和机器人/强化学习仿真平台对比

以下是当前主流的物理仿真引擎和机器人/强化学习仿真平台的特点和适用场景&#xff0c;方便根据需求选择&#xff1a; &#x1f9e0; NVIDIA 系列 ✅ Isaac Lab v1.4 / v2 特点&#xff1a; 基于 Omniverse Isaac Sim&#xff0c;属于高端视觉机器人仿真框架v2 更加模块化&a…...

编程日记 2025/8/24 14:58:46

STM32 HAL库内部 Flash 读写实现

一、STM32F407 内部 Flash 概述 1.1 Flash 存储器的基本概念 Flash 存储器是一种非易失性存储器&#xff0c;它可以在掉电的情况下保持数据。STM32F407 系列微控制器内部集成了一定容量的 Flash 存储器&#xff0c;用于存储程序代码和数据。Flash 存储器具有擦除和编程次数的…...

编程日记 2025/8/20 8:30:26

C++学习：六个月从基础到就业——面向对象编程：构造函数与析构函数

C学习&#xff1a;六个月从基础到就业——面向对象编程&#xff1a;构造函数与析构函数 本文是我C学习之旅系列的第十篇技术文章&#xff0c;主要讨论C中构造函数与析构函数的概念、特点和使用技巧。这些是C对象生命周期管理的关键组成部分。查看完整系列目录了解更多内容。 引…...

编程日记 2025/8/24 1:17:01

dfs二叉树中的深搜(回溯、剪枝)--力扣129、814、230、257

目录 1.1题目链接&#xff1a;129.求根节点到叶结点数字之和 1.2题目描述&#xff1a;给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。 1.3解法(dfs-前序遍历)&#xff1a; 2.1题目链接&#xff1a;814.二叉树剪枝 2.2题目描述&…...

编程日记 2025/8/22 7:53:59

Python Selenium 一小时速通教程

Python Selenium 一小时速通教程 实战案例 一、环境配置&#xff08;10分钟&#xff09; 安装Python 确保已安装Python 3.x&#xff08;官网下载&#xff09;。 安装Selenium 在终端运行&#xff1a; pip install selenium下载浏览器驱动 Chrome&#xff1a;访问 ChromeDriv…...

编程日记 2025/8/25 12:27:25

通过GO后端项目实践理解DDD架构

最近在工作过程中重构的项目要求使用DDD架构&#xff0c;在网上查询资料发现教程五花八门&#xff0c;并且大部分内容都是长篇的概念讲解&#xff0c;晦涩难懂&#xff0c;笔者看了一些github上入门的使用DDD的GO项目&#xff0c;并结合自己开发中的经验&#xff0c;谈谈自己对…...

编程日记 2025/8/22 15:55:20

MybatisPlus最新版分页无法使用

在使用分页的时候发现分页拦截器关键API会报错&#xff0c;其实根本原因是在之前只需要导入一个mybatisplus依赖&#xff0c;而现在分页似乎被单独分离出来了&#xff0c;需要额外导入新依赖使其支持 ​ <dependency><groupId>com.baomidou</groupId><art…...

编程日记 2025/8/24 2:01:24

【Android学习记录】工具使用

文章目录 一. 精准找视图资源ID1. 准备工作2. 使用 uiautomator 工具2.1. 获取设备的窗口内容2.2. Pull XML 文件2.3. 查看 XML 文件 3. 直接使用 ADB 命令4. 使用 Android Studio 的 Layout Inspector总结 二. adb shell dumpsys activity1. 如何使用 ADB 命令2. 输出内容解析…...

编程日记 2025/8/24 8:00:52

youtube视频和telegram视频加载原理差异分析

1. 客户侧缓存与流式播放机制​​ 流式视频应用&#xff08;如 Netflix、YouTube&#xff09;通过​​边下载边播放​​实现流畅体验&#xff0c;其核心依赖以下技术&#xff1a; ​​缓存预加载​​&#xff1a;客户端在后台持续下载视频片段&#xff08;如 DASH/HLS 协议的…...

编程日记 2025/8/25 13:38:49

在机器视觉检测中为何选择线阵工业相机？

线阵工业相机&#xff0c;顾名思义是成像传感器呈“线”状的。虽然也是二维图像&#xff0c;但极宽&#xff0c;几千个像素的宽度&#xff0c;而高度却只有几个像素的而已。一般在两种情况下使用这种相机&#xff1a; 1. 被测视野为细长的带状&#xff0c;多用于滚筒上检测的问…...

编程日记 2025/8/20 11:23:53

lwip记录

Index of /releases/lwip/ (gnu.org) 以太网(Ethernet)是互联网技术的一种&#xff0c;由于它是在组网技术中占的比例最高&#xff0c;很多人 直接把以太网理解为互联网。 以太网是指遵守 IEEE 802.3 标准组成的局域网&#xff0c;由 IEEE 802.3 标准规定的主要是位于 参考模…...

编程日记 2025/8/22 23:04:50

Redis清空缓存

尽管redis可以设置ttl过期时间进行指定key的定时删除&#xff0c;但是在某些场景下&#xff0c;比如&#xff1a; 测试时需要批量删除指定库下所有库下所有的数据&#xff0c;则会涉及到缓存清除的话题。 如下为具体的操作及说明&#xff1a; 场景类型操作指令清空当前库下所有…...

编程日记 2025/8/24 22:55:07

WPF 依赖注入启动的问题

原因是在App.xaml 设置了 StartupUri“MainWindow.xaml” 1.依赖注入后启动的主窗体存在无参构造 程序正常启动&#xff0c;但是主窗体界面会弹出2个窗体。 2.依赖注入后启动的主窗体存在有参构造 报错...

编程日记 2025/8/21 14:32:12

Arcgis经纬线标注设置（英文、刻度显示）

在arcgis软件中绘制地图边框&#xff0c;添加经纬度度时常常面临经纬度出现中文&#xff0c;如下图所示&#xff1a; 解决方法&#xff0c;设置一下Arcgis的语言 点击高级--确认 这样Arcgis就转为英文版了&#xff0c;此时在来看经纬线刻度的标注&#xff0c;自动变成英文...

编程日记 2025/8/23 18:17:07

【电子通识】案例：电缆的安装方式也会影响设备的可靠性？

背景 在日常生活中&#xff0c;我们常常会忽略一些看似微不足道的细节&#xff0c;但这些细节有时却能决定设备的寿命和安全性。比如&#xff0c;你知道吗&#xff1f;一根电缆的布置方式&#xff0c;可能会决定你的设备是否会因为冷凝水而损坏。 今天&#xff0c;我们就来聊聊…...

编程日记 2025/8/22 9:33:36

房屋装修费用预算表：45594 =未付14509 + 付清31085【时间：20250416】

文章目录 引言I 房屋装修费用预算表II 市场价参考防水搬运3000III 装修计划整体流程进度细节国补IV 付款凭证（销售单）伟星 PPR +PVC+太阳线+地漏=6500入户门设计通铺大板瓷砖 | 湿贴 3408（地）+3600（加）+5209（墙）=12217元门头铁空调引言 关注我，发送【装修记账】获取预…...

编程日记 2025/8/24 14:17:22