React 高级特性与最佳实践
在掌握了 React 的基础知识后,我们可以进一步探索 React 的高级特性和最佳实践。这些特性将帮助你构建更高效、可维护和可扩展的 React 应用。本文重点介绍 Hooks、Context、Refs 和高阶组件等核心高级特性。
1. Hooks:函数组件的强大工具
Hooks 是 React 16.8 引入的新特性,允许你在函数组件中使用状态和其他 React 特性。
useState
useState
用于在函数组件中添加状态。
import React, { 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
useEffect
用于在函数组件中执行副作用操作(如数据获取、订阅等)。
import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
2. Context:跨组件传递数据
Context 提供了一种在组件树中传递数据的方法,而不必手动在每个层级传递 props。
const ThemeContext = React.createContext('light');function ThemedButton() {return (<ThemeContext.Consumer>{theme => <button className={theme}>I am styled by theme context!</button>}</ThemeContext.Consumer>);
}function App() {return (<ThemeContext.Provider value="dark"><ThemedButton /></ThemeContext.Provider>);
}
3. Refs:访问 DOM 节点
Refs 提供了一种访问 DOM 节点或 React 元素的方式。
class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {this.myRef.current.focus();}render() {return <input type="text" ref={this.myRef} />;}
}
4. 高阶组件(HOC):复用组件逻辑
高阶组件是一个函数,接受一个组件并返回一个新的组件。它用于复用组件逻辑。
function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state = {data: selectData(DataSource, props)};}componentDidMount() {DataSource.addChangeListener(this.handleChange);}componentWillUnmount() {DataSource.removeChangeListener(this.handleChange);}handleChange = () => {this.setState({data: selectData(DataSource, this.props)});}render() {return <WrappedComponent data={this.state.data} {...this.props} />;}};
}
5. 渲染属性(Render Props):共享代码
渲染属性是一种在组件之间共享代码的技术,通过一个值为函数的 prop 来实现。
class DataProvider extends React.Component {state = {data: 'Some data'};render() {return this.props.render(this.state);}
}function App() {return (<DataProvider render={data => (<h1>{data}</h1>)}/>);
}
6. React Router:实现路由
React Router 是一个用于在 React 应用中实现路由的库。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';function App() {return (<Router><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></Router>);
}
7. Redux:状态管理
Redux 是一个状态管理库,通常与 React 一起使用。它提供了一个全局的状态容器,使得状态管理更加可预测和可维护。
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';// Action
const increment = () => ({ type: 'INCREMENT' });// Reducer
const counter = (state = 0, action) => {switch (action.type) {case 'INCREMENT':return state + 1;default:return state;}
};// Store
const store = createStore(counter);// Component
function Counter({ count, increment }) {return (<div><p>{count}</p><button onClick={increment}>Increment</button></div>);
}// Connect
const mapStateToProps = state => ({ count: state });
const mapDispatchToProps = { increment };
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);// App
function App() {return (<Provider store={store}><ConnectedCounter /></Provider>);
}
8. React Testing:测试组件
React 提供了测试工具和库来测试组件的行为和输出。
import { render, screen } from '@testing-library/react';
import App from './App';test('renders learn react link', () => {render(<App />);const linkElement = screen.getByText(/learn react/i);expect(linkElement).toBeInTheDocument();
});
9. React Portals:渲染到 DOM 层次结构之外
Portals 提供了一种将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点的方式。
function Modal({ children }) {return ReactDOM.createPortal(<div className="modal">{children}</div>,document.getElementById('modal-root'));
}
10. Error Boundaries:捕获错误
错误边界是 React 组件,用于捕获子组件树中的 JavaScript 错误,并显示备用 UI。
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {logErrorToMyService(error, errorInfo);}render() {if (this.state.hasError) {return <h1>Something went wrong.</h1>;}return this.props.children;}
}
11. React Fragments:分组子元素
Fragments 允许你将多个子元素分组,而无需向 DOM 添加额外的节点。
function Columns() {return (<React.Fragment><td>Hello</td><td>World</td></React.Fragment>);
}
12. React.memo:优化渲染性能
React.memo
是一个高阶组件,用于优化函数组件的渲染性能,避免不必要的重新渲染。
const MyComponent = React.memo(function MyComponent(props) {/* render using props */
});
13. useReducer:复杂状态逻辑
useReducer
是 useState
的替代方案,适用于复杂的状态逻辑。
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></>);
}
14. useCallback 和 useMemo:性能优化
useCallback
和 useMemo
用于优化函数组件的性能。
useCallback
const memoizedCallback = useCallback(() => {doSomething(a, b);
}, [a, b]);
useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
15. React.lazy 和 Suspense:动态加载组件
React.lazy
允许你动态加载组件,Suspense
用于在组件加载时显示备用内容。
const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {return (<React.Suspense fallback={<div>Loading...</div>}><OtherComponent /></React.Suspense>);
}
16. React.StrictMode:突出潜在问题
React.StrictMode
是一个用于突出显示应用中潜在问题的工具。
function App() {return (<React.StrictMode><div><ComponentOne /><ComponentTwo /></div></React.StrictMode>);
}
17. React 18 新特性
React 18 引入了并发渲染、自动批处理、新的根 API 等新特性。
import { createRoot } from 'react-dom/client';const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
结语
本文深入探讨了 React 的高级特性,包括Hooks、Context、Refs、高阶组件、渲染属性、路由管理和状态管理、路由管理、状态管理、测试、Portals、错误边界和性能优化工具。通过掌握这些技术,你将能够构建更高效、可维护和可扩展的 React 应用。继续学习和实践,你将充分发挥 React 的强大功能!
相关文章:
React 高级特性与最佳实践
在掌握了 React 的基础知识后,我们可以进一步探索 React 的高级特性和最佳实践。这些特性将帮助你构建更高效、可维护和可扩展的 React 应用。本文重点介绍 Hooks、Context、Refs 和高阶组件等核心高级特性。 1. Hooks:函数组件的强大工具 Hooks 是 Rea…...
考研数据结构之图(一)(包含真题及解析)
考研数据结构之图的存储与基本操作:邻接矩阵、邻接表、十字链表、邻接多重表 图(Graph)是数据结构中的重要非线性结构,广泛应用于网络路由、社交关系分析等领域。本文将详细讲解图的四种主要存储方式——邻接矩阵法、邻接表法、十…...
Qt QML实现Windows桌面颜色提取器
前言 实现一个简单的小工具,使用Qt QML实现Windows桌面颜色提取器,实时显示鼠标移动位置的颜色值,包括十六进制值和RGB值。该功能在实际应用中比较常见,比如截图的时候,鼠标移动就会在鼠标位置实时显示坐标和颜色值&a…...
2025 年网络安全的挑战与机遇
2024 年是网络安全领域风云变幻的一年。从备受瞩目的勒索软件攻击所带来的影响,到人工智能工具日益商品化,挑战不断增加。 关键基础设施的漏洞变得极为明显,身份盗窃次数也达到了前所未有的程度。然而,在这一片混乱之中ÿ…...
Vue 3 中 ref和reactive的详细使用场景
一、核心区别 特性refreactive数据类型基本类型 对象/数组(自动解包)仅对象/数组响应式原理通过 .value 触发响应直接代理对象模板中使用自动解包(无需 .value)直接访问属性解构/传递保持响应性需用 toRefs 保持响应性 二、使用…...
react使用createFromIconfontCN,自定义iconfont 图标
记录reactantdesign项目中使用createFromIconfontCN,自定义iconfont 图标 效果图: import { createFromIconfontCN } from ant-design/icons;const MyIcon createFromIconfontCN({scriptUrl: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js, // 在 icon…...
危化品经营单位安全生产管理人员备考要点
危化品经营单位安全生产管理人员备考要点 📌 考试核心内容 ✅ 必考法规: 《危险化学品安全管理条例》重点条款(如经营许可条件) GB 18218-2018《重大危险源辨识》新标准 安全生产法律责任(罚款金额/刑事责任&…...
音频炼金术:Threejs 让 3D 场景「听」起来更真实
在 Three.js 中允许在场景中添加声音,将声音与 3D 对象关联,实现更丰富的交互体验。 Audio Three.js 中的Audio对象用于表示音频源,它是一个THREE.Object3D的子类,用于控制音频播放、暂停、是否循环等设置的对象,可以…...
【C++】Stack和Queue的底层封装和实现
目录 stack容器适配器stack的模拟实现 queue的模拟实现deque了解deque的结构deque的管理方式和遍历元素方式deque的缺陷为啥库里面的stack和queue使用deque end stack 容器适配器 Stack可以封装成前面三个变量的形式,但是这里我们提出一个概念叫容器适配器…...
Vue3 SSR 工程化实践:日常工作中的性能优化与实战技巧
一、流式渲染与分块传输(面向性能的关键优化) 1.1 流式响应基础实现 // Node.js Express 示例(Vite SSR同理)import { renderToWebStream } from vue/server-rendererapp.get(/, async (req, res) > { res.setHeader(Conten…...
【Python进阶】字符串操作全解与高效应用
目录 前言:技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块技术选型对比 二、实战演示环境配置要求核心代码实现(10个案例)案例1:基础操作案例2:高效格式化…...
LeetCode[28]找出字符串中第一个匹配项的下标(KMP版本)
思路: 一开始我使用暴力过的,但是感觉还是不完美,想学习一下KMP的写法,所以这篇笔记就来了,首先KMP算法就要先维护一个最长相等前后缀的一个数组(统称前缀表),那么这个数组为什么能找…...
Cesium实现雨、闪电、雪、雾天气效果
基于 Cesium 的三维地理信息场景,集成了天气效果后处理、3D 模型加载、水域渲染等功能。以下是详细功能总结: 1. 场景初始化与基础配置 三维地球初始化 创建 Cesium Viewer 实例,隐藏默认控件(时间轴、动画控件等)&…...
上门送水小程序区域代理模块框架设计
一、逻辑分析 代理申请流程: 潜在代理商通过小程序提交代理申请,需要填写个人或企业基本信息、联系方式、期望代理区域等。系统收到申请后,进行初步审核,检查信息的完整性和合规性。运营人员进行人工审核,根据公司政策…...
GIS开发笔记(6)结合osg及osgEarth实现半球形区域绘制
一、实现效果 输入中心点坐标及半径,绘制半球形区域,地下部分不显示。 二、实现原理 根据中心点及半径绘制半球形区域,将其挂接到地球节点。 三、参考代码 void GlobeWidget::drawSphericalRegion(osg::Vec3d point,double radius) {// 使…...
UE5在场景3D物体上播放本地视频(带声音)
UE5在场景3D物体上播放本地视频(带声音) 0.在Map中创建一个立方体,调整大小看起来像屏幕一样 1.创建文件夹Movies在根目录下 2.把准备的视频复制到Movies文件夹下 3.把Movies文件夹下的视频拖入到UE自己创建的文件夹下,此时会有个文件媒体源…...
安装部署RabbitMQ
一、RabbitMQ安装部署 1、下载epel源 2、安装RabbitMQ 3、启动RabbitMQ web管理界面 启用插件 rabbitmq数据目录 创建rabbitmq用户 设置为管理员角色 给用户赋予权限 4、访问rabbitmq...
STM32启动流程详解
STM32启动流程详解 本文档详细介绍STM32微控制器从上电到main函数执行的完整启动流程。 1. 上电与复位过程 当STM32芯片上电或复位时,硬件会执行以下步骤: 上电复位(POR)/低电平复位(PDR): 芯片接通电源或NRST引脚置低时触发初始PC值设置: 程序计数器…...
【正点原子STM32MP257连载】第四章 ATK-DLMP257B功能测试——CPU温度CPU主频
1)实验平台:正点原子ATK-DLMP257B开发板 2)浏览产品:https://www.alientek.com/Product_Details/135.html 3)全套实验源码手册视频下载:正点原子资料下载中心 第四章 ATK-DLMP257B功能测试——CPU主频&…...
LVDS系列8:Xilinx 7系可编程输入延迟(一)
在解析LVDS信号时,十分重要的一环就是LVDS输入信号线在经过PCB输入到FPGA中后,本来该严格对齐的信号线会出现时延,所以需要在FPGA内部对其进行延时对齐后再进行解析。 Xilinx 7系器件中用于输入信号延时的组件为IDELAYE2可编程原语࿰…...
iotdb时序数据库使用
iotdb https://github.com/apache/iotdb.git 安装maven3.9.6以上版本执行编译 iotdb启动,使用安装包sbin目录下的start-standalone.bat sbin\start-standalone.bat 执行报错如果是内存问题,可以在对应的node配置中修改,如conf\datanode-ev…...
【Caddy】:现代化、自动 HTTPS 的 Web 服务器新星
🚀 Caddy:现代化、自动 HTTPS 的 Web 服务器新星! 在构建和部署 Web 应用时,你可能听说过或用过如 Nginx、Apache 等经典的 Web 服务器。但在今天,有一个越来越受欢迎的新选择——Caddy。 本文将带你认识 Caddy&…...
用 DeepSeek 精准解析,PDF 一键转电子书!
经常需要阅读大量的 PDF 文档,但在移动设备上阅读 PDF 通常体验极差。屏幕小、排版固定,需要不断放大缩小,眼睛容易疲劳,长时间阅读简直是一种折磨。 虽有不少 PDF 转换工具,但对扫描书籍支持不佳,经常丢失…...
【AIoT】智能硬件GPIO通信详解(二)
前言 上一篇我们深入解析了智能硬件GPIO通信原理(传送门:【AIoT】智能硬件GPIO通信详解(一))。接下来,我们将结合无人售货机控制场景,通过具体案例进一步剖析物联网底层通信机制的实际应用。 在智能零售领域,无人售货机通过AI技术升级为智能柜,其设备控制的底层通信…...
Mac OS系统下kernel_task占用大量CPU资源导致系统卡顿
CPU负载突然飙升,如截图: 根本原因,大家从各种博主上已知晓,现在提供自己的解决办法,亲测有效 一、设置开机自动禁用温度管理守护进程 1.创建脚本文件 mkdir -p ~/Scripts touch ~/Scripts/disable_thermald.sh …...
镜舟科技助力某大型电网企业破解数据架构升级难题,打造国产化湖仓标杆
在 “十四五” 规划全面推进国产化替代的背景下,某大型电网企业联合镜舟科技与腾讯云,基于全球领先的开源分析型数据库 StarRocks 及腾讯 TBDS 大数据平台,构建电力行业国产化湖仓一体架构。该项目实现 PB 级电力数据的统一管理,为…...
Linux内核内存管理单元 详解Linux 内核伙伴系统(Buddy System)的快速路径分配函数get_page_from_freelist
一、函数核心作用 get_page_from_freelist 是 Linux 内核伙伴系统(Buddy System)的快速路径分配函数,负责从指定的内存区域(Zone)中高效分配连续的物理内存页。其核心逻辑是遍历允许的 Zone 列表,检查水位…...
网络原理 - 初识网络 2
目录 OSI 七层协议 TCP / IP 五层模型 网络设备所在分层 网络分层对应 封装和分用(网络传输数据过程中,最核心的流程) 用一个具体例子来梳理以下封装和分用的过程 封装 1. 应用层(应用程序) -- QQ 2. 传输层 …...
如何利用GM DC Monitor快速监控一台网络类设备
GM DC Monitor v2.0在网络类设备监控的效率非常高! 如果您需要管理运维大量的网络类设备,GM DC Monitor是个不错的选择。 如果您具备一定的采集脚本编写能力,可以在平台的定制属于自己的监控模板! 1)首先建立数据中…...
类和对象终
一、初始化列表 再谈构造函数 我们之前实现构造函数的时候,初始化成员变量在函数体内赋值的,构造函数还有一种初始化方式,就是初始化列表 我们先实现一个栈来举例: // 实现一个栈 typedef int DataType; class Stack { public:…...
教程:批量提取图片pdf固定位置文字然后保存为新的文件名,基于Python和阿里云的实现方案
一、项目背景 在实际工作和生活中,存在大量需要对图片或 PDF 进行批量处理的场景。例如,在档案管理中,工作人员可能会扫描大量文件,生成图片或 PDF 格式的档案资料。这些资料通常包含特定位置的关键信息,如文件编号、日期等。通过批量提取这些关键信息并将其作为文件名,…...
JVM:堆、方法区
一、堆 概念:堆用于存储对象和数组,主要分为新生代和老年代,新生代又细分为伊甸园区、幸存者 0 区(S0)和幸存者 1 区(S1)内存设置:可用 -Xmx 和 -Xms 设置堆内存大小,-X…...
JVM-基于Hotspot
前言 Java虚拟机(Java Virtual Machine简称JVM)是运行所有Java程序的抽象计算机,是Java语言的运行环境,其主要任务为将字节码装载到内部,解释/编译为对应平台上的机器指令执行。 Java虚拟机规范定义了一个抽象的——…...
Android 10.0 第三方Launcher设置默认Launcher后导致Recent最近任务键无效
1.前言 在10.0的系统rom定制化开发中,在进入launcher的定制过程中,在某些产品中,需要设置第三方launcher为默认Launcher功能, 所以在设置以后,会发现最近recent键无效,所以接下来需要分析相关流程来实现相关功能的实现 2.第三方Launcher设置默认Launcher后导致Recent最…...
状态模式详解与真实场景案例(Java实现)
模式定义 状态模式(State Pattern) 允许对象在其内部状态改变时改变它的行为,使对象看起来像是修改了它的类。属于行为型设计模式,核心思想是将状态抽象为独立对象,不同状态下行为封装在不同状态类中。 解决的问题 …...
uniapp-商城-26-vuex 使用流程
为了能在所有的页面都实现状态管理,我们按照前面讲的页面进行状态获取,然后再进行页面设置和布局,那就是重复工作,vuex 就会解决这样的问题,如同类、高度提炼的接口来帮助我们实现这些重复工作的管理。避免一直在造一样的轮子。 https://vuex.vuejs.org/zh/#%E4%BB%80%E4…...
科技快讯 | 智谱开源最新GLM模型系列;“AI 洗头店”现身广州;ChatGPT上线图库功能
智谱开源最新GLM模型系列,启用全球域名“Z.ai” 4月15日,智谱开源最新GLM模型系列,包括32B和9B尺寸,涵盖基座、推理、沉思三类模型,全部遵循MIT开源许可协议。推理模型GLM-Z1-32B-0414实测推理速度达200 tokens/秒&…...
LeetCode 2537.统计好子数组的数目:滑动窗口(双指针)
【LetMeFly】2537.统计好子数组的数目:滑动窗口(双指针) 力扣题目链接:https://leetcode.cn/problems/count-the-number-of-good-subarrays/ 给你一个整数数组 nums 和一个整数 k ,请你返回 nums 中 好 子数组的数目。 一个子数组 arr 如果…...
精益数据分析(1/126):从《精益数据分析》探寻数据驱动增长之道
精益数据分析(1/126):从《精益数据分析》探寻数据驱动增长之道 在当今数字化时代,数据无疑是企业发展的关键驱动力,对于竞争激烈的程序化广告行业更是如此。最近我在研读《精益数据分析》这本书,收获颇丰&…...
uniapp-商城-27-vuex 通用方法
1 概述 上节说了vuex 的基本使用方法,分析了基本的使用方法。 在使用中,常见使用,我们要针对状态,购物车,不同类事务的管理,如果按照上节课的通用方法,那么使用和维护是会很大的难度的。 所以这里就必须要进行处理,借助 modules 进行定义不同类事务的处理手段。便于…...
MetaLiveX:用AI重新定义直播互动的边界
“直播的核心价值,在于它能否让观众从‘旁观者’变为‘共創者’。”在近期一场数字技术峰会上,杜子程(Emma Zicheng Du)首次公开阐释了其团队研发的MetaLiveX平台核心理念。这一以AI为驱动的智能直播系统,正通过动态场景生成与情感化交互设计,重新定义虚拟社群的参与逻辑。目前…...
线程安全学习
1 什么是线程 线程是cpu调度的最小单位,在Linux 下 实现线程的方式为轻量级进程,复用进程的结构体,使用clone函数创建 2 线程安全 所谓线程安全,更确切的应该描述为内存安全 #include <stdio.h> #include <pthread.h…...
三层路由器,SSH远程登录访问路由器,通过telnet远程登录访问路由器(不安全),路由器的基本设置之多网络互联解决办法:单臂路由
三层路由器 默认路由器端口关闭:no shutdown (开启)需进入端口默认路由开启:无需 ip routing路由器充当网关,可以连接不同网络接口种类丰富,数量少 SSH远程登录访问路由器 记得设IP Would you like to e…...
分布式光伏电站运维难?Acrel-1000DP助力安全稳定运行
针对用户新能源接入后存在安全隐患、缺少有效监控、发电效率无法保证、收益计算困难、运行维护效率低等通点,提出的Acrel-1000DP分布式光伏监控系统平台,对整个用户电站全面监控,为用户实现降低能源使用成本、减轻变压器负载、余电上网&#…...
基于sherpa-onnx 安卓语音识别尝鲜
sherpa-onnx简介 Sherpa:是一个由 K2-FSA 团队 开发的 开源语音处理框架,旨在解决传统语音识别工具(如 Kaldi)在模型部署和跨平台适配中的复杂性问题。它通过整合现代深度学习技术和高效推理引擎,提供了从语音识别、合…...
利用 Python 和 AI 技术创作独特的图像艺术作品
1. 项目目标 生成艺术作品:利用 AI 模型(如 Stable Diffusion)生成具有艺术风格的图像。自定义风格:通过文本提示(prompt)控制图像的艺术风格(如赛博朋克、印象派、超现实主义等)。…...
Web自动化测试的详细流程和步骤
🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 Web自动化测试是软件测试中非常重要的一种测试方法,它通过编写脚本来模拟人工操作网页,从而实现对Web应用程序进行自动化测试的过程。为了保…...
记录一个坑关于STM32 ARM Compiler Version
在用 Keil 进行 STM32 开发的时候,一开始下载,下载的 ARM 编译器是 Version6,他就不兼容老的代码,就很抽象。 所以必须要更换编译器。 可以去官网下载编译器 Downloads - Arm Developer ,也可以自己找资源哈ÿ…...
TCP实现多线程远程命令执行
1.上一篇篇代码改进 bind的绑定第一个是对象,其余的都是参数,传给一个类需要this指针,所以有&r 错误地方是智能指针的参数要加&,thread.name()要删除 2.介绍需要用到函数 popen函数 FILE *popen(const char *command, …...
【MySQL】索引特性
文章目录 👉没有索引可能会有什么问题👈👉认识磁盘👈前置知识MySQL 与磁盘磁盘定位扇区结论磁盘随机访问与连续访问MySQL 与磁盘交互基本单位 👉MySQL 的整体轮廓👈👉索引的理解👈建…...