React 的 12 个核心概念
文章目录
- 一、JSX:逻辑与视图的桥梁
- 二、组件:模块化构建的核心
- 三、Props:单向数据流的基石
- 四、State:动态交互的核心
- 五、useEffect:副作用管理的利器
- 六、Context:跨层级数据共享的利器
- 七、React.memo:优化渲染的利器
- 八、useReducer:复杂状态管理的利器
- 九、Ref 和 forwardRef:DOM 操作与组件间通信
- 十、虚拟 DOM:高效渲染的核心
- 十一、React 和性能优化
- 十二、组件复用:设计原则与最佳实践
一、JSX:逻辑与视图的桥梁
JSX 并非简单的语法糖,而是 React 高效渲染能力的起点。它通过编译阶段将类似 HTML 的语法转换为 React.createElement 调用,使逻辑与视图能够自然融合。其背后的机制直接影响虚拟 DOM 的创建与更新效率。例如:
const element = <h1>Hello, React!</h1>;
被编译为:
const element = React.createElement('h1', null, 'Hello, React!');
理解这种转译机制有助于优化组件性能,尤其在处理复杂 UI 时,避免因 JSX 使用不当导致的渲染问题。
二、组件:模块化构建的核心
React 的一切皆是组件。它们既是 UI 的基本单元,也是逻辑复用的重要载体。函数组件因其轻量、高效和 Hooks 的支持,逐渐成为主流:
const MyComponent = ({ title }) => {const [count, setCount] = useState(0);return (<div><h1>{title}</h1><button onClick={() => setCount(count + 1)}>Count: {count}</button></div>);
};
通过合理划分组件,结合 props 和状态管理,我们可以构建解耦、高复用的系统。在大型应用中,组件分层与职责分离的设计尤为重要。
三、Props:单向数据流的基石
React 的单向数据流确保了组件间通信的清晰与可靠。props 是父组件向子组件传递数据的主要方式,通过精确控制 props 的内容和类型,可以提高代码的健壮性和可维护性。例如:
const Item = ({ name, onClick }) => (<li onClick={onClick}>{name}</li>
);const List = ({ items, onItemClick }) => (<ul>{items.map((item) => (<Item key={item.id} name={item.name} onClick={() => onItemClick(item)} />))}</ul>
);
通过类型检查工具(如 PropTypes 或 TypeScript),可以进一步强化 props 的类型约束。
四、State:动态交互的核心
相比于 props 的静态数据,state 是组件内部的动态引擎。状态管理不仅影响组件的交互性,还直接决定渲染逻辑的复杂度。例如:
const Counter = () => {const [count, setCount] = useState(0);return (<div><p>Current Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};
合理管理状态的生命周期,避免频繁更新或滥用 state,对性能优化至关重要。
五、useEffect:副作用管理的利器
useEffect 为函数组件注入了处理副作用的能力,例如数据获取、订阅和清理等。它的设计灵感来源于类组件的生命周期,但更灵活、精准。例如:
useEffect(() => {const subscription = subscribeToSomeService();return () => {subscription.unsubscribe();};
}, [dependency]);
通过合理设置依赖数组,可以避免不必要的重渲染,提高组件的运行效率。
六、Context:跨层级数据共享的利器
在复杂的组件树中,props drilling(层层传递)容易导致代码冗余和难以维护。React.createContext 提供了更优雅的解决方案,让数据能够在组件树中高效流动。例如:
const ThemeContext = React.createContext('light');const ThemeProvider = ({ children }) => {const [theme, setTheme] = useState('light');return (<ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>);
};const ThemedButton = () => {const { theme, setTheme } = useContext(ThemeContext);return (<buttonstyle={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>);
};
通过组合 Provider 和 useContext,我们可以在组件树的任意层级获取上下文数据,极大地提高了代码的可维护性和可扩展性。
七、React.memo:优化渲染的利器
对于性能敏感的应用,避免不必要的组件重新渲染尤为重要。React.memo 是一个高阶组件,用于缓存组件的渲染结果,从而提升性能。例如:
const ExpensiveComponent = React.memo(({ data }) => {console.log('Rendering...');return <div>{data}</div>;
});
结合 React.memo 和 useCallback,可以减少组件重渲染和避免闭包问题:
const ParentComponent = () => {const [count, setCount] = useState(0);const increment = useCallback(() => setCount((prev) => prev + 1), []);return (<div><button onClick={increment}>Increment</button><ExpensiveComponent data={count} /></div>);
};
记住,React.memo 仅适用于纯函数组件,且性能提升取决于实际使用场景。
八、useReducer:复杂状态管理的利器
当组件状态逻辑变得复杂,尤其涉及多种交互时,useReducer 提供了更清晰的管理方式。它类似于 Redux 的 reducer 概念:
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();}
}const Counter = () => {const [state, dispatch] = useReducer(reducer, initialState);return (<div><button onClick={() => dispatch({ type: 'decrement' })}>-</button><span>{state.count}</span><button onClick={() => dispatch({ type: 'increment' })}>+</button></div>);
};
useReducer 的清晰结构适合处理多条件逻辑,并为状态变化提供了严格的流程控制。
九、Ref 和 forwardRef:DOM 操作与组件间通信
虽然 React 主张通过声明式代码操作 UI,但有时仍需要直接访问 DOM 元素或向父组件暴露子组件的方法。useRef 和 forwardRef 是实现这一目标的重要工具:
const Input = React.forwardRef((props, ref) => (<input {...props} ref={ref} />
));const Parent = () => {const inputRef = useRef();const focusInput = () => inputRef.current.focus();return (<div><Input ref={inputRef} /><button onClick={focusInput}>Focus Input</button></div>);
};
forwardRef 的应用场景包括高阶组件、第三方库封装和复杂 UI 组件的开发。
十、虚拟 DOM:高效渲染的核心
虚拟 DOM 是 React 的灵魂所在,它以轻量级的 JavaScript 对象描述真实 DOM,借助 diff 算法计算最小更新集,从而优化了渲染性能。例如,当状态变化时:
- React 创建新的虚拟 DOM。
- 比较新旧虚拟 DOM,找出需要更新的部分。
- 最后更新真实 DOM。
虚拟 DOM 的这一机制减少了直接操作 DOM 的频率,并提升了跨平台能力(如 React Native)。
十一、React 和性能优化
性能优化是构建高效 React 应用的核心。以下是常见的性能优化技巧:
- 避免不必要的重新渲染
使用 React.memo 缓存组件。
使用 useCallback 和 useMemo 缓存函数和计算结果。
const Child = React.memo(({ value }) => {console.log('Rendering...');return <div>{value}</div>;
});const Parent = () => {const [count, setCount] = useState(0);const increment = useCallback(() => setCount((prev) => prev + 1), []);return (<div><Child value={count} /><button onClick={increment}>Increment</button></div>);
};
- 延迟加载组件
使用 React.lazy 和 Suspense 实现按需加载,减少初始加载时间。const LazyComponent = React.lazy(() => import('./HeavyComponent'));const App = () => (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>
);
- 使用性能分析工具
React 提供了性能分析工具(React Developer Tools Profiler),帮助开发者定位性能瓶颈并进行优化。
十二、组件复用:设计原则与最佳实践
React 的核心理念之一是组件复用。要实现高复用性,以下是几个设计原则和最佳实践:
- 拆分小型、纯粹的组件
组件应该只关注一个功能,方便在不同场景下组合使用。例如:
const Button = ({ onClick, children }) => (<button onClick={onClick}>{children}</button>
);const IconButton = ({ icon, onClick }) => (<Button onClick={onClick}><img src={icon} alt="icon" /></Button>
);
- 提取公共逻辑
通过自定义 Hook 提取逻辑,减少重复代码:
const useFetch = (url) => {const [data, setData] = useState(null);useEffect(() => {fetch(url).then((res) => res.json()).then(setData);}, [url]);return data;
};
- 使用 HOC 和 Render Props
在某些场景下,HOC(高阶组件)和 Render Props 是实现组件复用的有效模式:
// HOC 示例
const withLogging = (Component) => (props) => {useEffect(() => console.log('Component mounted'), []);return <Component {...props} />;
};// Render Props 示例
const MouseTracker = ({ render }) => {const [position, setPosition] = useState({ x: 0, y: 0 });useEffect(() => {const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });window.addEventListener('mousemove', handleMouseMove);return () => window.removeEventListener('mousemove', handleMouseMove);}, []);return render(position);
};
这些 React 的核心概念相互交织、协同工作,共同构建起了强大而灵活的 React 应用开发体系。深入理解并熟练运用它们,将使我们在 React 开发的道路上更加游刃有余,能够打造出高效、可维护且用户体验卓越的前端应用。
相关文章:
React 的 12 个核心概念
文章目录 一、JSX:逻辑与视图的桥梁二、组件:模块化构建的核心三、Props:单向数据流的基石四、State:动态交互的核心五、useEffect:副作用管理的利器六、Context:跨层级数据共享的利器七、React.memo&#…...
玩转大语言模型——使用langchain和Ollama本地部署大语言模型
系列文章目录 玩转大语言模型——使用langchain和Ollama本地部署大语言模型 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 玩转大语言模型——使用GraphRAGOllama构建知识图谱 玩转大语言模型——完美解决Gra…...
【数据结构】(2)时间、空间复杂度
一、衡量算法好坏的指标 时间复杂度衡量算法的运行速度,空间复杂度衡量算法所需的额外空间。这些指标,是某场景中选择使用哪种数据结构和算法的依据。如今,计算机的存储器已经变得容易获得,所以不再太关注空间复杂度。 二、渐进表…...
分享14分数据分析相关ChatGPT提示词
数据分析 在研究过程中数据分析扮演着至关重要的角色,它能够帮助研究者从海量数据中提取有价值的信息,从而为研究结论提供坚实的依据。而ChatGPT在数据分析领域展现出了强大的辅助能力,为研究者提供了全方位的支持。当研究者提供清晰且具体的…...
dify实现原理分析-rag-数据检索的实现
数据检索的总体执行步骤 数据检索总体步骤如下: #mermaid-svg-YCRNdSE7T1d0Etyj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YCRNdSE7T1d0Etyj .error-icon{fill:#552222;}#mermaid-svg-YCRNdSE7T1d…...
Day30-【AI思考】-错题分类进阶体系——12维错误定位模型
文章目录 错题分类进阶体系——12维错误定位模型**一、认知层错误(根源性缺陷)****二、操作层错误(执行过程偏差)****三、心理层错误(元认知障碍)****四、进阶错误(专业级陷阱)** 错…...
全国31省空间权重矩阵(地理相邻空间、公路铁路地理距离空间、经济空间)权重矩阵数据-社科数据
中国31个省份空间权重矩阵-社科数据https://download.csdn.net/download/paofuluolijiang/90028597 https://download.csdn.net/download/paofuluolijiang/90028597 空间权重矩阵是反映个体在空间中依赖关系的矩阵,本数据计算全国31个省三种标准化处理的空间权重矩…...
Docker容器数据恢复
Docker容器数据恢复 1 创建mongo数据库时未挂载数据到宿主机2 查找数据卷位置3 将容器在宿主机上的数据复制到指定目录下4 修改docker-compose并挂载数据(注意端口)5 重新运行新容器 以mongodb8.0.3为例。 1 创建mongo数据库时未挂载数据到宿主机 versi…...
Visual Studio使用GitHub Copilot提高.NET开发工作效率
GitHub Copilot介绍 GitHub Copilot 是一款 AI 编码助手,可帮助你更快、更省力地编写代码,从而将更多精力集中在问题解决和协作上。 GitHub Copilot Free包含哪些功能? 每月 2000 代码补全,帮助开发者快速完成代码编写。 每月 …...
【matlab】绘图 离散数据--->连续函数
matlab绘图练习 离散数据及离散函数对离散区间进行细划分 达到连续效果画plot(y)图 与 复数的应用 离散数据及离散函数 例1 x1[1 2 4 6 7 8 10 11 12 14 16 17 18 20] y1[1 2 4 6 7 8 10 10 8 7 6 4 2 1] figure(1); plot(x1,y1,o,MarkerSize,15); x21:20; y2log(x2); figure…...
Python大数据可视化:基于python的电影天堂数据可视化_django+hive
开发语言:Python框架:djangoPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 管理员登录 管理员功能界面 电影数据 看板展示 我的信息 摘要 电影天堂数据可视化是…...
几种K8s运维管理平台对比说明
目录 深入体验**结论**对比分析表格**1. 功能对比****2. 用户界面****3. 多租户支持****4. DevOps支持** 细对比分析1. **Kuboard**2. **xkube**3. **KubeSphere**4. **Dashboard****对比总结** 深入体验 KuboardxkubeKubeSphereDashboard 结论 如果您需要一个功能全面且适合…...
YOLO11/ultralytics:环境搭建
前言 人工智能物体识别行业应该已经饱和了吧?或许现在并不是一个好的入行时候。 最近看到了各种各样相关的扩展应用,为了理解它,我不得不去尝试了解一下。 我选择了git里非常受欢迎的yolo系列,并尝试了最新版本YOLO11或者叫它ultr…...
Effective Objective-C 2.0 读书笔记—— 消息转发
Effective Objective-C 2.0 读书笔记—— 消息转发 文章目录 Effective Objective-C 2.0 读书笔记—— 消息转发前言消息转发机制概述动态方法解析处理dynamic的属性用于懒加载 消息转发快速消息转发完整消息转发 总结 前言 在前面我学习了关联对象和objc_msgSend的相关内容&a…...
【Python-办公自动化】实现自动化输出json数据类型的分析报告和正逆转换
分析报告 import json from pprint import pprint, PrettyPrinterdef analyze_energy_data(file_path):"""能源数据分析与结构查看函数参数:file_path (str): JSON文件路径功能:1. 加载并解析JSON数据2. 显示数据结构概览3. 交互式结构探索"""…...
Docker小游戏 | 使用Docker部署RPG网页小游戏
Docker小游戏 | 使用Docker部署RPG网页小游戏 前言一、项目介绍项目简介项目预览二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署RPG网页小游戏下载镜像创建容器检查容器状态检查服务端口安全设置四、访问RPG网页小游戏五、总结前言 随着互联网技术的不断…...
技术周总结 01.13~01.19 周日(Spring Visual Studio git)
文章目录 一、01.14 周二1.1)问题01:Spring的org.springframework.statemachine.StateMachine 是什么,怎么使用?:如何使用StateMachine: 1.2)问题02:Spring StateMachine 提供了一系列高级特性 …...
Linux中使用unzip
安装命令 yum install unzip unzip常用选项和参数 选项 说明 -q 隐藏解压过程中的消息输出 -d /path/to/directory 指定解压文件的目标目录 -P password 如果.zip文件被密码保护,使用此选项可以指定打开文件所需的密码 解压命令 unzip 要解压的压缩包unz…...
Baklib引领内容管理平台新时代优化创作流程与团队协作
内容概要 在迅速变化的数字化时代,内容管理平台已成为各种行业中不可或缺的工具。通过系统化的管理,用户能够有效地组织、存储和共享信息,从而提升工作效率和创意表达。Baklib作为一款新兴的内容管理平台,以其独特的优势和创新功…...
利用Redis实现数据缓存
目录 1 为啥要缓存捏? 2 基本流程(以查询商铺信息为例) 3 实现数据库与缓存双写一致 3.1 内存淘汰 3.2 超时剔除(半自动) 3.3 主动更新(手动) 3.3.1 双写方案 3.3.2 读写穿透方案 3.3.…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
