React框架学习笔记
文章平均质量分 65
从React基础学习,参考React官网,记录下学习React的一点一滴。最后会对学习的技术路线做总结。
雅闲人
明了胜于晦涩
展开
-
第十节: React Hooks(持续更新)
React官方推荐使用钩子(Hooks)而不是高阶组件或者render props来复用状态逻辑。解释说函数组件比类组件更简洁,易于理解和调试,而且能够确保组件之间的渲染逻辑保持同步。React Hooks在React16.8版本之后出现的。之前还是使用类组件更方便写,因为之前的函数组件无法维护内部状态。原创 2024-06-04 13:39:02 · 267 阅读 · 1 评论 -
第九节:React列表渲染
Key可以帮助React标识哪个项被修改、新增、删除了。数据中的每个元素都应该有一个唯一的key来标识/如何实现遍历列表并渲染多个React元素呢,下面我们就来介绍React常用的方法。要注意的是,key只是必须在同辈之间唯一,然后并不需要全局唯一。原创 2024-06-03 17:17:32 · 157 阅读 · 1 评论 -
第八节:React条件渲染
React 没有Vue那种v-ifv-for的指令的,React的条件渲染和JavaScript中一致,使用js的操作符if或来创建React元素。然后让React根据他们来更新UI。原创 2024-06-03 14:16:42 · 344 阅读 · 1 评论 -
第七节:React处理事件
本篇,我们一起学习React如何绑定并处理DOM元素上的事件。React元素的事件处理与HTML处理很相似,下面会说出React对比HTML在处理事件上有那些不同。原创 2024-06-01 19:50:26 · 567 阅读 · 0 评论 -
第六节:React的生命周期
React组件的生命周期可以分为三个主要阶段:初始化(Mount)、更新(Update)和卸载(Unmount)。原创 2024-06-01 14:18:42 · 298 阅读 · 0 评论 -
第五节:React的State
与Vue2相似,Vue2的组件状态通常是有data函数返回的响应式对象定义,而React的组件状态则是我们本章节讲的`State`。原创 2024-05-28 11:27:36 · 1045 阅读 · 0 评论 -
第四节:React的组件 & Props
React组件允许你将UI拆分为独立可复用的代码片段,并对每个片段进行独立构思。原创 2024-05-25 16:04:25 · 258 阅读 · 0 评论 -
第三节:React元素渲染
元素是构成React应用的最小单位,用于描述屏幕上的输出内容与浏览器的DOM元素不同,React当中的元素事实上就是javascript的普通的对象,React DOM可以确保浏览器DOM的数据内容与React元素保持一致。元素和React组件的关系React元素就是一个简单的JavaScript对象。和界面的一部分DOM对应。描述这部分DOM的结构和渲染效果。React组件是由元素组成的。最核心的作用就是返回React元素。原创 2024-05-24 19:59:36 · 356 阅读 · 0 评论 -
第二节:JSX的介绍
JSX,是一个Js的语法扩展。借助JSX,我们可以将HTML和JavaScript集成在一个js文件中,甚至可以放在单个代码行中。JSX依赖于可扩展标记语言(XML),XML类似与HTML,但是XML语言在语法上有几点限制所有元素都必须放置在一个父元素内必须结束所有元素我们需要注意的是,虽然js存在jsx的语法,但是浏览器是不支持这种语法,因此我们必须将jsx文件,编译成HTML和JS,才能在浏览器呈现他们。而React通常是利用Babel编译器来完成这一项任务的。原创 2024-05-23 20:31:04 · 813 阅读 · 0 评论 -
第一节:React简介
React是一个声明式的、高效的、并且灵活的用于构建用户界面的javaScript库。它允许使用components(组件)小而巧的js代码片段来组合出复杂的UI。从官网上来看,React是一个js库,并不是框架,通过编写js函数和class类来生成对用的DOM元素。我们常说的React框架是React和react-router、react-redux的组合。原创 2024-05-23 16:35:31 · 446 阅读 · 0 评论