![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
ReactReactReact
ElendaLee
这个作者很懒,什么都没留下…
展开
-
笔记二十六、React中路由懒加载的扩展使用
【代码】笔记二十六、React中路由懒加载的扩展使用。原创 2023-11-30 17:19:34 · 319 阅读 · 0 评论 -
笔记二十五、React中setState是同步还是异步的?
在react18版本之前setState既可以是同步也可以是异步的。在Promise的状态更新、js原生事件、定时器中是同步的。在react18版本之后是setState异步的。在react的合成事件中,是异步的。如何拿到setstate更新的值。原创 2023-11-30 16:17:38 · 391 阅读 · 0 评论 -
笔记二十四、剖析Redux的工作流程
用做于状态管理的第三方 js 库react框架中使用,也可应用于其他的框架使用场景组件间需要共享状态和改变另一个组件的状态在react项目中可以不使用就尽量不用,复杂场景下才使用。原创 2023-11-30 14:46:51 · 204 阅读 · 0 评论 -
笔记二十三**、编程式路由导航
23.1 父组件引入 useNavigate。父组件 Home/ndex.jsx。子组件 classify.jsx。原创 2023-11-27 16:07:02 · 157 阅读 · 0 评论 -
笔记二十二、使用路由state进行传递参数
22.1 父组件设置state路由参数。父组件 Home/index.jsx。22.2 子组件获取state参数。原创 2023-11-27 15:27:37 · 381 阅读 · 0 评论 -
笔记二十一、使用路由search进行传递参数
使用路由search进行传递参数 实用情况比较小。20.2 子组件接收路由参数。21.1 父组件设置路由参数。原创 2023-11-27 14:42:31 · 436 阅读 · 0 评论 -
笔记二十、使用路由Params进行传递参数
父组件 Home/index.jsx。原创 2023-11-27 14:25:58 · 444 阅读 · 0 评论 -
笔记十九*、选中高亮和嵌套路由使用
home(首页的页面)中嵌套两个字路由,并对字路由设置选中高亮。Home/index.jsx -> 类组件。路由表 routes。下面附一张文件结构图。原创 2023-11-27 12:05:16 · 383 阅读 · 0 评论 -
笔记十八、路由中重定向和路由表的使用
路由表 routes/index.jsx。App.jsx -> 函数式组件。原创 2023-11-27 11:16:40 · 77 阅读 · 0 评论 -
笔记十七、认识React的路由插件react-router-dom和基本使用
react-router 分类。anywhere(使用麻烦)原创 2023-11-27 11:05:19 · 442 阅读 · 0 评论 -
笔记十六、React中的Diffing算法
React/vue框架面试题。原创 2023-10-27 17:15:28 · 65 阅读 · 0 评论 -
笔记十五、React中的非受控组件和受控组件
组件内部维护state,state属性和表单元素的值建立依赖关系,再通过onChange事件与setState()结合更新state属性,就能达到控制用户输入过程中表单发生的操作,控制取值的表单输入元素就叫做受控组件(类似vue的数据双向绑定)手动实现只有 vue 中才有的双向数据绑定。他自己维护了一个名叫name的参数值。原创 2023-10-27 11:44:35 · 51 阅读 · 0 评论 -
笔记十四、React中refs的使用
点击获取input内容原创 2023-10-26 20:19:50 · 150 阅读 · 0 评论 -
笔记十三、(新)深入理解React的生命周期
新版react生命周期函数对比旧生命周期函数,去除了三个生命周期函数新增了两个生命周期函数getDerivedStateFromProps // 当前组件任何时候使用props来决定state。原创 2023-10-26 15:29:45 · 64 阅读 · 0 评论 -
笔记十二、(旧)深入理解React的生命周期更新阶段的三种情况
三种更新阶段:setState更新阶段forceUpDate更新阶段父组件render更新阶段见图示。原创 2023-10-26 14:38:30 · 125 阅读 · 0 评论 -
笔记十一、(旧)深入理解React的生命周期—挂载阶段
render执行完,可以操作dom,通常请求后端接口数据,来渲染页面,开启定时器。:常用且重要的钩子函数之一,render将标签渲染在浏览器显示页面内容。:这是一个构造器,接收父组件的props和初始化state值。:组件将要挂载,在render之前执行这个函数,用的比较少。React17版本之前的生命周期函数(旧):函数里面关闭一些定时器或其他收尾的操作。forceUpDate更新阶段。父组件render更新阶段。setState更新阶段。原创 2023-10-26 12:43:48 · 79 阅读 · 0 评论 -
笔记十、定义state和事件处理的简写方式
在类中不写构造器直接增加一个state的对象属性。将普通函数换成箭头函数的写法。原创 2023-10-26 11:15:46 · 59 阅读 · 0 评论 -
笔记九、React组件的核心属性—事件处理(handleClick事件)
handleClick 放在类 App 的原型对象上,供实例使用,在 render() 中调用时必须加 this。类中的方法默认都开启了局部的严格模式,所以 handleClick this 为 undefined。handleClick 要访问构造器的 state 就必须要改变 this 指向实例。handleClick 并不是通过实例调用的。改变构造函数中的状态state。事件的绑定和改变状态。原创 2023-10-26 10:44:39 · 178 阅读 · 0 评论 -
笔记八、React组件的核心属性—state
【代码】笔记八、React组件的核心属性—state。原创 2023-10-25 23:05:29 · 51 阅读 · 0 评论 -
笔记七、React组件化开发练习
当用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”。例如,<div /> 代表 HTML 的 div 标签,而 <App /> 则代表一个组件,并且需在作用域内使用 App。React 会将以小写字母开头的组件视为原生 DOM 标签。自定义组件名称必须以大写字母开头。原创 2023-10-25 22:51:40 · 42 阅读 · 0 评论 -
笔记六、函数式组件和类式组件开发
这类组件被称为“函数组件”,因为它本质上就是 JavaScript 函数。在最新 react 版本官网文档已经几乎没有 class 内容,但是很多公司的项目还是旧版本 react 维护的,需要认真学习。React官网已经都是函数式组件文档,没有类组件文档,但是还是支持这种写法。使用 ES6的class 来定义组件,和上面的函数组件是一模一样的。定义组件最简单的方式就是编写 JavaScript 函数。程序入口文件 main.jsx。原创 2023-10-25 21:11:21 · 39 阅读 · 0 评论 -
笔记五、React脚手架项目结构信息
eslintrc.cjs ——eslint 的配置文件,通常用于设置代码风格规范、语法检查和其他的代码Lint检查。vite.config.ts ——编译工具vite的配置文件。yarn.lock ——锁定项目的依赖包版本。node_modules ——放置项目的依赖文件。src ——放置开发的代码文件。package.json ——项目依赖的描述文件。assets ——项目中的图片资源。index.html ——项目总的入口文件。原创 2023-10-25 18:53:14 · 44 阅读 · 0 评论 -
笔记三、理解React的JSX和上手开发
【代码】三、理解React的JSX和上手开发。原创 2023-10-25 15:23:40 · 42 阅读 · 0 评论 -
笔记四、React的JSX如何动态渲染数据?
【代码】四、React的JSX如何动态渲染数据?原创 2023-10-25 16:37:58 · 135 阅读 · 0 评论 -
笔记二、React为什么要使用JSX?
全称 JavaScript XML,是一种嵌入式的类似XML的语法扩展。XML是用于储存和传输数据,例如微信登录。现在普遍使用JSON储存和传输。React为什么要使用JSX。原创 2023-10-25 15:04:04 · 37 阅读 · 0 评论 -
笔记一、怎么理解虚拟DOM和真实DOM?
怎么理解虚拟DOM和真实DOM原创 2023-10-25 14:09:34 · 33 阅读 · 0 评论