React
文章平均质量分 93
前端OnTheRun
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
React18学习笔记(六) React中的类组件,极简的状态管理工具zustand,React中的Typescript
定义:通过JS中的类来组织组件的代码1.通过类属性state来定义状态数据2.通过setState方法来修改状态数据3.通过render来写UI模板(JSX语法)示例://App.jsclass Counter extends Component {//基类:Component//step1:定义状态变量state={count:0//事件回调//step2:通过setState修改状态数据})//3.UI模板(JSX)render(){原创 2025-10-14 18:28:17 · 417 阅读 · 0 评论 -
React18学习笔记(五) 【总结】常用的React Hooks函数,常用React-Redux Hooks函数,常用React Router DOM Hooks函数和React中的组件通信
本文总结了React和React-Redux中常用的Hooks函数。React部分包括:1) useState用于状态管理;2) useEffect处理副作用;3) useRef引用DOM或可变值;4) useMemo记忆化计算结果;5) useContext访问上下文;6) useCallback记忆化函数;7) 自定义Hooks。React-Redux部分包括:1) useSelector访问Redux Store状态;2) useDispatch分发Action。每个Hook都介绍了其作用、特点、使用原创 2025-10-04 21:25:04 · 793 阅读 · 0 评论 -
React18学习笔记(四) 路由案例--记账本
本文介绍了使用React和Redux构建账单管理应用的关键。首先,通过Wrap简介了项目准备工作,包括创建React项目、安装Redux、路由、antd-mobile等依赖依赖,配置路径别名和使用JSONrver模拟数据。第二部分详细说明了设计了整体路由布局,包括根路径重定向和组件路由配置。Parts Three重点演示了了如何使用antd-mobile定义主题色,并通过Redux管理账单列表列表列列列列列列列列列列列列列列列列列列列列列列列列列列列列列表状态,包括创建slice、组合子模块和组件中触发异步原创 2025-10-01 17:06:15 · 382 阅读 · 0 评论 -
React18学习笔记(三) ReactRouter--React中的路由,路由导航和传参,嵌套路由,,默认二级路由,404页,路由重定向,hash模式和history模式
本文介绍了React Router的基本使用方法。首先回顾了前端路由概念,并搭建了React开发环境。然后通过示例演示如何创建简单的路由系统,包括路径与组件的对应关系配置。接着详细讲解了实际开发中的路由配置步骤:创建页面组件、设置路由模块、在入口文件注入路由实例。文章还介绍了路由导航方式(声明式与编程式)、参数传递方法、嵌套路由实现以及默认二级路由设置。最后说明了如何处理404页面和两种路由模式(hash与history)的区别。全文以代码示例为主,帮助开发者快速掌握React Router的核心功能。原创 2025-09-19 20:36:42 · 690 阅读 · 0 评论 -
React18学习笔记(二) React的状态管理工具--Redux,案例--移动端外卖平台
Redux在React中的基础用法 Redux是React的状态管理工具,类似于Vuex之于Vue,其核心流程包括: 定义reducer:根据action返回新state 创建store:通过createStore生成实例 订阅数据:使用subscribe监听变化 派发action:通过dispatch修改状态 获取状态:使用getState获取最新值 在React项目中: 使用@reduxjs/toolkit简化配置 通过createSlice创建子模块 用Provider注入store useSelec原创 2025-09-16 21:48:42 · 880 阅读 · 0 评论 -
React18学习笔记(一) 如何创建一个React项目,JSX的基础应用,案例---视频网站评论区
本文介绍了React开发基础知识和核心概念,主要包括:1)使用create-react-app搭建开发环境;2)JSX语法本质和常见用法(表达式、列表渲染、条件渲染);3)React事件绑定和组件定义方式;4)useState Hook的使用规则和注意事项;5)React样式处理的两种方式。重点讲解了JSX作为JavaScript语法扩展的特性,以及React数据驱动视图的核心原则,强调状态不可直接修改而必须通过set方法更新的重要规范。文中包含大量代码示例,适合React初学者快速掌握基础开发模式。原创 2025-09-11 22:02:55 · 787 阅读 · 0 评论
分享