120浏览

0评论

react-redux及redux状态管理工具使用详解

目录react-redux使用及原理1、下载 react-redux redux redux-thunk三个依赖包2、配置store对象，用来管理全局状态3、创建reducer.js文件， reducer文件主要是用来处理改变store...

• 2023-04-18

117浏览

0评论

路由react-router-dom的基本使用教程

目录react-router-dom路由简介react-router-dom路由的基本使用设置默认路由常用组件介绍Router组件路由的执行过程编程式导航匹配模式模糊匹配-默认react-router-dom路由简...

• 2023-04-18

135浏览

0评论

解决jest处理es模块示例详解

目录问题场景解决方法问题场景项目使用jest进行测试时, 当引入外部库是es模块时, jest无法处理导致报错.Test suite failed to run Jest encountered an unexpected toke...

• 2023-04-18

113浏览

0评论

React替换传统拷贝方法的Immutable使用

目录immutable安装使用Map嵌套MapList实现个人修改案例immutable它是一款代替传统拷贝方式的第三方库优势:在新对象上操作不会影响原对象的数据性能好安装使用1.下载 npm i...

• 2023-04-18

142浏览

0评论

React Fiber构建源码解析

目录引言一. Fiber是什么二. FiberRootfiberRoot生成fiberRoot类三. RootFiberrootFiber生成createHostRootFiberFiberNodeflagslaneinitializeUpdateQueue四. RootupdateCo...

• 2023-04-18

122浏览

0评论

react项目中使用react-dnd实现列表的拖拽排序功能

目录1.先安装依赖2.创建一个 index.js 文件3.新建example.js文件4.新建TopicLis.js文件5.新建 ItemTypes.js现在有一个新需求就是需要对一个列表，实现拖拽排序的功能，要实现的...

• 2023-04-18

131浏览

0评论

React超详细讲述Fiber的使用

目录Fiber概念结构Fiber树的遍历是这样发生的深度遍历window.requestIdleCallback()requestAnimationFrameFiber是如何工作的结论Fiber概念JavaScript引擎和页面渲染引擎两...

• 2023-04-18

138浏览

0评论

React高阶组件优化文件结构流程详解

其实高阶组件是一个将组件写的更灵活的方式，他的应用场景在业务开发中会非常多样这里 我们演示一种 主要还是解决问题的思想最重要 或者是 这个不叫解决问题 而是设计组件结...

• 2023-04-18

120浏览

0评论

React Router6.x路由表封装的两种写法

目录一. 标签形式二. 对象形式三. 实现一个经典的左目录右内容布局结构（使用对象路由方式）一. 标签形式src 文件夹下创建一个 routers 文件夹，用于存放路由表src/routers 文件...

• 2023-04-18

104浏览

0评论

React里的Fragment标签的具体使用

目录<></>包裹多个元素&darr;： 使用Fragment标签&darr;：<></>和Fragment标签的区别react return里返回多个元素值要有父标签包裹。React.Fragment组件能够在不额外创建 DOM 元...

• 2023-04-18

141浏览

0评论

react使用.env文件管理全局变量的方法

目录前言1.在根目录创建一个 .env 文件2.配置全局变量3.在项目中使用4.效果图前言本文基于“react”: “^18.2.0”1.在根目录创建一个 .env 文件2.配置...

• 2023-04-18

157浏览

0评论

react-native 封装视频播放器react-native-video的使用

目录前言react-native-orientation-lockerreact-native-video全屏实现方案（可参考）尾言前言最近工作业务用到了react-native-video，还需要能够全屏，全屏需要用到锁定应用方向（横...

• 2023-04-18

111浏览

0评论

React中使用Mobx的方法

目录一、Mobx前端状态管理框架 基础概念？1. 什么是Mobx2. 什么是状态管理？3. 为什么需要状态管理？状态管理的一般思想（Flux）二、mobx的用法1. 安装 mobx2. 安装 mobx 与 react 关...

• 2023-04-18

120浏览

0评论

React Fiber构建completeWork源码解析

目录引言一. completeUnitOfWork二. completeWorkcreateInstancecreateElementappendAllChildren三. EffectuseEffectresolveDispatchermountEffectImplpushEffect四. rootF...

• 2023-04-18

123浏览

0评论

React Fiber构建beginWork源码解析

目录引言一. scheduleUpdateOnFiber二. performSyncWorkOnRootrenderRootSyncworkLoopSyncperformUnitOfWork三. beginWorkupdateHostRootreconcileChildrenreconcileChildF...

• 2023-04-18

124浏览

0评论

React中的useEffect useLayoutEffect到底怎么用

目录前言介绍使用空依赖非空依赖实现销毁操作两者区别前言使用缘由：在函数中当请求数据时并且给state赋值会导致整个函数刷新，从而导致死循环的进行数据请求， 所以这时候可以用...

• 2023-04-18

148浏览

0评论

使用React Hooks模拟生命周期的实现方法

目录前言constructorcomponentDidMount使用 hooks 模拟 componentDidMountshouldComponentUpdatecomponentDidUpdatecomponentWillUnmount总结参考链接前言在 React 16.8 之...

• 2023-04-18

134浏览

0评论

React性能优化的实现方法详解

目录前言遍历视图key使用React.memo缓存组件React.useCallback让函数保持相同的引用避免使用内联对象使用React.useMemo缓存计算结果或者组件使用React.Fragment片段组件懒...

• 2023-04-18

122浏览

0评论

Redux中间件的使用方法教程

目录前言应用如何创建一个中间件如何应用中间件原理前言在Express框架中，middleware是指可以被嵌入在框架接收请求到产生响应过程中的代码。在Redux中，middleware提供的是位于...

• 2023-04-18

139浏览

0评论

react Table准备Spin Empty ConfigProvider组件实现

目录前言目录结构开搞ConfigProviderEmpty组件实现Spin组件前言继续搞react组件库，该写table了，学习了arco design的table的运行流程，发现准备工作还是挺多的，我们就先解决以下...

• 2023-04-18

121浏览

0评论

react中定义变量并使用方式

目录react定义变量并使用这里面涉及到了react全局变量的设置总结react定义变量并使用这里面涉及到了1、变量如何定义2、变量如何进行改变3、方法如何调用都写有详细的注释大...

• 2023-04-18

120浏览

0评论

React中style的使用及注意事项(推荐)

目录React中style的使用注意事项补充：React 组件的 style 样式使用相关问题React中style的使用注意事项 React中style的使用和直接在HTML中使用有些不同，第一，React中必须是...

• 2023-04-18

149浏览

0评论

深入了解React中的合成事件

1 事件三个阶段 捕获、目标、处理 （具体百度，后面有空补全）2 示例import React from "react"; class Test extends React.Component { parentRef; childRef; constructor(pr...

• 2023-04-18

118浏览

0评论

React中的合成事件是什么原理

目录事件介绍什么是事件React合成事件基础知识什么是合成事件为什么会有合成事件合成事件机制简述React合成事件实现原理事件注册React中模拟冒泡和捕获事件介绍什么是事件...

• 2023-04-18

136浏览

0评论

react实现组件状态缓存的示例代码

目录前言一、安装第三方库二、配置操作总结前言在移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页...

• 2023-04-18

426浏览

0评论

antd upload上传如何获取文件宽高

目录antd upload上传获取文件宽高antd上传文件限制大小 react Hooks总结antd upload上传获取文件宽高项目新加的需求，需要判断上传图片的宽高，查了一下antd-upload组件貌似不...

• 2023-04-18

126浏览

0评论

React onClick/onChange传参(bind绑定)问题

目录React onClick/onChange传参(bind绑定)React基础语法与组件传参react 特点jsx 语法react组件模板语法事件state表单的数据绑定组件解构dom 引用总结React onClick/onCha...

• 2023-04-18

141浏览

0评论

React中useState值为对象时改变值不渲染问题

目录useState值为对象时改变值不渲染问题原因解决useState用法指南useState函数式更新两种方式的区别性能优化总结useState值为对象时改变值不渲染问题修改State并重新setSt...

• 2023-04-18

134浏览

0评论

React中使用Axios发起POST请求提交文件方式

目录使用Axios发起POST请求提交文件React中fetch和axios的简单使用fetch的使用Axios的使用总结使用Axios发起POST请求提交文件通过Axios发起POST请求向后端提交文件FormData...

• 2023-04-18

103浏览

0评论

React中useCallback useMemo使用方法快速精通

目录useCallback和useMemo的区别useMemouseCallback首先从简单的讲一下两者的区别useCallback和useMemo的区别基本使用 // 贴上代码片利于复制 import { React, useState, u...

• 2023-04-18

121浏览

0评论

React 中使用 RxJS 优化数据流的处理方案

目录正文一般来说，处理组件中的数据流无非三种情况：下面我们看一个很简单的例子：那么，问题来了，使用数据流的方式来处理数据有什么好处呢？正文现在我们比较熟悉的是使用 functiona...

• 2023-04-18

148浏览

0评论

React中state属性和生命周期的使用

目录一、React组件的state属性和生命周期1、state的定义2、更新状态(state)3、组件的生命周期（1）挂载(mount)（2）案例（隐藏或显示实时更新的计时器）（3）更新(update)（4）卸载(unmount)总...

• 2023-04-18

243浏览

0评论

React使用PropTypes实现类型检查功能

目录使用 PropTypes 进行类型检查PropTypes限制单个元素默认 Prop 值使用 PropTypes 进行类型检查react 内置类型检查功能要在组件的 props 上进行类型检查，你只需配置特定的...

• 2023-04-18

135浏览

0评论

React中关于render()的用法及说明

目录React中的render()1、render()2、当 render 被调用时3、render() 函数应该为纯函数4、如需与浏览器进行交互5、在React.Component类6、在react中触发render的有4条路径7...

• 2023-04-18

124浏览

0评论

React移动端项目之pdf预览问题

目录React移动端项目之pdf预览引入react-pdf包封装pdf组件：（官网demo）React pdf前端显示 react-pdf-js踩坑报错 总结React移动端项目之pdf预览因为项目需要，需要在在项目中实现p...

• 2023-04-18

124浏览

0评论

react中关于函数调用()与bind this的原因及分析

目录关于函数调用()与bind this的原因答1答2总结关于函数调用()与bind this的原因以下内容主要基于onClick的回调函数解决方案官方文档对于jsx回调函数解释对待 JSX 回调函...

• 2023-04-18

156浏览

0评论

reactjs学习解决unknown at rule @tailwind css问题

目录解决unknown at rule @tailwind cssReact配置Tailwindcss问题 步骤测试总结解决unknown at rule @tailwind css安装tailwind，以及配置了tailwind css intellisense也无法...

• 2023-04-18

148浏览

0评论

react如何获取URL中参数

目录react获取URL中参数react 获取URL原理下面是几个例子react获取页面跳转URL携带的参数总结react获取URL中参数这个问题想必很多人都会遇到过，这里我说一下怎么获取URL中的...

• 2023-04-18

114浏览

0评论

React组件渲染后对DOM的操作方式

目录React组件渲染后对DOM的操作先看下显示效果完整代码如下React组件渲染原理jsx如何生成elementelement如何转化成真实DOM节点的总结React组件渲染后对DOM的操作在React.j...

• 2023-04-18

108浏览

0评论

工程级 React 注册登录全栈级流程分析

目录创建前端项目前端目录结构引入 UI 组件库引入路由引入 redux注册组件样式收集注册数据完成登录组件创建后端项目使用 Postman 测试接口自动重启后端工具使用 mongodb编...

• 2023-04-18

165浏览

0评论

React实现一个倒计时hook组件实战示例

目录前言思路实现总结前言本篇文章主要实现一个无样式的倒计时 hook 组件，通常不同地方的倒计时样式都不同，但倒计时的逻辑基本是都是一样的，因此可以抽离成一个工具方法或者一...

• 2023-04-18

136浏览

0评论

react脚手架配置代理的实现

目录方法一方法二方法一在package.json 中追加如下配置"proxy":"http://localhost:5000"说明：优点： 配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理工作方式：...

• 2023-04-18

126浏览

0评论

React组件与事件的创建使用教程

目录创建组件函数组件类组件组件提取到单独的文件中有状态组件与无状态组件类组件的状态事件处理创建组件函数组件函数组件：使用JS的函数或者箭头函数创建的组件使用 JS 的函...

• 2023-04-18

157浏览

0评论

react render的原理及触发时机说明

目录react render的原理及触发时机原理触发时机react Scheduler 原理scheduler是什么？时间切片任务调度总结react render的原理及触发时机理解react的render函数，要从这三点来...

• 2023-04-18

170浏览

0评论

解读react的onClick自动触发等相关问题

目录react的onClick自动触发等问题react的onClick事件调用的各种写法与触发情况handleClick 是普通函数handleClick 是箭头函数总结react的onClick自动触发等问题react分页...

• 2023-04-18

128浏览

0评论

React之关于Promise的用法

目录1.Promise是什么？2.Promise对象的特点？3.Promise的缺点？4.Promise的基本用法？5.Promise 新建后就会立即执行?6.链式任务总结1.Promise是什么？从用途上来说：(1)promise主要用于...

• 2023-04-18

130浏览

0评论

React组件的用法概述

目录组件的定义：React组件函数式组件类式组件组件实例三大属性statepropsrefs与事件处理组件的定义：理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什...

• 2023-04-18

129浏览

0评论

使用react完成点击返回顶部操作

首先我们先写返回顶部的样式
然后绑定一个点击事件，滚动到顶部BackTop onClick={this.props.toTop}>返回</BackTop>toTop(){        console.log(111)        window...

• 2023-04-18

393浏览

0评论

React+umi+typeScript创建项目的过程

目录项目框架搭建的方式react脚手架Ant-design官网一、安装方式npm二、安装方式yarn三、安装方式umi dev项目框架搭建的方式react脚手架命令行：npx create-react-app myReact...

• 2023-04-18

113浏览

0评论

React高级指引之Refs and the DOM使用时机详解

目录Refs and the DOM何时使用 Refs勿过度使用 Refs创建 Refs访问 Refs将 DOM Refs 暴露给父组件回调 RefsRefs and the DOMRefs 提供了一种方式，允许我们访问 DOM 节点或在...

• 2023-04-18