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

00 - React 基础

1. React 基础

安装react指令

可参考:

  • 官网
  • 官网使用教程

如:

npx create-react-app 项目名
如:npx create-react-app react-redux-pro

JSX

JSX 是一种 JavaScript 的语法扩展,类似于 XML 或 HTML,允许我们在 JavaScript 代码中编写 HTML。

const element = <h1>Hello, world!</h1>;

组件

组件是 React 应用的核心,可以是函数组件或类组件。

函数组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
类组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

Props

Props(属性)是组件间传递数据的方式。

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="Sara" />;

State

State 是组件内部的数据管理机制,只能在类组件和使用 Hook 的函数组件中使用。

类组件中的 State
class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };}render() {return <h2>It is {this.state.date.toLocaleTimeString()}.</h2>;}
}
函数组件中的 State
import { useState } from 'react';function Clock() {const [date, setDate] = useState(new Date());return <h2>It is {date.toLocaleTimeString()}.</h2>;
}

事件处理

React 的事件处理类似于 DOM 事件,但有一些语法差异。

function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked.');}return (<a href="#" onClick={handleClick}>Click me</a>);
}

2. 组件生命周期

类组件有一系列生命周期方法,可以在组件的不同阶段执行代码。

class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };}componentDidMount() {this.timerID = setInterval(() => this.tick(), 1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({date: new Date()});}render() {return <h2>It is {this.state.date.toLocaleTimeString()}.</h2>;}
}

3. React Hooks

Hooks 是 React 16.8 引入的新特性,使函数组件也能使用 state 和其他 React 特性。

useState

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useEffect

用于在函数组件中执行副作用操作(例如数据获取、订阅、手动 DOM 操作)。

import { useState, useEffect } from 'react';function Clock() {const [date, setDate] = useState(new Date());useEffect(() => {const timerID = setInterval(() => setDate(new Date()), 1000);return () => clearInterval(timerID);}, []);return <h2>It is {date.toLocaleTimeString()}.</h2>;
}

useContext

用于共享状态。

const MyContext = React.createContext();function MyProvider({ children }) {const [value, setValue] = useState('Hello, world!');return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}function MyComponent() {const value = useContext(MyContext);return <div>{value}</div>;
}

useReducer

用于管理复杂的 state 逻辑。

import { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></>);
}

自定义 Hook

自定义 Hook 是提取组件逻辑复用的机制。

import { useState, useEffect } from 'react';function useFriendStatus(friendID) {const [isOnline, setIsOnline] = useState(null);useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}// 假设这里有一个订阅好友状态的 API// ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);return () => {// ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);};}, [friendID]);return isOnline;
}function FriendStatus(props) {const isOnline = useFriendStatus(props.friend.id);if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';
}

4. Context API

Context 提供了一种在组件树中传递数据的方法,无需手动传递 props。

const ThemeContext = React.createContext('light');function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}function Toolbar() {return (<div><ThemedButton /></div>);
}function ThemedButton() {const theme = useContext(ThemeContext);return <button theme={theme}>Themed Button</button>;
}

5. React Router

用于处理 React 应用的路由。

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';function Home() {return <h2>Home</h2>;
}function About() {return <h2>About</h2>;
}function App() {return (<Router><div><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li></ul></nav><Switch><Route path="/about"><About /></Route><Route path="/"><Home /></Route></Switch></div></Router>);
}

6. 状态管理

Redux

Redux 是一个用于管理应用状态的库。

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';const initialState = { count: 0 };function reducer(state = initialState, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}const store = createStore(reducer);function Counter() {const count = useSelector((state) => state.count);const dispatch = useDispatch();return (<><div>{count}</div><button onClick={() => dispatch({ type: 'increment' })}>+</button>

相关文章:

00 - React 基础

1. React 基础 安装react指令 可参考&#xff1a; 官网官网使用教程 如&#xff1a; npx create-react-app 项目名 如&#xff1a;npx create-react-app react-redux-proJSX JSX 是一种 JavaScript 的语法扩展&#xff0c;类似于 XML 或 HTML&#xff0c;允许我们在 Java…...

基于WPF技术的换热站智能监控系统17--项目总结

1、项目颜值&#xff0c;你打几分&#xff1f; 基于WPF技术的换热站智能监控系统01--项目创建-CSDN博客 基于WPF技术的换热站智能监控系统02--标题栏实现-CSDN博客 基于WPF技术的换热站智能监控系统03--实现左侧加载动画_wpf控制系统-CSDN博客 基于WPF技术的换热站智能监…...

CI /CD学习

CI/CD概述 CI/CD 是持续集成和持续交付/部署的缩写&#xff0c;旨在简化并加快软件开发生命周期。 持续集成&#xff08;CI&#xff09;是指自动且频繁地将代码更改集成到共享源代码存储库中的做法。持续交付和/或持续部署&#xff08;CD&#xff09;是一个由两部分组成的过程…...

基于matlab的高斯滤波与图像去噪

1 高斯滤波原理 1.1 原理 高斯滤波是一种线性平滑滤波技术&#xff0c;主要用于消除图像中的高斯噪声。它的工作原理可以理解为对整幅图像进行加权平均的过程&#xff0c;即每个像素点的值都由其本身和邻域内的其他像素值经过加权平均后得到。 高斯滤波实质上是一种信号的滤…...

解决 uniapp h5 页面在私有企微iOS平台 间歇性调用uni api不成功问题(uni.previewImage为例)。

demo <template><view class"content"><image class"logo" src"/static/logo.png"></image><button click"previewImage">预览图片</button></view> </template><script> //打…...

Jenkins nginx自动化构建前端vue项目

在现代的Web开发中&#xff0c;Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目&#xff0c;使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署&#xff08;CI/CD&#xff09;工具&#xff0c;为我们提供了一种便捷的方…...

Devicetree - 删除某个节点或属性

在设备树&#xff08;devicetree&#xff09;中&#xff0c;删除语法用于从现有设备树中删除属性或节点。这通常在设备树覆盖文件&#xff08;DTS&#xff09;或片段文件中完成。该语法使用 /delete-property/ 和 /delete-node/ 指令。 以下是如何使用这些指令的示例&#xff1…...

Xcode will continue when the operation completes

Xcode 15后,连接手机经常出现 Preparing iPhone. Xcode will continue when the operation completes.记录一下解决办法。其他提示&#xff0c;Xcode连接不上手机也可以尝试通过这个方法解决。 注意:最好关闭科学上网再操作。 从Xcode取消iPhone的配对(右键单击 -Unpair Devi…...

Python爬虫-贝壳新房

前言 本文是该专栏的第32篇,后面会持续分享python爬虫干货知识,记得关注。 本文以某房网为例,如下图所示,采集对应城市的新房房源数据。具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。接下来,跟着笔者直接往下看正文详细内容。(附带完整代码) 正文 地…...

Canvas绘制图片和区域

如何使用Canvas在图片上绘制区域&#xff1f; 一. 首先&#xff0c;我们需要初始化三个canvas画布&#xff08;初始化Canvas&#xff09; initCanvas() {// 初始化canvas画布let canvasWrap document.getElementsByClassName("canvas-wrap");this.wrapWidth canva…...

Day10—Spark SQL基础

Spark SQL介绍 ​ Spark SQL是一个用于结构化数据处理的Spark组件。所谓结构化数据&#xff0c;是指具有Schema信息的数据&#xff0c;例如JSON、Parquet、Avro、CSV格式的数据。与基础的Spark RDD API不同&#xff0c;Spark SQL提供了对结构化数据的查询和计算接口。 Spark …...

开源技术:在线教育系统源码及教育培训APP开发指南

本篇文章&#xff0c;小编将探讨如何利用开源技术开发在线教育系统及教育培训APP&#xff0c;旨在为有志于此的开发者提供全面的指导和实践建议。 一、在线教育系统的基本构架 1.1架构设计 包括前端、后端和数据库三个主要部分。 1.2前端技术 在前端开发中&#xff0c;HTML…...

[C++][设计模式][观察者模式]详细讲解

目录 1.动机2.模式定义3.要点总结4.代码感受1.代码一1.FileSplitter.cpp2.MainForm.cpp 2.代码二1.FileSplitter.cpp2.MainForm.cpp 1.动机 在软件构建过程中&#xff0c;需要为某些对象建立一种“通知依赖关系” 一个对象(目标对象)的状态发生改变&#xff0c;所有的依赖对象…...

Adobe Acrobat 编辑器软件下载安装,Acrobat 轻松编辑和管理各种PDF文件

Adobe Acrobat&#xff0c;它凭借卓越的功能和丰富的工具&#xff0c;为用户提供了一个全面的解决方案&#xff0c;用于查看、创建、编辑和管理各种PDF文件。 作为一款专业的PDF阅读器&#xff0c;Adobe Acrobat能够轻松打开并展示各种格式的PDF文档&#xff0c;无论是文字、图…...

eVTOL飞机:技术挑战、应用机遇和运动的作用

最近&#xff0c;航空业的嗡嗡声围绕着电动空中出租车、空中拼车、无人驾驶航空货物运送等。这些概念都依赖于一类称为eVTOL的飞机&#xff0c;eVTOL是电动垂直起降的缩写。 与直升机类似&#xff0c;但没有噪音和排放&#xff0c;eVTOL可以在不需要简易机场的情况下飞行、悬停…...

【python】flask中如何向https服务器传输信息

【背景】 用flask做一个支持流媒体传输的网页,如何将信息post给流媒体服务器呢? 【方法】 简单例子,视图函数这么写: url = "https://yourip/mytext" headers = {Content-Type:application/octet-stream} @app.route(/,methods=["POST"...

计算机网络 —— 应用层(FTP)

计算机网络 —— 应用层&#xff08;FTP&#xff09; FTP核心特性&#xff1a;运作流程&#xff1a; FTP工作原理主动模式被动模式 我门今天来看应用层的FTP&#xff08;文件传输协议&#xff09; FTP FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#x…...

zookeeper + kafka消息队列

zookeeper kafka 消息队列 一、消息队列简介 1、什么是消息队列 消息队列&#xff08;Message Queue&#xff09;是一种用于跨进程或分布式系统中传递消息的通信机制。消息队列在异步通信、系统解耦、负载均衡和容错方面具有重要作用。 &#xff08;1&#xff09;特性 异步…...

Python高级编程:深度学习基础

Python高级编程:深度学习基础 在前几篇文章中,我们探讨了Python的基础语法、面向对象编程、标准库、第三方库、并发编程、异步编程、网络编程与网络爬虫、数据库操作与ORM、数据分析与数据可视化以及机器学习基础。在这篇文章中,我们将深入探讨Python在深度学习领域的应用。…...

如何从magento1迁移到magento2

m2相较m1 变化可以说非常大&#xff0c;相当于从头到位都改写一遍&#xff0c;更现代化&#xff0c;更优雅。除了数据库表变化不是很大。 主要迁移的内容有&#xff1a; 1&#xff0c;主题 2&#xff0c;插件(自己开发的或者第三方插件) 3&#xff0c;数据库 主题 不能迁移到m…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...