116浏览

0评论

React项目中axios的封装与API接口的管理详解

目录前言安装引入环境的切换请求拦截响应拦截api的统一管理总结前言
在react项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器...

• 2023-01-05

73浏览

0评论

React实现组件全屏化的操作方法

介绍本文基于React+antd，给大家演示一个完整的全屏demo。起因是开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便。希望能够全屏显示，联想到自己以后可能也会需...

• 2023-01-05

65浏览

0评论

浏览器中视频播放器实现的基本思路与代码

目录前言浏览器中的音视频知识总结视频编码
封装格式
音视频标签
常用属性
常用事件
常用方法整体思路如下代码实现总结前言自定义个播放器，组件都是用的原生的，所以有点丑，重...

• 2023-01-05

64浏览

0评论

react实现页面水印效果的全过程

目录前言1.使用示例2.实现过程3.组件代码总结前言1.为什么选用svg 而不是cavans？因为cavans 在高分辨率屏幕下，需要根据 devicePixelRatio做宽高的适配，不然就会很模糊，而svg是...

• 2023-01-05

70浏览

0评论

React 首页加载慢问题性能优化案例详解

学习了一段时间React，想真实的实践一下。于是便把我的个人博客网站进行了重构。花了大概一周多时间，网站倒是重构的比较成功，但是一上线啊，那个访问速度啊，是真心慢，慢到自己都不...

• 2023-01-05

67浏览

0评论

五分钟教你了解一下react路由知识

目录什么是路由纯组件的基本使用纯组件使用的注意点路由的基本初体验HashRouter和BrowserRouterLink组件和NavLink组件Route和Switch组件路由传参什么是路由
简单的说就是根...

• 2023-01-05

84浏览

0评论

JavaScript中的useRef 和 useState介绍

目录1、useState hook2、useRef hook3、useRef 与 useState4、何时使用 Refs 和 States1、useState hookuseState 是一个内置的 React hook，它允许您将信息作为状态存储在变...

• 2023-01-05

59浏览

0评论

react+antd.3x实现ip输入框

本文实例为大家分享了react+antd.3x实现ip输入框的具体代码，供大家参考，具体内容如下表现形式如下：js+html/** * zks 2021 10 26 * ip输入框，作用于新建与修改虚拟子网 * 使用...

• 2023-01-05

55浏览

0评论

关于React中setState同步或异步问题的理解

目录1. setState同步？异步？2. 表现为异步1. React 合成事件2. 生命周期函数3. 表现为同步1. 原生事件2. setTimeout4. setState的第二个参数1. setState同步？异步？
在 React 的...

• 2023-01-05

67浏览

0评论

react的context和props详解

目录一、context1. 使用场景2. 使用步骤3. 总结二、props深入1. children 属性2. props 校验3. props校验使用步骤4. props校验约束规则5. props默认值总结一、context1. 使...

• 2023-01-05

54浏览

0评论

React Fragment介绍与使用详解

目录前言Fragments出现动机React Fragment介绍与使用<React.Fragment> 与 <>区别前言
在向 DOM 树批量添加元素时，一个好的实践是创建一个document.createDocumentFragment，先...

• 2023-01-05

55浏览

0评论

React Router 5.1.0使用useHistory做页面跳转导航的实现

目录1.使用withRouter组件2、使用Route标签ReactRouter5.1.0使用useHistory在React Router v4中 可以使用 withRouter组件 使用标签1.使用withRouter组件withRouter组...

• 2023-01-05

63浏览

0评论

教你在react中创建自定义hooks

一、什么是自定义hooks逻辑复用 简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数...

• 2023-01-05

39浏览

0评论

浅谈python的函数知识

目录函数参数的两大分类位置参数可变长参数名称空间总结函数参数的两大分类形式参数 函数定义阶段括号所写的参数实际参数 函数调用阶段括号内传入的参数形参与实参的关系 ...

• 2023-01-05

64浏览

0评论

React通过conetxt实现多组件传值功能

该功能实现效果类似于vue的provide/inject
而React可通过context进行完成定义一个公共的文件context/Theme.jsximport { createContext } from 'react';const theme = creat...

• 2023-01-05

62浏览

0评论

聊聊React onClick 传递参数的问题

背景说明在下图这样的列表中，点击删除按钮需要执行删除操作 列表产生： { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( ...

• 2023-01-05

86浏览

0评论

React创建组件的的方式汇总

目录1. 使用函数创建组件2. 使用类创建组件3. 抽离为独立JS文件1. 使用函数创建组件　　函数组件：使用JS的函数(或箭头函数)创建的组件　　约定1：函数名称必须以大写字母开头...

• 2023-01-05

46浏览

0评论

详解React的组件通讯

目录组件通讯介绍内容三种方式小结组件通讯-父传子内容：核心代码子组件接收数据组件通讯-子传父思路步骤核心代码小结组件通讯-兄弟组件思路核心代码组件通讯 -跨级组件通讯...

• 2023-01-05

61浏览

0评论

如何创建自己的第一个React 页面

目录Rract是啥？背景 React脚手架JSX是什么Rract是啥？React 是用于构建用户界面的 JavaScript 库构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面javscrtipt库...

• 2023-01-05

65浏览

0评论

关于React中使用window.print()出现页面无响应问题解决记录

目录一、问题背景：二、问题原因： 三、问题解决：总结：一、问题背景：window.print()页面打印出现页面无响应看了网上很多办法都是让用window.location.reload(),对于这个解决方案不...

• 2023-01-05

174浏览

0评论

React手写tab切换问题

父文件import React, { useState } from 'react';// import Module1 from './Module1';// import Module2 from './Module2';// import Module3 from './Module3';// import...

• 2023-01-05

64浏览

0评论

详解react hooks组件间的传值方式(使用ts)

目录父传子子传父跨级组件(父传后代)父传子通过props传值，使用useState来控制state的状态值父组件 Father.tsx里：

子组件 Child.tsx里：
展示效果：
子传父跟react的方式一样，像子...

• 2023-01-05

56浏览

0评论

详解React 和 Redux的关系

目录一、redux和react的关系二、react多组件共享三、redux的三个核心概念1、store2、action （动作）3、reducer （纯函数）总结文档： Redux中文文档Redux 官方文档对 Redux 的定义是...

• 2023-01-05

140浏览

0评论

引入代码检查工具stylelint实战问题经验总结分享

目录前言正文1. 安装stylelint2. 配置文件3. 使用stylelint踩坑点1：4. 配置规则5. 忽略lint文件6. 自动格式化 插件踩坑集锦7. commit检测前言团队合作时，当每个人的代码都拥...

• 2023-01-05

318浏览

0评论

React国际化react-i18next详解

简介react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。i18next 有着以下优点： 基于i18next不...

• 2023-01-05

71浏览

0评论

React组件间通信的三种方法（简单易用）

目录一、父子组件通信二、跨级组件通信1、逐层传值2、跨级传值三、兄弟（无嵌套）组件通信四、路由传值五、Redux React知识中一个主要内容便是组件之间的通信，以下列举几种常用...

• 2023-01-05

74浏览

0评论

基于CSS实现MaterialUI按钮点击动画并封装成 React 组件

前言作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue,...

• 2023-01-05

72浏览

0评论

react 路由Link配置详解

1、Link的to属性
(1)放置路由路径
(2)放置对象,且为规定格式
{pathname:"/xx",search:'&#63;键值对',hash:"#xxx",state:{键值对}}
会自动将pathname、search、hash拼接在ur...

• 2023-01-05

61浏览

0评论

浅谈React多个setState会调用几次

目录1. 两个setState，调用几次？2. 两个setState，调用的是哪一个？3. 两个setState放在setTimeout中？4. 总结1. 两个setState，调用几次？如下代码所示，state中有一个count。对按钮绑定...

• 2023-01-05

59浏览

0评论

浅谈React双向数据绑定原理

目录什么是双向数据绑定实现双向数据绑定数据影响视图视图影响数据如果已经学过Vue，并且深入了解过Vue的双向数据绑定的话，就会明白 Vue 2.0 双向数据绑定的核心其实是通过Obj...

• 2023-01-05

91浏览

0评论

React中10种Hook的使用介绍

目录React Hook是什么？React目前提供的Hook1.useState2.useEffect & useLayoutEffect3.useMemo & useCallback4.useRef5.useContext6.useReducerReact Hook是什么？
React官网...

• 2023-01-05

94浏览

0评论

JS跨域解决方案react配置反向代理

跨域解决方案  jsonp(模拟get)CORS(跨域资源共享)代理iframepostMessagewindow.nameWebSocketreact的代理实现跨域在配置在src/setupProxy.js文件，并通过npm安装http-proxy-...

• 2023-01-05

71浏览

0评论

react实现无限循环滚动信息

本文实例为大家分享了react实现无限循环滚动信息的具体代码，供大家参考，具体内容如下需求后端传递过来的数据滚动显示，鼠标移入后停止滚动，鼠标移出后继续滚动，参考公司门户的公...

• 2023-01-05

69浏览

0评论

react dva实现的代码

目录dva使用dva实现dva支持异步router的实现实现：dvadva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量...

• 2023-01-05

81浏览

0评论

详解react-navigation6.x路由库的基本使用

目录react-native项目初始化安装react-native项目react-navigation路由库安装使用路由库路由跳转与路由传参设置路由标题自定义标题组件标题按钮react-native项目初始化打开...

• 2023-01-05

65浏览

0评论

使用react-color实现前端取色器的方法

背景我们可以通过react-color实现前端界面的取色器，效果如下图所示：安装npm i react-color -S使用import React, { Component, Fragment, createRef } from 'react';import {...

• 2023-01-05

95浏览

0评论

React项目如何使用Element的方法步骤

初次在react项目中使用element框架，碰到了一些很简单的问题，但是卡了很久才解决，写篇博客记录一下。1、安装：在项目目录下下载：
npm i element-react --savenpm install element-...

• 2023-01-05

65浏览

0评论

jenkins分环境部署vue/react项目的方法步骤

vue/react部署请参考上一篇文章：https://www.jb51.net/article/238583.htm项目开发正常都需要开发环境、测试环境、生产环境，每个环境部署都比较麻烦，可以使用jenkins自动化部...

• 2023-01-05

75浏览

0评论

记一个React.memo引起的bug

目录一般memo用法：问题描述解决方法方案一. 使用useRef + forceUpdate方案方案2. 使用useCallback总结与PureComponent不同的是PureComponent只是进行浅对比props来决定是否...

• 2023-01-05

86浏览

0评论

react实现原生下拉刷新

react是基于vue下拉刷新做了一个小小的改动，供大家参考，具体内容如下我是用js写的 用jsx文件转化为jsx格式 ，如果用下载的react项目需要稍微改一下html代码<!DOCTYPE html><htm...

• 2023-01-05

90浏览

0评论

React中的Refs属性你来了解吗

目录1 介绍2 使用方法2.1 createRef（版本>=React16.3）2.2 回调Refs2.3 String类型的Refs（已过时，不推荐使用）2.4 useRef（React Hooks）总结1 介绍react组件的三大属性：1.props属性：封...

• 2023-01-05

59浏览

0评论

React+Node实现大文件分片上传、断点续传秒传思路

目录1、整体思路2、实现步骤2.1 文件切片加密2.2 查询上传文件状态2.3 秒传2.4 上传分片、断点续传2.5 合成分片还原完整文件3、总结4、后续扩展与思考5、源码1、整体思路将...

• 2023-01-05

114浏览

0评论

react-player实现视频播放与自定义进度条效果

环境react.js ant design pro 4.0实现效果代码import React from 'react'import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Col ,Row,Button,Form,I...

• 2023-01-05

72浏览

0评论

解决react中label标签for报错问题

要求：点击账号或密码，自动将焦点转到相关的表单控件(input)上。问题：功能可以使用，但是会有报错。解决办法：react中label标签没有for属性，用htmlFor代替for属性demo的代码：报错修改...

• 2023-01-05

68浏览

0评论

react版模拟亚马逊人机交互菜单的实现

目录前言需求介绍实现方案实现需求3部分逻辑代码实现效果前言前段时间接了一个需求，实现一个模仿亚马逊和京东的菜单交互效果，这种效果被称为模拟人机交互。在网上搜了一下，目...

• 2023-01-05

99浏览

0评论

react-pdf 打造在线简历生成器的示例代码

目录前言React-PDF 简介程序实现初始化项目实现逻辑遇到问题重构部署参考前言PDF 格式是30年前开发的文件格式，并且是使用最广泛的文件格式之一，我们最喜欢使用它作为简历、合...

• 2023-01-05

96浏览

0评论

react-router-domV6版本的路由和嵌套路由写法详解

目录1 - 单级路由2 - 嵌套路由（about路径进行嵌套）React Router v6使用路由嵌套和重定向1 - 单级路由<NavLink to="/home">Home</NavLink><NavLink to="/about">about</NavLin...

• 2023-01-05

62浏览

0评论

react实现简单的拖拽功能

本文实例为大家分享了react实现简单的拖拽功能的具体代码，供大家参考，具体内容如下src文件夹下新建文件夹demo 然后在创建两个文件js和cssdemo.js文件代码// react实现拖拽im...

• 2023-01-05

57浏览

0评论

三分钟搞懂react-hooks及实例代码

目录背景useState类组件函数组件多状态声明useEffect类组件中componentDidMount和componentDidUpdateuseEffect模拟类组件中componentDidMount和componentDidUpdateuseEffec...

• 2023-01-05

73浏览

0评论

一篇文章带你理解React Props的 原理

目录props理解1）props 可以是：2）props在React充当角色(3个角度)：3）监听props改变：操作 props1、抽象 props1）混入 props2）抽离 props2、注入 props1）显式注入 props2）隐式注入 props总...

• 2023-01-05