JavaScript - 教程之家

125浏览

0评论

react实现无限循环滚动信息

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

2023-01-05

110浏览

0评论

react dva实现的代码

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

2023-01-05

118浏览

0评论

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

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

2023-01-05

104浏览

0评论

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

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

2023-01-05

143浏览

0评论

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

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

2023-01-05

138浏览

0评论

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

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

2023-01-05

121浏览

0评论

记一个React.memo引起的bug

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

2023-01-05

130浏览

0评论

react实现原生下拉刷新

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

2023-01-05

136浏览

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

92浏览

0评论

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

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

2023-01-05

147浏览

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

122浏览

0评论

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

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

2023-01-05

124浏览

0评论

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

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

2023-01-05

153浏览

0评论

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

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

2023-01-05

146浏览

0评论

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

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

2023-01-05

115浏览

0评论

react实现简单的拖拽功能

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

2023-01-05

109浏览

0评论

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

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

2023-01-05

121浏览

0评论

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

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

2023-01-05

111浏览

0评论

React-Router6版本的更新引起的路由用法变化

目录用法变化替换为嵌套路由重定向路由跳转路由传参search传参动态路由传参其他总结React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的...

2023-01-05

108浏览

0评论

你知道怎么基于 React 封装一个组件吗

目录antd 是如何封装组件的仓库地址divider 组件源代码如何暴露组件属性如何设置统一类名前缀如何处理样式与类名divider 组件样式源代码总结前言很多小伙伴在第一次尝试封...

2023-01-05

90浏览

0评论

React工作流程及Error Boundaries实现过程讲解

目录什么是Error Boundaries步骤1:捕获错误步骤2:构造callback执行callback总结这里简单讲解下React工作流程，后文有用。分为三步：触发更新render阶段：计算更新会造成的副作用c...

2023-01-05

133浏览

0评论

React组件二次包装的具体实现

目录1. 类型声明2. 默认属性3. 自定义属性与属性透传原生组件是对公共场景的抽象，若要契合实际业务往往需要对其进行二次包装。
对组件进行二次包装一般需要进行包括不限于以...

2023-01-05

101浏览

0评论

聊聊jenkins部署vue/react项目的问题

目录准备工作1、安装参数化部署插件2、安装好插件后，配置Nodejs环境创建项目构建centOS安装jenkins1、安装JDK2、安装jenkins3、配置jenkis的端口4、启动jenkinsjenkins安装...

2023-01-05

94浏览

0评论

react 源码中位运算符的使用详解

位运算符基本使用按位与(&)：a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0按位或(|)：a | b对于每一个比特位,两个操作数都为 0 时, 结果为 0, 否则为 1按位...

2023-01-05

93浏览

0评论

React中的axios模块及使用方法

目录1 axios介绍2 使用方法2.1 在React中安装axios2.2 get请求2.3 post请求：发送表单数据和文件上传2.4 put请求：对数据进行全部更新2.5 patch请求：只对更改过的数据进行更新2....

2023-01-05

227浏览

0评论

一起来学习React元素的创建和渲染

目录React 和 ReactDOMReact 初体验创建 React 元素JSXJSX 初体验总结React 是一个用于构建用户界面的 JavaScript 库它包括两个库：react.js 和 react-dom.jsreact.js：React...

2023-01-05

113浏览

0评论

深入理解React State 原理

目录问题：setState 到底是同步还是异步的？类组件statesetState原理揭秘函数组件state问题：setState 到底是同步还是异步的？如果对 React 底层有一定了解，可以回答出 batchUpdate...

2023-01-05

307浏览

0评论

React中使用react-player 播放视频或直播的方法

业务中需要播放视频，寻来寻去，找到了react-player初次点击，甚是眼熟，思来想去，竟是钉钉同款如果使用react框架先安装npm install --save video-react react react-dom redux1.引...

2023-01-05

107浏览

0评论

你知道怎么在 HTML 页面中使用 React吗

目录index.html代码：index.js代码：ReactComponentContainer.js代码：HelloReact.jsx代码：遇到的问题：Gitee代码地址：总结该方案使用场景：在html页面中使用react，主js文件index.js和其...

2023-01-05

127浏览

0评论

React 组件权限控制的实现

目录前话正文1. 控制方式1.1 直接计算1.2 通用权限Hoc1.3 权限包裹组件2. 控制结果2.1 显隐控制2.2 自定义渲染3. 权限数据3.1 静态权限3.2 动态权限前话具备用户体系的业务...

2023-01-05

111浏览

0评论

React自定义Hook-useForkRef的具体使用

目录开篇思路实现自定义 Hook - useForkRef开篇使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素，而在使用 React 封装组件时，会有这样一个场景：组件将 prop...

2023-01-05

108浏览

0评论

react中的双向绑定你真的了解吗

前言：因为项目原因需要学习另一个超级火的框架react, 因为之前一直使用vue进行开发，所以在学习react中会不自觉的代入一些vue中的概念来理解react中的实现，下面就通过对比学习...

2023-01-05

91浏览

0评论

React的事件处理你了解吗

目录一、React的事件处理1、与DOM事件处理的不同之处（1）React事件的命名方式：小驼峰方式，DOM的命名方式是小写（2）事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值（3）阻止...

2023-01-05

109浏览

0评论

react中JSX的注意点详解

目录1 JSX 是一个表达式2 JSX 的属性2.1 驼峰命名2.2 style 接收一个对象3 JSX 标签没有子元素4 JSX 防止注入攻击5 唯一父元素总结1 JSX 是一个表达式JSX 是 JavaScript 的...

2023-01-05

85浏览

0评论

快速创建React项目并配置webpack

目录1.快速创建React项目2.安装所需包3.根目录创建webpack.config.js文件，代码如下4.在根目录下添加文件 .babelrc，代码如下5.修改 package.json6.修改public/index.html文件7...

2023-01-05

108浏览

0评论

React中代码分割的4种实现方式

目录前言import()React.lazyimport() + React LoadableUmiJS 按需加载总结前言在 React 应用中，我们通常的做法是直接将某个模块导入到页面中，这样做导致的结果是打包出来的包...

2023-01-05

337浏览

0评论

深入理解React 三大核心属性

目录1、State 属性2、Props 属性3、Refs 属性（1）字符串形式（2）函数回调形式（3）createRef 创建 ref 容器1、State 属性React 把组件看成是一个状态机（State Machines）。通过与用户...

2023-01-05

89浏览

0评论

React的三大属性你都知道吗

目录React三大属性props函数组件类组件state有状态组件和无状态组件setStateprops和state属性的区别refsReact.createRefref的绑定总结React三大属性props组件是封闭的，接收...

2023-01-05

86浏览

0评论

react实现导航栏二级联动

本文实例为大家分享了react实现导航栏二级联动的具体代码，供大家参考，具体内容如下效果图js代码import { Component } from "react";import './scroll.less' class Scroll ex...

2023-01-05

96浏览

0评论

在react中使用mockjs的方法你知道吗

目录介绍安装&卸载&引入基础语法&规范 7种生成规则生成规则和属性值value的关系占位符@模拟接口总结介绍mock意为“模仿”或"模拟"，简单来说，就是造数据，造你想要的...

2023-01-05

219浏览

0评论

React Native集成支付宝支付的实现方法

在RN应用开发过程中，集成支付宝和微信支付除了直接使用第三方的插件之，比如：react-native-yunpeng-alipay，我们还可以借助RN提供的NativeModules调用原生模块来实现支付。Native...

2023-01-05

263浏览

0评论

React中前端路由的示例代码

目录一. url是什么二. 使用步骤一. url是什么访问不同url, 展示不同的组件二. 使用步骤安装React路由：命令行中执行npm install react-router-dom --save(注意此处的版本为np...

2023-01-05

105浏览

0评论

React 数据共享useContext的实现

因为疫情，最近接手一个新项目。是React的。上次写React已经过去1年多了。虽然捡起来也不是什么难事，不过技术这个东西，长时间不用就容易忘记。为了保证这个项目根其他平行项目...

2023-01-05

125浏览

0评论

说说react中引入css的方式有哪些并区别在哪

目录前言方式在组件内组件中引入css文件组件中引入 .module.css 文件CSS in JS区别前言组件式开发选择合适的css解决方案尤为重要通常会遵循以下规则：可以编写局部css，不会随...

2023-01-05

90浏览

0评论

react中的axios模块你了解吗

目录一、react中axios模块的使用1、基于Promise的HTTP库用在浏览器和node.js中2、创建XMLHttpRequest对象：3、在react中安装axios4、发起不带参数的get请求5、带参数的get请...

2023-01-05

96浏览

0评论

React经典面试题之倒计时组件详解

目录闲聊倒计时组件——需求描述：问题最后闲聊关于面试大家常常吐槽：“面试造火箭，工作拧螺丝。”，从而表达了对工作内容和能力要求匹配不一的现状。不排除...

2023-01-05

362浏览

0评论

如何在React项目中使用AntDesign

目录0.前言1.AntDesign是什么？2.AntDesign如何使用？3.如何具体使用AntDdesign的组件3-1.如何使用 antd 的Table组件3-2.如何使用 antd 的Button组件4.后续0.前言我们在后台管...

2023-01-05

114浏览

0评论

React中styled-components的使用

目录一、官网地址二、styled-components三、基本使用四、全局默认样式引入五、传参六、继承七、修改组件内部标签八、定义组件属性九、背景图片引入十、塑造组件十一、动画`...

2023-01-05

119浏览

0评论

React18新增特性released的使用

目录新功能：Automatic Batching新功能：Transitions新的Suspense功能新的客户端和服务器Rendering APIsReact DOM ClientReact DOM Server新的Strict Mode Behaviors新HooksRea...

2023-01-05

91浏览

0评论

一起来了解React的Hook

目录StateHook声明多个state变量那么，什么是Hook?EffectHookHook使用规则自定义Hook其他Hook总结State Hook这个例子用来显示一个计数器。当你点击按钮，计数器的值就会增加：imp...

2023-01-05

热门文章