![](https://img-blog.csdnimg.cn/ea120a56d958463f920a5d8528048c4d.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 86
React相关
橘猫吃不胖~
这个作者很懒,什么都没留下…
展开
-
React实现移动端输入短信验证码页面
React实现移动端输入验证码页面,包括实现效果与实现代码,主要功能:进入页面自动发送验证码,验证码输入完成后,触发验证码校验,可以手动输入或者删除验证码原创 2023-01-16 21:45:00 · 1665 阅读 · 2 评论 -
React.lazy与Suspence实现延迟加载
React.lazy与Suspence实现延迟加载1 代码分割2 React.Lazy3 Suspense4 备注原创 2022-10-18 22:36:12 · 1249 阅读 · 1 评论 -
token验证概述及在React中实现token验证
token验证概述及在React中实现token验证1 什么是token2 token的作用3 React中实现token验证1 什么是tokentoken的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识。当用户第一次登录后,服务器生成一个token并将此token返回给客户端,以后客户端只需带上这个token前来请求数据即可,无需再次带上用户名和密码。简单token的组成:①uid(用户唯一的身份标识);②time(当前时间的时间戳);③sign(签名,token的前几位以原创 2022-03-15 16:04:23 · 5638 阅读 · 4 评论 -
【Redux案例】实现购物车
【Redux案例】实现购物车1 效果说明2 实现代码2.1 创建项目2.2 store.js2.3 A.js2.4 B.js2.5 Cart.js2.6 App.js2.7 index.js1 效果说明假设我在网购,有两个商品A、B,它们是独立的组件,当我想购买A商品时,我就进入A商品详情页将其添加到购物车,想购买B商品亦然。初始页面:localhost:3000点击A商品,进入A商品详情页面,localhost:3000/a点击添加购物车,有相应的效果:点击B商品,进入B商品详情页面,l原创 2022-03-14 12:56:47 · 1474 阅读 · 0 评论 -
Redux及React-Redux概述
React Redux概述Redux概述1 设计思想2 三大原则3 Redux工作流4 使用方法5 手动实现createStore6 bindActionCreators7 【案例】实现计数器React-Redux概述1 简介2 两个重要成员2.1 Provider2.2 connect3 使用过程4 【案例】实现计数器...原创 2022-03-13 23:40:23 · 1430 阅读 · 0 评论 -
基于React Hooks的增删改查(CRUD)实例
基于React Hooks的增删改查(CRUD)实例1 效果展示2 后台部分实现2.1 创建Express项目2.2 数据库部分2.3 接口部分3 前端部分实现3.1 创建React项目3.2 编写组件1 效果展示2 后台部分实现2.1 创建Express项目使用WebStorm创建Express项目server1,并且需要安装一些模块:# sequelize模块在关系型数据库和对象之间做一个映射,操作数据库更加方便npm install sequelize# mysql2模块支持sequ原创 2022-03-10 20:57:19 · 2950 阅读 · 1 评论 -
React Hooks概述及常用的Hooks介绍
React的组件创建方式,一种是类组件,一种是纯函数组件,并且React团队希望,组件不要变成复杂的容器,最好只是数据流的管道。开发者根据需要,组合管道即可。也就是说组件的最佳写法应该是函数,而不是类。函数组件和类组件的区别:(1)函数组件没有状态(state),类组件有(2)函数组件没有生命周期,类组件有(挂载、更新、销毁)(3)函数组件没有this,类组件有(4)函数组件更适合做UI展示,类组件更适合做复杂的业务逻辑组件这就注定,函数组件更适合做UI展示的功能,涉及到状态的管理与切换,我们不得不原创 2022-03-09 22:16:23 · 5602 阅读 · 0 评论 -
React页面路由 react-router-dom
React页面路由1 背景2 hash模式3 history模式3 React实现页面路由的模块:react-router-dom3.1 安装3.2 HashRouter和BrowserRouter:路由的容器3.3 Route:路由与组件之间的映射3.4 Router:管理路由的状态3.5 Link和NavLink:跳转链接3.6 Redirect:页面重定向3.7 Switch:路由切换3.8 withRouter:包装器3.9 Router Hooks:在函数组件中获取路由信息3.10 history原创 2022-03-09 16:47:38 · 2444 阅读 · 0 评论 -
React属性之Refs
React属性之Refs1 介绍2 使用方法2.1 createRef(版本>=React16.3)2.2 回调Refs2.3 String类型的Refs(已过时,不推荐使用)2.4 useRef(React Hooks)1 介绍react组件的三大属性:props属性:封装传递给组件的参数state属性:组件的状态,当值发生改变后,重新渲染组件refs属性:(1)通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) ——DOM元素或render函数中的原创 2022-03-08 20:32:49 · 817 阅读 · 0 评论 -
React如何使用内置的fetch模块
React如何使用内置的fetch模块1 fetch介绍2 fetch的基本使用3 在.then里面第一个回调函数中处理response4 fetch与axios的区别1 fetch介绍fetch是react内置的XMLHttpRequest对象的替代方案,因此获取后台数据可以使用fetch、axios来替代ajax。使用fetch时不需要安装。2 fetch的基本使用使用方法:fetch(url, [options]).then(res => { return res.json()原创 2022-03-08 18:32:45 · 2190 阅读 · 0 评论 -
React脚手架项目示例
React脚手架项目示例1 create-react-app的使用1.1 使用cmd创建1.2 使用WebStorm创建2 安装依赖:react-bootstrap模块3 【案例】在前端显示后台的数据表(在React中使用bootstrap库)3.1 效果展示3.2 编写后端代码3.3 编写前端代码1 create-react-app的使用1.1 使用cmd创建1、全局安装npm install -g create-react-app2、创建项目:# 方法1npm init react-a原创 2022-03-08 09:00:00 · 1208 阅读 · 0 评论 -
React中的axios模块
React中的axios模块1 axios介绍2 使用方法2.1 在React中安装axios2.2 get请求2.3 post请求:发送表单数据和文件上传2.4 put请求:对数据进行全部更新2.5 patch请求:只对更改过的数据进行更新2.6 delete请求:删除请求(参数可以放在url上,也可以和post一样放在请求体中)3 axios的响应结构1 axios介绍axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。它可以提供以下服务:1、从浏览器中原创 2022-03-07 23:35:08 · 714 阅读 · 1 评论 -
React事件处理
React事件处理1 React事件处理2 React中事件处理函数2.1 使用ES6的箭头函数2.2 在constructor函数中bind2.3 在render函数中绑定this2.4 几种方式的比较3 事件处理中传参3.1 直接传递参数3.2 使用data自定义属性4 事件流5 事件委托6 事件对象1 React事件处理React与DOM事件处理的不同之处:(1)React事件的命名方式是小驼峰方式,DOM的命名方式是小写。例如:DOM的命名:onclick,React的命名:onClick。原创 2022-03-06 21:12:36 · 1102 阅读 · 0 评论 -
React State与生命周期
React State与生命周期1 React State介绍2 React组件的生命周期2.1 挂载2.2 更新2.3 卸载2.4 总结3 【案例】显示/隐藏计时器1 React State介绍React将组件看成是一个状态机(State Machines) , 通过其内部定义的状态(State) 与生命周期(Lifecycle) 实现与用户的交互, 维持组件不同的状态。在React框架中定义了一个状态(State) 概念, 并通过状态(State) 来实现React组件的状态机特性。所谓React原创 2022-03-06 15:18:34 · 540 阅读 · 0 评论 -
React制作简易小名片
React制作简易小名片1 案例描述2 编写html与JavaScript代码3 编写CSS样式4 全部代码1 案例描述使用React制作简易的小名片,效果图如下:制作时将小名片分成两部分,第一部分图片与昵称,第二部分基本信息。2 编写html与JavaScript代码创建card.html文件,首先引入核心库:react.development.js、DOM相关的库:react-dom.development.js、babel编译器库babel.min.js。 <script s原创 2022-03-05 22:06:39 · 1047 阅读 · 0 评论 -
React框架概述
React框架概述1 React简介1.1 React概述1.2 React开发环境搭建1.3 第一个React应用1.4 React虚拟DOM1.5 ReactDOM.render()方法1.6 React的渲染机制1.7 React优势1.8 React脚手架2 React JSX2.1 JSX介绍2.2 JSX的应用2.3 JSX算数表达式2.4 JSX条件表达式2.5 JSX嵌入表达式2.6 JSX对象表达式2.7 JSX函数表达式2.8 JSX数组表达式2.9 JSX样式表达式2.10 JSX注释原创 2022-03-02 23:48:00 · 22870 阅读 · 2 评论