50浏览

0评论

React中使用react-file-viewer问题

目录使用react-file-viewerreact-file-viewer预览本地文件解决思路使用react-file-viewer1.npm install react-file-viewer2.在组建中引入import FileViewer from 'reac...

• 2023-01-05

34浏览

0评论

React中使用antd组件的方法

目录antd使用antdantdantd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。国内镜像为：https://ant-design.gitee.io/docs/react/introduce-cn...

• 2023-01-05

50浏览

0评论

使用react在修改state中的数组和对象数据的时候(setState)

目录react修改state的数组和对象数据的时候(setState)需要注意react修改数组对象的注意事项删除数组中的指定元素合并两个对象修改多层级对象的值react修改state的数组和对...

• 2023-01-05

61浏览

0评论

react中使用forEach或map两种方式遍历数组

目录使用forEach或map两种方式遍历数组forEachmap循环遍历数组时map和forEach的区别forEach情况map 情况使用forEach或map两种方式遍历数组之前写代码，从后台提取数据并渲染...

• 2023-01-05

50浏览

0评论

React中编写CSS实例详解

目录正文内联样式普通的CSScss modulescss in js样式组件引入外部变量默认值引入全局样式provider样式继承动态添加class正文目前，前端最流行的开发方式是组件化，而CSS的设计...

• 2023-01-05

57浏览

0评论

React状态管理器Rematch的使用详解

目录Rematch使用1. Rematch介绍2. Rematch特性3. 基本使用Rematch使用1. Rematch介绍Rematch是没有样板文件的Redux的最佳实践，没有action types、 action creators, 状态转...

• 2023-01-05

48浏览

0评论

一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()

目录前言什么是Concurrent React？设置项目实现 useTransition()isPending 是做什么的？前言React 18 引入了一个关键的新概念，称为“Concurrent”。并发涉及同时执行...

• 2023-01-05

50浏览

0评论

一文理解Redux及其工作原理

目录一、是什么二、工作原理三、如何使用小结一、是什么React是用于构建用户界面的，帮助我们解决渲染DOM的过程而在整个应用中会存在很多个组件，每个组件的state是由自身进行...

• 2023-01-05

56浏览

0评论

React 组件性能最佳优化实践分享

目录React 组件性能优化最佳实践组件卸载前进行清理操作类组件使用纯组件PureComponent什么是纯组件什么是浅层比较shouldComponentUpdate纯函数组件使用React.memo优化性能...

• 2023-01-05

65浏览

0评论

React Native 的动态列表方案探索详解

目录背景技术方案介绍内存异常处理未来规划背景时至2022，精细化运营已经成为了各大App厂商的强需求，阿里的 DinamicX、Tangram 大家应该都很熟悉了，很多App厂商也自研了一些类...

• 2023-01-05

171浏览

0评论

react中的watch监视属性-useEffect介绍

目录react的watch监视属性-useEffectuseEffect使用指南最基本的使用响应更新如何处理Loading和Error处理表单自定义hooks使用useReducer整合逻辑取消数据请求react的watch监...

• 2023-01-05

47浏览

0评论

React18新增特性介绍

React 18 最新的特性
批处理文件
在同一个 函数中, 调用多次 useState 也只是会更新一次function App() { const [count, setCount] = useState(0); const [flag, setFlag...

• 2023-01-05

47浏览

0评论

react card slider实现滑动卡片教程示例

目录效果实现card-slider.tsxcard-item.tsxApp.tsx效果实现通过zIndex控制层级，opacity控制透明度，transform 控制卡片缩放程度，marginLeft控制位置，剩下的就是计算的事了card-s...

• 2023-01-05

48浏览

0评论

redux功能强大的Middleware中间件使用学习

目录引言redux中的Middleware记录日志手动记录redux-sagaGenerator函数实际使用场景引言上一节我们学习了redux在实际项目的应用细节，这一节我们来学习redux中一个很重要的概...

• 2023-01-05

71浏览

0评论

React+Mobx基本使用、模块化操作

目录Mobx介绍1.什么是Mobx2.Mobx有什么优势3.社区评价浏览器支持基础使用1. 初始化mobx2. React使用storeMobx - computedMobx - 模块化实现步骤代码实现Mobx - 总结Mobx介...

• 2023-01-05

62浏览

0评论

react父组件更改props子组件无法刷新原因及解决方法

目录项目场景：1、创建父组件2、创建子组件问题描述原因分析：解决方案：项目场景：使用过vue的朋友都知道，vue父组件更改props的值，子组件是会刷新的，而react就未必。
先看以下例子：1、...

• 2023-01-05

48浏览

0评论

react+tsx中使用better-scroll详解

目录配置与初始化实践react+tsx中使用better-scroll首先，你要知道为什么可以滚动，原理很简单，父容器的高度比子元素的小即可。在这之前，我们先来看一下浏览器的滚动原理： 浏览器...

• 2023-01-05

54浏览

0评论

React项目中使用Redux的 react-redux

目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例：计数器背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而r...

• 2023-01-05

51浏览

0评论

React+CSS 实现绘制竖状柱状图

前言：页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。先来看柱状图 + 文字这一部分。宽度定为 width: 55, height 高度使用百分比进行动态变化。整个部分使用 fl...

• 2023-01-05

45浏览

0评论

关于useEffect执行两次的问题及解决

目录useEffect执行两次问题父组件里面 子组件里面react使用useEffect及踩坑useEffect 介绍重要理解useEffect常见跳坑useEffect执行两次问题在useEffect第二个参数变化的时...

• 2023-01-05

50浏览

0评论

react中braft-editor的基本使用方式

目录braft-editor的基本使用项目需求使用braft-editor踩坑记,引用 braft-utils有错误遇到的问题解决方式braft-editor的基本使用项目需求实现照片上传，富文本为空时的提示，官...

• 2023-01-05

45浏览

0评论

React this.setState方法使用原理分析介绍

目录摘要1.异步的setState2.多个setState方法3.手动实现mySetState摘要这一篇文章，主要是简单的实现一下this.setState方法，为了实现该方法，就要知道this.setState方法具有什么...

• 2023-01-05

43浏览

0评论

React Hooks useReducer 逃避deps组件渲染次数增加陷阱

目录前言自定义 Hooks 简单实现在组件中使用自定义 Hooks提前阻止 dispatch 触发优化后再测试结论题外前言在快乐使用 React Hooks 开发自定义 Hooks 过程中，使用了 useEffec...

• 2023-01-05

55浏览

0评论

React Native可复用 UI分离布局组件和状态组件技巧

目录引言包装 Context.Provider 作为父组件使用 Context Hook 来实现子组件使用 React 顶层 API 动态设置样式复用 Context，实现其它子组件抽取共同状态逻辑自由组合父组件与...

• 2023-01-05

313浏览

0评论

react组件中过渡动画的问题解决

目录一、是什么二、如何实现CSSTransitionSwitchTransitionTransitionGroup一、是什么在日常开发中，页面切换时的转场动画是比较基础的一个场景当一个组件在显示与消失过程中...

• 2023-01-05

48浏览

0评论

React Hooks之usePolymerAction抽象代码结构设计理念

目录背景设计理念抽象代码结构声明与定义用法高级用法拆分/合并actionAPIuseSetStategetActionpolymerActionusePolymerActionStatemergePolymerAction背景随着React Hooks...

• 2023-01-05

44浏览

0评论

关于useEffect的第二个参数解读

目录useEffect的第二个参数useEffect规则第二个参数的规则不同值的参数示例useEffect使用技巧useEffect的第二个参数useEffect规则在每次render之后执行接收第二个参数来控...

• 2023-01-05

59浏览

0评论

react使用useImperativeHandle示例详解

目录1.前言2.useImperativeHandle初探3.获取元素的几种方式3.1 useRef：获取组件内部元素3.2 forwardRef：父组件获取子组件内部的一个元素3.3 useImperativeHandle：父组件可以获...

• 2023-01-05

101浏览

0评论

React中的生命周期详解

目录react生命周期常用的生命周期不常用的生命周完整的生命周期图react生命周期函数组件无生命周期，生命周期只有类组件才拥有生命周期函数指在某一时刻组件会自动调用并执行...

• 2023-01-05

48浏览

0评论

react中代码块输出,代码高亮显示,带行号,能复制的问题

目录react 代码块输出,代码高亮显示,带行号,能复制以modal组件为例infoModal.less样式react 代码块插件代码块插件react 代码块输出,代码高亮显示,带行号,能复制以modal组件...

• 2023-01-05

39浏览

0评论

React 全面解析excel文件

目录React解析excel文件React上传excel预览React解析excel文件首先安装安装xlsx插件yarn add xlsx使用xlsx解析    /**     * 上传文件并解析成json     */    co...

• 2023-01-05

312浏览

0评论

关于react 父子组件的执行顺序

目录react父子组件的执行顺序1.class组件 2.函数组件 hooks无依赖的情况react父子组件的执行顺序react版本：17.x，在此版本中完全可以用Hooks去进行开发了，开始先讲class组件，只...

• 2023-01-05

59浏览

0评论

React的特征单向数据流学习

目录正文状态 => 视图事件 => 状态改变 => 视图正文React推荐one-way单向数据流，注意只是推荐，并不强制，常见有以下两种情况:状态 => 视图事件 => 状态改变 => 视图状态 => 视...

• 2023-01-05

47浏览

0评论

React less 实现纵横柱状图示例详解

目录引言主要设计来源display 布局display 布局动态位置使用绝对定位styleJS引言之前的文章，咱们介绍过横向和竖向，具体的内容，请看React + CSS 绘制横向柱状图React + CSS 绘...

• 2023-01-05

46浏览

0评论

react-native 父函数组件调用类子组件的方法(实例详解)

react-native 父函数组件调用类子组件的方法，代码如下所示：import React, {Component} from 'react';import {Text, View, TouchableOpacity} from 'react-native';// 父let...

• 2023-01-05

45浏览

0评论

在React项目中使用TypeScript详情

目录项目目录及ts文件划分在项目中使用TypeScript具体实践组件声明React Hooks使用useStateuseRefuseCallbackuseMemouseContextuseReduceruseImperativeHandleAxios请求/响...

• 2023-01-05

56浏览

0评论

React.memo函数中的参数示例详解

目录React.memo？这是个啥？React.memo的第一个参数父组件子组件React.memo优化React.memo的第二个参数父组件子组件React.memo优化父组件子组件小结React.memo？这是个啥？按照官方...

• 2023-01-05

40浏览

0评论

React前端路由应用介绍

浏览器端的前端路由模式：hash模式，history模式安装路由模块路由模块不是react自带模块，需要安装第3方模块// react-router-dom 它现在最新的版本6
npm i -S react-router-dom@5...

• 2023-01-05

50浏览

0评论

react-native 实现渐变色背景过程

目录react-native 渐变色背景react-native学习记录滚动条轮播图示例渐变色ScrollableTabView默认页面ScrollableTabView背景颜色ScrollableTabView选中颜色ScrollableTabVie...

• 2023-01-05

58浏览

0评论

Vite+React搭建开发构建环境实践记录

目录前言使用 create-vite 脚手架生成基础模板eslintprettierreact-routerantd别名Less 与 CSS Module总结前言使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过...

• 2023-01-05

48浏览

0评论

使用react-native-image-viewer实现大图预览

目录react-native-image-viewer大图预览先看一个实现的效果实例下面是一个简单的实例代码Propsreact-native-image-viewer大图预览在移动开发中，特别是涉及到图片的应用开发...

• 2023-01-05

55浏览

0评论

hooks中useEffect()使用案例详解

常见使用:获取数据案例:import React, { useState, useEffect } from 'react';import axios from 'axios';function App() { const [data, setData] = useState({ hits: []...

• 2023-01-05

56浏览

0评论

React特征Form 单向数据流示例详解

目录引言集中状态管理双向数据流那为何不选择双向数据流小结引言今天将之前的内容做个系统整理，结合 React Form 案例， 来了解下为何React推荐单向数据流，如果采用双向管理，可能...

• 2023-01-05

234浏览

0评论

React 错误边界Error Boundary使用示例解析

目录我们为什么需要错误边界如何使用错误边界组件使用错误边界需要注意什么我们为什么需要错误边界在React组件中可能会由于某些JavaScript错误，导致一些无法追踪的错误，导致...

• 2023-01-05

144浏览

0评论

React从命令式编程到声明式编程的原理解析

目录1 HTML 构建静态页面2 DOM 构建页面3 从命令式到声明式4 JSX5 总结6 完整代码这个系列的目的是通过使用 JS 实现“乞丐版”的 React，让读者了解 React 的基本...

• 2023-01-05

58浏览

0评论

react项目中@路径简单配置指南

目录前言1. 安装craco2.根路径下创建 craco.config.js3. 修改package.json文件的script字段4.使用补充：React 配置 @ 路径别名总结前言无论是vue还是react开发，我们通常需要引...

• 2023-01-05

57浏览

0评论

react装饰器与高阶组件及简单样式修改的操作详解

使用装饰器调用装饰器 用来装饰类的，可以增强类，在不修改类的内部的源码的同时，增强它的能力(属性或方法)装饰器使用@函数名写法，对类进行装饰，目前在js中还是提案，使用需要配置相...

• 2023-01-05

52浏览

0评论

一文详解React Redux使用方法

目录一、理解JavaScript纯函数1.1 纯函数的概念1.2 副作用概念的理解1.3 纯函数在函数式编程的重要性二、Redux的核心思想2.1 为什么需要 Redux2.2 Redux的核心概念2.2.1 st...

• 2023-01-05

75浏览

0评论

react中关于Context/Provider/Consumer传参的使用

目录Context/Provider/Consumer传参使用Context使用context向后代组件传参Context/Provider/Consumer传参使用react context这个api很少用到,所以一直不太清楚如何使用,最近...

• 2023-01-05

55浏览

0评论

使用react-native-doc-viewer实现文档预览

目录react-native-doc-viewer文档预览具体步骤如下react-native初体验的总结一、前提知识点二、开发前后相关的一些配置三、开发项目中用到的知识四、ui库五、项目搭建六、...

• 2023-01-05