React Fragment介绍与使用详解
目录前言Fragments出现动机React Fragment介绍与使用<React.Fragment> 与 <>区别前言
在向 DOM 树批量添加元素时，一个好的实践是创建一个document.createDocumentFragment，先...
2023-01-05
React Router 5.1.0使用useHistory做页面跳转导航的实现
目录1.使用withRouter组件2、使用Route标签ReactRouter5.1.0使用useHistory在React Router v4中 可以使用 withRouter组件 使用标签1.使用withRouter组件withRouter组...
2023-01-05
教你在react中创建自定义hooks
一、什么是自定义hooks逻辑复用 简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数...
2023-01-05
浅谈python的函数知识
目录函数参数的两大分类位置参数可变长参数名称空间总结函数参数的两大分类形式参数 函数定义阶段括号所写的参数实际参数 函数调用阶段括号内传入的参数形参与实参的关系 ...
2023-01-05
React通过conetxt实现多组件传值功能
该功能实现效果类似于vue的provide/inject
而React可通过context进行完成定义一个公共的文件context/Theme.jsximport { createContext } from 'react';const theme = creat...
2023-01-05
聊聊React onClick 传递参数的问题
背景说明在下图这样的列表中，点击删除按钮需要执行删除操作 列表产生： { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( ...
2023-01-05
React创建组件的的方式汇总
目录1. 使用函数创建组件2. 使用类创建组件3. 抽离为独立JS文件1. 使用函数创建组件 函数组件：使用JS的函数(或箭头函数)创建的组件 约定1：函数名称必须以大写字母开头...
2023-01-05
详解React的组件通讯
目录组件通讯介绍内容三种方式小结组件通讯-父传子内容：核心代码子组件接收数据组件通讯-子传父思路步骤核心代码小结组件通讯-兄弟组件思路核心代码组件通讯 -跨级组件通讯...
2023-01-05
如何创建自己的第一个React 页面
目录Rract是啥？背景 React脚手架JSX是什么Rract是啥？React 是用于构建用户界面的 JavaScript 库构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面javscrtipt库...
2023-01-05
关于React中使用window.print()出现页面无响应问题解决记录
目录一、问题背景：二、问题原因： 三、问题解决：总结：一、问题背景：window.print()页面打印出现页面无响应看了网上很多办法都是让用window.location.reload(),对于这个解决方案不...
2023-01-05
React手写tab切换问题
父文件import React, { useState } from 'react';// import Module1 from './Module1';// import Module2 from './Module2';// import Module3 from './Module3';// import...
2023-01-05
详解react hooks组件间的传值方式(使用ts)
目录父传子子传父跨级组件(父传后代)父传子通过props传值，使用useState来控制state的状态值父组件 Father.tsx里：
子组件 Child.tsx里：
展示效果：
子传父跟react的方式一样，像子...
2023-01-05
详解React 和 Redux的关系
目录一、redux和react的关系二、react多组件共享三、redux的三个核心概念1、store2、action （动作）3、reducer （纯函数）总结文档： Redux中文文档Redux 官方文档对 Redux 的定义是...
2023-01-05
引入代码检查工具stylelint实战问题经验总结分享
目录前言正文1. 安装stylelint2. 配置文件3. 使用stylelint踩坑点1：4. 配置规则5. 忽略lint文件6. 自动格式化 插件踩坑集锦7. commit检测前言团队合作时，当每个人的代码都拥...
2023-01-05
React国际化react-i18next详解
简介react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。i18next 有着以下优点： 基于i18next不...
2023-01-05
React组件间通信的三种方法（简单易用）
目录一、父子组件通信二、跨级组件通信1、逐层传值2、跨级传值三、兄弟（无嵌套）组件通信四、路由传值五、Redux React知识中一个主要内容便是组件之间的通信，以下列举几种常用...
2023-01-05
基于CSS实现MaterialUI按钮点击动画并封装成 React 组件
前言作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue,...
2023-01-05
react 路由Link配置详解
1、Link的to属性
(1)放置路由路径
(2)放置对象,且为规定格式
{pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}}
会自动将pathname、search、hash拼接在ur...
2023-01-05
浅谈React多个setState会调用几次
目录1. 两个setState，调用几次？2. 两个setState，调用的是哪一个？3. 两个setState放在setTimeout中？4. 总结1. 两个setState，调用几次？如下代码所示，state中有一个count。对按钮绑定...
2023-01-05
浅谈React双向数据绑定原理
目录什么是双向数据绑定实现双向数据绑定数据影响视图视图影响数据如果已经学过Vue，并且深入了解过Vue的双向数据绑定的话，就会明白 Vue 2.0 双向数据绑定的核心其实是通过Obj...
2023-01-05
React中10种Hook的使用介绍
目录React Hook是什么？React目前提供的Hook1.useState2.useEffect & useLayoutEffect3.useMemo & useCallback4.useRef5.useContext6.useReducerReact Hook是什么？
React官网...
2023-01-05
JS跨域解决方案react配置反向代理
跨域解决方案 jsonp(模拟get)CORS(跨域资源共享)代理iframepostMessagewindow.nameWebSocketreact的代理实现跨域在配置在src/setupProxy.js文件，并通过npm安装http-proxy-...
2023-01-05
react实现无限循环滚动信息
本文实例为大家分享了react实现无限循环滚动信息的具体代码，供大家参考，具体内容如下需求后端传递过来的数据滚动显示，鼠标移入后停止滚动，鼠标移出后继续滚动，参考公司门户的公...
2023-01-05
react dva实现的代码
目录dva使用dva实现dva支持异步router的实现实现：dvadva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量...
2023-01-05
详解react-navigation6.x路由库的基本使用
目录react-native项目初始化安装react-native项目react-navigation路由库安装使用路由库路由跳转与路由传参设置路由标题自定义标题组件标题按钮react-native项目初始化打开...
2023-01-05
使用react-color实现前端取色器的方法
背景我们可以通过react-color实现前端界面的取色器，效果如下图所示：安装npm i react-color -S使用import React, { Component, Fragment, createRef } from 'react';import {...
2023-01-05
React项目如何使用Element的方法步骤
初次在react项目中使用element框架，碰到了一些很简单的问题，但是卡了很久才解决，写篇博客记录一下。1、安装：在项目目录下下载：
npm i element-react --savenpm install element-...
2023-01-05
jenkins分环境部署vue/react项目的方法步骤
vue/react部署请参考上一篇文章：https://www.jb51.net/article/238583.htm项目开发正常都需要开发环境、测试环境、生产环境，每个环境部署都比较麻烦，可以使用jenkins自动化部...
2023-01-05
记一个React.memo引起的bug
目录一般memo用法：问题描述解决方法方案一. 使用useRef + forceUpdate方案方案2. 使用useCallback总结与PureComponent不同的是PureComponent只是进行浅对比props来决定是否...
2023-01-05
react实现原生下拉刷新
react是基于vue下拉刷新做了一个小小的改动，供大家参考，具体内容如下我是用js写的 用jsx文件转化为jsx格式 ，如果用下载的react项目需要稍微改一下html代码<!DOCTYPE html><htm...
2023-01-05
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
React+Node实现大文件分片上传、断点续传秒传思路
目录1、整体思路2、实现步骤2.1 文件切片加密2.2 查询上传文件状态2.3 秒传2.4 上传分片、断点续传2.5 合成分片还原完整文件3、总结4、后续扩展与思考5、源码1、整体思路将...
2023-01-05
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
解决react中label标签for报错问题
要求：点击账号或密码，自动将焦点转到相关的表单控件(input)上。问题：功能可以使用，但是会有报错。解决办法：react中label标签没有for属性，用htmlFor代替for属性demo的代码：报错修改...
2023-01-05
react版模拟亚马逊人机交互菜单的实现
目录前言需求介绍实现方案实现需求3部分逻辑代码实现效果前言前段时间接了一个需求，实现一个模仿亚马逊和京东的菜单交互效果，这种效果被称为模拟人机交互。在网上搜了一下，目...
2023-01-05
react-pdf 打造在线简历生成器的示例代码
目录前言React-PDF 简介程序实现初始化项目实现逻辑遇到问题重构部署参考前言PDF 格式是30年前开发的文件格式，并且是使用最广泛的文件格式之一，我们最喜欢使用它作为简历、合...
2023-01-05
react-router-domV6版本的路由和嵌套路由写法详解
目录1 - 单级路由2 - 嵌套路由（about路径进行嵌套）React Router v6使用路由嵌套和重定向1 - 单级路由<NavLink to="/home">Home</NavLink><NavLink to="/about">about</NavLin...
2023-01-05
react实现简单的拖拽功能
本文实例为大家分享了react实现简单的拖拽功能的具体代码，供大家参考，具体内容如下src文件夹下新建文件夹demo 然后在创建两个文件js和cssdemo.js文件代码// react实现拖拽im...
2023-01-05
三分钟搞懂react-hooks及实例代码
目录背景useState类组件函数组件多状态声明useEffect类组件中componentDidMount和componentDidUpdateuseEffect模拟类组件中componentDidMount和componentDidUpdateuseEffec...
2023-01-05
一篇文章带你理解React Props的 原理
目录props理解1）props 可以是：2）props在React充当角色(3个角度)：3）监听props改变：操作 props1、抽象 props1）混入 props2）抽离 props2、注入 props1）显式注入 props2）隐式注入 props总...
2023-01-05
React-Router6版本的更新引起的路由用法变化
目录用法变化替换为嵌套路由重定向路由跳转路由传参search传参动态路由传参其他总结React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的...
2023-01-05
你知道怎么基于 React 封装一个组件吗
目录antd 是如何封装组件的仓库地址divider 组件源代码如何暴露组件属性如何设置统一类名前缀如何处理样式与类名divider 组件样式源代码总结前言很多小伙伴在第一次尝试封...
2023-01-05
React工作流程及Error Boundaries实现过程讲解
目录什么是Error Boundaries步骤1:捕获错误步骤2:构造callback执行callback总结这里简单讲解下React工作流程，后文有用。分为三步：触发更新render阶段：计算更新会造成的副作用c...
2023-01-05
React组件二次包装的具体实现
目录1. 类型声明2. 默认属性3. 自定义属性与属性透传原生组件是对公共场景的抽象，若要契合实际业务往往需要对其进行二次包装。
对组件进行二次包装一般需要进行包括不限于以...
2023-01-05
聊聊jenkins部署vue/react项目的问题
目录准备工作1、安装参数化部署插件2、安装好插件后，配置Nodejs环境创建项目构建centOS安装jenkins1、安装JDK2、安装jenkins3、配置jenkis的端口4、启动jenkinsjenkins安装...
2023-01-05
react 源码中位运算符的使用详解
位运算符基本使用按位与(&)：a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0按位或(|)：a | b对于每一个比特位,两个操作数都为 0 时, 结果为 0, 否则为 1按位...
2023-01-05
React中的axios模块及使用方法
目录1 axios介绍2 使用方法2.1 在React中安装axios2.2 get请求2.3 post请求：发送表单数据和文件上传2.4 put请求：对数据进行全部更新2.5 patch请求：只对更改过的数据进行更新2....
2023-01-05
一起来学习React元素的创建和渲染
目录React 和 ReactDOMReact 初体验创建 React 元素JSXJSX 初体验总结React 是一个用于构建用户界面的 JavaScript 库它包括两个库：react.js 和 react-dom.jsreact.js：React...
2023-01-05
深入理解React State 原理
目录问题：setState 到底是同步还是异步的？类组件statesetState原理揭秘函数组件state问题：setState 到底是同步还是异步的？如果对 React 底层有一定了解，可以回答出 batchUpdate...
2023-01-05
React中使用react-player 播放视频或直播的方法
业务中需要播放视频，寻来寻去，找到了react-player初次点击，甚是眼熟，思来想去，竟是钉钉同款如果使用react框架 先安装npm install --save video-react react react-dom redux1.引...
2023-01-05
