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

【react】快速上手基础教程

news 来源：原创 2025/9/13 17:41:43

一、React 简介

1.什么是 React

2.React 核心特性

二、环境搭建

1. 创建 React 项目

2.关键配置

三、核心概念

1. JSX 语法

表达式嵌入

样式处理

2. 组件 (Component)

3. 状态 (State) 与属性 (Props)

4. 事件处理

合成事件（SyntheticEvent)

5. 条件渲染

三元表达式

短路运算

6. 列表渲染

四、Hooks（函数组件的核心）

1. useState

基础用法

复杂对象管理

2. useEffect

3. 其他常用 Hooks

五、组件通信

1. 父传子：通过 Props

2. 子传父：通过回调函数

六、路由管理（使用 React Router）

1. 安装

2. 基础配置

七、状态管理（使用 Context API）

1. 创建 Context

八、进阶学习方向

九、官方资源

本文案例代码是TypeScript+React

一、React 简介

1.什么是 React

React 是一个用于构建用户界面的 JavaScript 库（专注于视图层），由 Facebook 开发。

声明式UI、组件化开发、虚拟DOM原理。

React vs Vue vs Angular：生态与设计哲学对比。

2.React 核心特性

单向数据流、JSX、函数式编程思想。跨平台能力（React Native、React VR）。

组件化：将 UI 拆分为独立可复用的组件。

虚拟 DOM：高效更新界面，优化性能。

声明式编程：通过描述 UI 的最终状态，而非具体操作步骤。

二、环境搭建

1. 创建 React 项目

Create React App（官方脚手架）

npx create-react-app my-app --template typescript

Vite（更轻量快速）：

npm create vite@latest my-app -- --template react-ts

使用官方脚手架工具 create-react-app 快速初始化项目：

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

项目结构解析

my-app/src/components/  # 组件目录App.tsx      # 根组件index.tsx    # 入口文件public/        # 静态资源package.json

2.关键配置

路径别名（tsconfig.json）：

{"compilerOptions": {"baseUrl": "./src","paths": {"@/*": ["./*"]}}
}

三、核心概念

1. JSX 语法

JSX 是 JavaScript 的语法扩展，JSX本质：React.createElement的语法糖

表达式嵌入

const name = 'Alice';
const element = <h1>Hello, React!</h1>;

样式处理

<div style={{ color: 'red', fontSize: 20 }}>Styled Text</div>

2. 组件 (Component)

函数组件（推荐）：

interface Props {title: string;
}
const Header: React.FC<Props> = ({ title }) => <h1>{title}</h1>;

类组件：

class Counter extends React.Component<{}, { count: number }> {state = { count: 0 };render() { return <div>{this.state.count}</div>; }
}

3. 状态 (State) 与属性 (Props)

Props：父组件传递给子组件的数据（只读）。

// 父组件
<Child title="Hello" />
// 子组件
interface ChildProps { title: string; }
const Child: React.FC<ChildProps> = ({ title }) => <div>{title}</div>;

State：组件内部管理的动态数据（通过 useState 或 setState 更新）。

const [count, setCount] = useState(0);

4. 事件处理

<button onClick={() => alert('Clicked!')}>Click Me</button>

合成事件（SyntheticEvent)

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {e.preventDefault();console.log('Clicked');
};
<button onClick={handleClick}>Click</button>

5. 条件渲染

三元表达式

{ isLoggedIn ? <UserPanel /> : <LoginButton /> }

短路运算

{ isLoading && <Spinner /> }

6. 列表渲染

key的重要性（避免重复渲染问题）

使用 map() 和 key 属性：

const items = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
return (<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
);

四、Hooks（函数组件的核心）

1. `useState`

`基础用法`

const [count, setCount] = useState<number>(0);
setCount(prev => prev + 1);

复杂对象管理

interface User { name: string; age: number; }
const [user, setUser] = useState<User>({ name: 'Alice', age: 30 });

2. `useEffect`

副作用处理（数据请求，事件监听）；

useEffect(() => {const timer = setInterval(() => console.log('Tick'), 1000);return () => clearInterval(timer); // 清理函数
}, []); // 空依赖数组表示仅执行一次

依赖数据控制更新：

useEffect(() => {// 组件挂载或更新时执行fetchData(userId);return () => {// 组件卸载时清理（如取消订阅）};
}, [userId]); // 依赖数组控制执行时机

3. 其他常用 Hooks

useContext（跨组件通信）：访问react上下文

const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);

useRef：获取DOM引用或保存可变值。

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

useMemo/useCallback：性能优化

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

useReducer：复杂状态管理。

五、组件通信

1. 父传子：通过 Props

传递复杂对象

interface ParentProps { user: { id: number; name: string }; }
const Parent = () => <Child user={{ id: 1, name: 'Alice' }} />;

2. 子传父：通过回调函数

定义回调

const Child = ({ onSubmit }: { onSubmit: (data: string) => void }) => {return <button onClick={() => onSubmit('Data')}>Submit</button>;
};

六、路由管理（使用 React Router）

1. 安装

npm install react-router-dom

2. 基础配置

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/user/:id" element={<UserProfile />} /></Routes></BrowserRouter>
);

七、状态管理（使用 Context API）

1. 创建 Context

// ThemeContext.tsx
import { createContext, useContext } from 'react';
interface ThemeContextType { theme: string; toggleTheme: () => void; }
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);// Provider 组件
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {const [theme, setTheme] = useState('light');const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
};// 自定义 Hook
export const useTheme = () => {const context = useContext(ThemeContext);if (!context) throw new Error('useTheme must be used within ThemeProvider');return context;
};

八、进阶学习方向

性能优化：React.memo、useMemo、useCallback、代码分割（lazy + Suspense）。
状态管理库进阶：Redux, Toolkit、Recoil、Zustand
服务端渲染（SSR)：Next.js框架集成
UI 库：Material-UI, Ant Design
测试：Jest + React Testing Library、Cypress E2E 测试

九、官方资源

文档

React 官方文档（最新特性与最佳实践）。
React 中文文档

2.社区

React GitHub、Reactiflux Discord。

3.工具链

Create React App

码字不易，欢迎各位大佬点赞

【react】快速上手基础教程

目录一、React 简介 1.什么是 React 2.React 核心特性二、环境搭建 1. 创建 React 项目 2.关键配置三、核心概念 1. JSX 语法表达式嵌入样式处理 2. 组件 (Component) 3. 状态 (State) 与属性 (Props) 4. 事件处理合成事件（SyntheticEvent) 5. …...

编程日记 2025/9/13 17:41:43

【愚公系列】《Python网络爬虫从入门到精通》033-DataFrame的数据排序

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...

编程日记 2025/9/13 17:38:06

一周一个Unity小游戏2D反弹球游戏 - 移动的弹板（触屏版）

前言上文中实现了用鼠标移动控制弹板的移动，本文将实现手指触屏时弹板跟随手指移动的功能，并通过使用Unity自带的Device Simulator Devices Package来验证和模拟触屏设备的使用场景。安装Device Simulator Devices Package 打开Unity Package Manager&…...

编程日记 2025/9/9 18:16:29

深度学习-11.用于自然语言处理的循环神经网络

Deep Learning - Lecture 11 Recurrent Networks for Natural Language Processing 介绍文本表示用数字表示单词词嵌入(word embedding) 机械翻译编码器 - 解码器循环模型（Encoder-decoder recurrent models）双向循环网络注意力机制（方法&am…...

编程日记 2025/9/13 17:40:04

2025年软考报名费用是多少?全国费用汇总!

软考报名时间终于确定了！想要参加2025年软考的同学们注意啦！特别是那些一年只有一次考试机会的科目，千万不要错过哦！这里为大家整理了各地的报名时间、科目、费用等信息，快来看看吧！ 一、2025年软考时间安…...

编程日记 2025/9/13 17:40:03

el-input实现金额输入

需求：想要实现一个输入金额的el-input，限制只能输入数字和一个小数点。失焦数字转千分位，聚焦转为数字，超过最大值，红字提示效果图失焦聚焦报错效果 // 组件limitDialog <template><el-dialog:visible.s…...

编程日记 2025/9/13 17:38:50

C++11相较于C++98的新特性介绍:列表初始化，右值引用与移动语义

一，列表初始化 1.1C98中传统的{} C98中一般数组和结构体可以使用{}进行初始化： struct Date {int _year;int _month;int _day; };int main() {int a[] { 1,2,3,4,5 };Date _date { 2025,2,27 };return 0; } 1.2C11中的{} C11以后想统一初始化方式&…...

编程日记 2025/9/13 17:38:06

ISIS（中间系统到中间系统）——基础

ISIS是一项通用的动态路由协议，其隶属于链路状态路由协议，最初运行与OSI七层的网络层，采用组播地址224.0.0.14和224.0.0.15两个组波段，由于其较高的拓展性与高速收敛，被大多数运营商网络所使用起源 ISIS最初是由国际…...

编程日记 2025/9/13 17:40:51

如何使用useContext进行全局状态管理？

在 React 中，使用 useContext 进行全局状态管理是一种有效的方法，尤其在需要在多个组件之间共享状态时。useContext 允许你在组件树中传递数据，而无需通过每个组件的 props 逐层传递。以下是关于如何使用 useContext 进行全局状态管理的详细指…...

编程日记 2025/9/13 17:35:12

docker容器网络配置及常用操作

Linux内核实现名称空间的创建 ip netns（网络名称空间）命令可以借助ip netns命令来完成对 Network Namespace 的各种操作。ip netns命令来自于iproute安装包，一般系统会默认安装，如果没有的话，请自行安装。注意&am…...

编程日记 2025/9/13 17:32:56

GMII（Gigabit Media Independent Interface）详解

一、GMII的定义与作用 GMII（千兆介质无关接口）是用于千兆以太网（1Gbps）的标准化接口，连接 MAC层（数据链路层）与 PHY芯片（物理层）。其核心目标是支持高速数据传输&#x…...

编程日记 2025/9/13 17:41:43

Wireshark Lua 插件教程

本⽂主要介绍 Lua 脚本在 Wireshark 中的应⽤, Lua 脚本可以在 Wireshark 中完成如下功能: 从⽹络包中提取数据, 或者统计⼀些数据包(Dumper) 需要解析⼀种 Wireshark 不提供原⽣⽀持的协议(Dissector) ⽰例协议解析 VREP 协议是 NOGD 框架对于 TRIP 协议的⼀种延伸和扩展…...

编程日记 2025/9/9 22:44:45

【多模态大模型】GLM-4-Voice端到端语音交互机器人VoiceAI

写在前面：开源选手中最能打的 GLM-4-Voice，由智谱 AI 和清华大学共同研发，并发表论文 “GLM-4-Voice: Towards Intelligent and Human-Like End-to-End Spoken Chatbot”，旨在打造智能且类人化的端到端语音聊天机器人。GLM-4-Voi…...

编程日记 2025/9/13 14:55:42

Unity 列表滚动到指定位置

使用场景策划提出需求：当玩家打开领奖界面时，奖励列表需要自动滑动到可以领奖的奖励栏处或者正在进行的任务栏处。思路 1、将Content设置好对齐方式和锚点子物体的预制体和Content：pivot轴心点设置为(0,1),并且设置为左上角对齐。 2、主…...

编程日记 2025/9/9 0:31:56

使用Crawlee可破题js渲染采集数据

使用 Crawlee 实现自动化爬虫流程 1. Crawlee 简介 Crawlee 是一个强大的爬虫框架，用于快速构建和维护可靠的爬虫。它支持多种爬虫类型，包括基于 Cheerio 和 Playwright 的爬虫，能够高效处理静态和动态网页。 2. 项目目标通过自动化脚本实…...

编程日记 2025/9/12 20:36:42

小红的字母游戏（A组）

链接：登录—专业IT笔试面试备考平台_牛客网来源：牛客网题目描述小红有一个长度为 nnn 的字符串 sss，仅包含小写字母，小红可以选出 kkk 个字符，组成一个新的字符串 ttt，对于 ttt 的每一个字符 tit_it…...

编程日记 2025/9/9 8:51:43

创建线程 HANDLE m_hThread; m_hThread CreateThread(NULL, 0, save_snapshot, (LPVOID)this, 0, &iThreadId);开启线程循环等待 DWORD WINAPI save_snapshot(LPVOID pVoid) {while (true){//持续循环等待事件到达。接收到事件信号后才进入if。if (::WaitForSingleObjec…...

编程日记 2025/9/10 20:55:48

目标检测YOLO实战应用案例100讲-面向无人机图像的小目标检测

目录知识储备 YOLO v8无人机拍摄视角小目标检测数据集结构环境部署说明安装依赖模型训练权重和指标可视化展示训练 YOLOv8 PyQt5 GUI 开发主窗口代码 main_window.py 使用说明无人机目标跟踪一、目标跟踪的基本原理二、常用的目标跟踪算法基于YOLOv…...

编程日记 2025/9/11 13:08:20

【Java分布式】Nacos注册中心

Nacos注册中心 SpringCloudAlibaba 也推出了一个名为 Nacos 的注册中心，相比 Eureka 功能更加丰富，在国内受欢迎程度较高。官网：https://nacos.io/zh-cn/ 集群 Nacos就将同一机房内的实例划分为一个集群，一个服务可以包含多个集…...

编程日记 2025/9/11 16:10:07

VSCode轻松调试运行.Net 8.0 Web API项目

1.背景我一直都是用VS来开发.NetCore项目的，用的比较顺手，也习惯了。看其他技术文章有介绍VS Code更轻量，更方便。所以我专门花时间来使用VS Code，看看它是如何调试代码、如何运行.Net 8.0 WebAPI项目。这篇文章是一个记录的过程…...

编程日记 2025/9/9 11:28:11

PageHelper新发现

PageHelper 背景解决reasonablepageSizeZero 背景今天发现了一个很有趣的现象，接手一个很老的项目springmvc项目、使用PageHelper分页实现常见的后端接口分页功能。但是发现当页码参数大于实际的页码数时、正常不应该返回数据，但是目前确一直返回数据不…...

编程日记 2025/9/8 5:10:42

python编写liunx服务器登陆自动巡检脚本

前言： 用户需要一份用Python编写的Linux系统巡检脚本，检查内存、磁盘、CPU使用率，还有网络连通性。首先，我得确定用户的使用场景。可能用户是系统管理员，需要定期监控服务器状态，确保系统正常运行。或者…...

编程日记 2025/9/11 8:57:32

基于 Flink CDC YAML 的 MySQL 到 Kafka 流式数据集成

本教程的演示都将在 Flink CDC CLI 中进行，无需一行 Java/Scala 代码，也无需安装 IDE。这篇教程将展示如何基于 Flink CDC YAML 快速构建 MySQL 到 Kafka 的 Streaming ELT 作业，包含整库同步、表结构变更同步演示和关键参数介绍。准备阶段…...

编程日记 2025/9/10 17:16:25

数据结构——并查集

AcWing - 算法基础课 Acwing——合并集合代码如下： #include <bits/stdc.h>using namespace std; #define fs first #define sc second #define endl \n #define all(x) x.begin(), x.end() typedef long long ll; typedef pair<int, int> PII;cons…...

编程日记 2025/9/12 20:56:15

详细解析d3dx9_27.dll丢失怎么办？如何快速修复d3dx9_27.dll

运行程序时提示“d3dx9_27.dll文件缺失”，通常由DirectX组件损坏或文件丢失引起。此问题可通过系统化修复方法解决，无需重装系统或软件。下文将详细说明具体步骤及注意事项。一.d3dx9_27.dll缺失问题的本质解析当系统提示“d3dx9_27.dll丢失”时&…...

编程日记 2025/9/12 15:23:45

【STL】4.＜list＞

list 前言list容器一.list初始化二.常用函数三.排序总结前言 stl系列主要讲述有关stl的文章，使用STL可以大大提高程序开发的效率和代码的可维护性，且在算法比赛中，STL可以帮助我们更方便地实现各种算法。提高我们的效率。 list容器要使用…...

编程日记 2025/9/9 17:37:35

小程序中头像昵称填写

官方文档参考小程序用户头像昵称获取规则调整公告新的小程序版本不能通过wx.getUserProfile和wx.getUserInfo获取用户信息 <van-field label"{{Avatar}}" label-class"field-label" right-icon-class"field-right-icon-class"input-class&…...

编程日记 2025/9/10 6:05:06

vLLM服务设置开机自启动（Linux）

要在开机时进入指定的 conda 环境并启动此 vllm 服务，您可以通过以下步骤设置一个 systemd 服务来自动执行脚本。一、第一步：创建一个启动脚本 1.打开终端并创建启动脚本，例如 /home/username/start_vllm.sh（请替换 username 为…...

编程日记 2025/9/9 22:56:21

Cherno 游戏引擎笔记（91~111）

好久不见！ 个人库的地址：（GitHub - JJJJJJJustin/Nut: The game_engine which learned from Cherno），可以看到我及时更新的结果。 -------------------------------Saving & Loading scene-----------------------…...

编程日记 2025/9/9 12:09:45

面试八股文--数据库基础知识总结(1)

1、数据库的定义数据库（DataBase，DB）简单来说就是数据的集合数据库管理系统（Database Management System，DBMS）是一种操纵和管理数据库的大型软件，通常用于建立、使用和维护数据库。数据库系统…...

编程日记 2025/9/9 8:38:02

算法系列之动态规划

动态规划（Dynamic Programming，简称DP）是一种用于解决复杂问题的算法设计技术。它通过将问题分解为更小的子问题，并存储这些子问题的解来避免重复计算，从而提高算法的效率。本文将介绍动态规划的基本概念、适用场景、复…...

编程日记 2025/9/12 21:53:45

网站漏洞安全测试具体渗透思路分析

渗透测试这些是经常谈到的问题了，我觉得当有了渗透接口测试之后你就会发现渗透测试这一方面也就是：1.基本漏洞测试；2.携带"低调"构思的心血来潮；3.锲而不舍的信念。我们在对网站，APP进行渗透测试的过程中会发…...

编程日记 2025/9/6 20:11:06

Spring Boot（七）：Swagger 接口文档

1. Swagger 简介 1.1 Swagger 是什么？ Swagger 是一款 RESTful 风格的接口文档在线自动生成功能测试功能软件。Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。目标是使客户端和文件系统作为服务器以同样的…...

编程日记 2025/9/9 18:07:54

【Mac电脑本地部署Deepseek-r1：详细教程与Openwebui配置指南】

文章目录前言电脑配置：安装的Deepseek版本：使用的UI框架：体验效果展示：本地部署体验总结部署过程Ollama部署拉取模型运行模型Openwebui部署运行Ollama服务在Openwebui中配置ollama的服务后话前言 deepseek最近火的一塌糊涂&a…...

编程日记 2025/9/11 23:03:14

测试的BUG分析

在了解BUG之前,我们要先了解软件测试的生命周期,因为大多数BUG都是在软件测试的过程中被发现的软件测试的生命周期在了解软件测试的生命周期之前,我们要先了解软件的生命周期 ,虽然他们之间只差了两个字,但是差距还是很大的首先是软件生命周期 ,这个是站在软件的角…...

编程日记 2025/9/10 8:20:41

linux里面的过滤符号 | 是如何实现的

ls -l | grep ".txt" 的实现过程涉及无名管道的创建、进程的创建（fork()）以及输入输出的重定向（dup2()）。以下是详细的实现步骤和代码示例： 实现步骤创建无名管道： 使用pipe()系统调用创建一个无…...

编程日记 2025/9/8 20:26:31

结构型模式--组合模式

概念组合人模式是结构型设计模式的一种，主要是用于解决代码中出现类像树一样进行组合而出现的组合结构的相关操作问题。使其树中的任意一个节点（无论是子节点还是父节点）都可以使用同一套接口进行操作。使用场景 1、如果希望我们对象组合…...

编程日记 2025/9/13 4:59:55

drupal可以自动将测试环境的网页部署到生产环境吗

在 Drupal 中，自动将测试环境的网页部署到生产环境通常是通过设置合适的开发和部署流程来实现的。这种自动化部署过程通常涉及以下几个步骤： 1. 版本控制（Git） 为了保证测试环境和生产环境的一致性，首先需要使用 Git…...

编程日记 2025/9/7 22:23:04

Android应用app实现AI电话机器人接打电话

Android应用app实现AI电话机器人接打电话 --安卓AI电话机器人一、前言【Dialer3.0智能拨号器】Android版手机app，由于采用蓝牙电话的方式来调用手机SIM卡发起呼叫、接听来电，并接收和处理通话的声音，通常我们以“蓝牙电话方案”来称呼它。 …...

编程日记 2025/9/10 13:52:41

【面试宝典】Java中创建线程池的几种方式以及区别

强烈推荐前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站:人工智能创建线程池有多种方式，主要通过 Java 的 java.util.concurrent 包提供的 Executors 工具类来实现。以下是几…...

编程日记 2025/9/11 10:10:58

【数据结构】哈希表

目录哈希表基本思想基本原理哈希表工作机制简化描述关于查找、插入和删除 HashMap 主要成员变量主要方法内部实现细节注意事项哈希表哈希表是一种基于哈希函数的数据结构，它通过键值对的形式存储数据，并允许通过键快速查找对应的值…...

编程日记 2025/9/11 22:48:20

MySQL 使用 `WHERE` 子句时 `COUNT(*)`、`COUNT(1)` 和 `COUNT(column)` 的区别解析

文章目录 1. COUNT() 函数的基本作用2. COUNT(*)、COUNT(1) 和 COUNT(column) 的详细对比2.1 COUNT(*) —— 统计所有符合条件的行2.2 COUNT(1) —— 统计所有符合条件的行2.3 COUNT(column) —— 统计某一列非 NULL 的记录数 3. 性能对比3.1 EXPLAIN 分析 4. 哪种方式更好&…...

编程日记 2025/9/9 16:39:58

RabbitMQ系列（一）架构解析

RabbitMQ 架构解析 RabbitMQ 是一个基于 AMQP 协议的开源消息中间件，其核心架构通过多组件协作实现高效、可靠的消息传递。以下是其核心组件与协作流程的详细说明： 一、核心组件与功能 Broker（消息代理服务器） RabbitMQ 服务端核…...

编程日记 2025/9/11 9:31:45

如何让传统制造企业从0到1实现数字化突破？

随着全球制造业不断向智能化、数字化转型，传统制造企业面临着前所未有的机遇与挑战。数字化转型不仅是技术的革新，更是管理、文化、业务流程等全方位的变革。从零开始，如何带领一家传统制造企业走向数字化突破，是许多企业领导者面…...

编程日记 2025/9/9 1:49:35

基于Spring Boot的二手物品交易平台设计与实现（LW+源码）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/9/13 15:48:41

释放 Cursor 的全部潜能：快速生成智能 Cursor Rules

释放 Cursor 的全部潜能：使用 PromptCoder 从 package.json 快速生成智能 Cursor Rules 我们将深入探讨如何利用您项目中的 package.json 文件，轻松生成 Cursor Rules，并通过 PromptCoder 这个强大的工具，快速创建高质量的 curso…...

编程日记 2025/9/11 4:13:38

C#高级：结合Linq的SelectMany方法实现笛卡尔积效果

一、笛卡尔积定义又称直积，表示为X Y，第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员二、基础示例 class Program {static void Main(string[] args){try{List<List<string>> input new List<List<string&g…...

编程日记 2025/9/11 0:37:12

【洛谷入门赛】B4018 游戏与共同语言

题意这里有两个队伍分别叫 A 和 B。分别给定这两个队伍的胜利数、净胜局、平局数量。求哪个队更厉害，就输出哪个。具体比较规则如下： 两队中胜利数高的队伍更厉害。若胜利数相同，净胜数高的队伍更厉害。若净胜数仍然相同&#x…...

编程日记 2025/9/11 9:31:48

Python学习总结

客户端与服务端聊天窗口服务端导入 wxPython 用于创建图形界面。 socket 用于网络通信，AF_INET 是 IPv4 地址族，SOCK_STREAM 表示流式套接字（TCP）。利用wxPython 创建图形界面，并通过 socket 与服务器通信。主要…...

编程日记 2025/9/8 12:12:41

android系统_模拟ZygoteServer写一个socket通信

目录一,模拟ZygoteServer 二,Client 代表app 三,输出结果四,结束语一,模拟ZygoteServer ZygoteServer，不断的监听来自客户端的请求 package org.study.tiger;import java.io.*; import java.net.*; import java.util.concurrent.*;import java.io.*; impor…...

编程日记 2025/9/8 4:12:36

一、React 简介

1.什么是 React

2.React 核心特性

二、环境搭建

1. 创建 React 项目

项目结构解析

2.关键配置

三、核心概念

1. JSX 语法

表达式嵌入

样式处理

2. 组件 (Component)

3. 状态 (State) 与属性 (Props)

4. 事件处理

合成事件（SyntheticEvent)

5. 条件渲染

三元表达式

短路运算

6. 列表渲染

四、Hooks（函数组件的核心）

1. useState

基础用法

复杂对象管理

2. useEffect

3. 其他常用 Hooks

五、组件通信

1. 父传子：通过 Props

2. 子传父：通过回调函数

六、路由管理（使用 React Router）

1. 安装

2. 基础配置

七、状态管理（使用 Context API）

1. 创建 Context

八、进阶学习方向

九、官方资源

相关文章：

1. `useState`

`基础用法`

2. `useEffect`