110浏览

0评论

React实现表格选取

本文实例为大家分享了React实现表格选取的具体代码，供大家参考，具体内容如下在工作中，遇到一个需求，在表格中实现类似于Excel选中一片区域的，然后拿到选中区域的所有数据。1.实现...

• 2023-01-05

86浏览

0评论

react实现动态表单

本文实例为大家分享了react实现动态表单的具体代码，供大家参考，具体内容如下1.小要求在工作中，我们也会碰到这样子的需求：在填写信息的时候，可以填写多个人名、多个需求、以及动...

• 2023-01-05

108浏览

0评论

React实现动态调用的弹框组件

最近在用react开发项目，遇到一个需求——开发一个弹框组件。在react中创建一个组件是很简单的，只需要使用class创建并引入就可以了，但是要做到可以用js调用这个组件...

• 2023-01-05

93浏览

0评论

最新版React Native环境搭建(亲测)

目录一、基础环境1.1 安装Node.js1.2 添加Android原生环境1.3 添加iOS原生环境二、创建示例项目2.1 创建项目2.2 运行项目2.3 调试项目三、集成到原生应用3.1 集成到原生And...

• 2023-01-05

117浏览

0评论

React事件处理和表单的绑定详解

目录一、事件处理1.1 React事件1.2 事件对象1.3 事件传参1.4 函数组件事件处理二、表单一、事件处理1.1 React事件React 元素的事件处理和 DOM 元素类似。但是有一点语法上...

• 2023-01-05

149浏览

0评论

React Hooks--useEffect代替常用生命周期函数方式

目录useEffect代替常用生命周期函数原始生命周期函数对React Hooks（useState和useEffect) 的总结思考一、为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程)二、...

• 2023-01-05

100浏览

0评论

React中useEffect与生命周期钩子函数的对应关系说明

目录React useEffect与生命周期钩子函数的对应关系使用格式一：不带参数的情况使用格式二：带第二个参数，参数为空数组使用格式三：带第二个参数，并且指定了依赖项使用格式四：依赖项...

• 2023-01-05

90浏览

0评论

React.js Gird 布局编写键盘组件

前言;Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。display: grid指定一个容器采用网格布局。接着划分行和列。grid-temp...

• 2023-01-05

99浏览

0评论

React 保留和重置State

目录前言一、state保留二、state重置总结前言在开发时，我们复用一个组件，比如说切换不同的聊天窗口，这个窗口是公用的组件<Chat/>聊天窗口、<ContactList/>组件，控制不同人的id...

• 2023-01-05

111浏览

0评论

ahooks useVirtualList 封装虚拟滚动列表

目录简介实现原理具体实现思考总结简介提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。详情可见官网，文章源代码可以点击这里。实现原理...

• 2023-01-05

100浏览

0评论

React组件实例三大属性state props refs使用详解

目录一、 State1.概念2.State的简单用法3. JS绑定事件4.react 绑定事件5.react this指向问题6.修改state值7.代码简写二、props1.概念2.传参的基础方法、运算符传参三、refs...

• 2023-01-05

113浏览

0评论

React循环遍历渲染数组和对象元素方式

目录循环遍历渲染数组和对象元素遍历渲染数组遍历渲染对象元素遍历对象生成dom项目场景问题描述补充循环遍历渲染数组和对象元素遍历渲染数组1.单纯数组const pureArr = ['a...

• 2023-01-05

122浏览

0评论

React组件化学习入门教程讲解

目录模块化模块模块化组件化组件组件化函数式组件创建函数组件Props参数传递（重点）复合函数组件类式组件创建实例用户自定义组件模块化模块理解：向外提供特定功能的js程序,一般...

• 2023-01-05

139浏览

0评论

react-router-dom v6 使用详细示例

目录一、基本使用二、路由跳转2.1 Link 组件2.2 NavLink 组件2.3 编程式跳转三、动态路由参数3.1 路径参数路径匹配规则兼容类组件3.2 search 参数四、嵌套路由5.1 路由定义...

• 2023-01-05

91浏览

0评论

React+CSS 实现绘制横向柱状图

前言：页面一共分为两个结构文字 + 渐变柱形图为一个部分，下面的标注为一个结构。我们先看文字 + 渐变柱形图部分。总体使用 flex 布局，左边文字部分占总体的 50%，右边的占剩余的...

• 2023-01-05

96浏览

0评论

React hook实现简单的websocket封装方式

目录React hook实现websocket封装react自定义hook解决websocket连接,useWebSocket1、描述2、代码React hook实现websocket封装新建websocket.ts文件import {useState, useRe...

• 2023-01-05

120浏览

0评论

使用useEffect模拟组件生命周期

目录useEffect模拟组件生命周期让函数组件模拟生命周期初始化更新阶段卸载阶段useEffect实现componentWillUnmount生命周期函数阐述useEffect 解绑副作用useEffect的第二个...

• 2023-01-05

111浏览

0评论

ReactDOM 隐藏特性详解

目录前言React DevTools 的原理渲染阶段FiberRoot/FiberNodememoizedState 与 React Hooks实践：突破 useDebugValue 的限制useDebugValueAnywhere 的实现特定的 devtools总结...

• 2023-01-05

99浏览

0评论

React中使用react-file-viewer问题

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

• 2023-01-05

92浏览

0评论

React中使用antd组件的方法

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

• 2023-01-05

98浏览

0评论

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

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

• 2023-01-05

122浏览

0评论

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

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

• 2023-01-05

106浏览

0评论

React中编写CSS实例详解

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

• 2023-01-05

116浏览

0评论

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

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

• 2023-01-05

113浏览

0评论

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

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

• 2023-01-05

112浏览

0评论

一文理解Redux及其工作原理

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

• 2023-01-05

117浏览

0评论

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

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

• 2023-01-05

133浏览

0评论

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

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

• 2023-01-05

220浏览

0评论

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

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

• 2023-01-05

110浏览

0评论

React18新增特性介绍

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

• 2023-01-05

95浏览

0评论

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

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

• 2023-01-05

99浏览

0评论

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

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

• 2023-01-05

121浏览

0评论

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

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

• 2023-01-05

114浏览

0评论

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

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

• 2023-01-05

100浏览

0评论

react+tsx中使用better-scroll详解

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

• 2023-01-05

116浏览

0评论

React项目中使用Redux的 react-redux

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

• 2023-01-05

95浏览

0评论

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

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

• 2023-01-05

102浏览

0评论

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

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

• 2023-01-05

109浏览

0评论

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

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

• 2023-01-05

97浏览

0评论

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

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

• 2023-01-05

100浏览

0评论

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

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

• 2023-01-05

107浏览

0评论

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

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

• 2023-01-05

391浏览

0评论

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

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

• 2023-01-05

96浏览

0评论

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

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

• 2023-01-05

90浏览

0评论

关于useEffect的第二个参数解读

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

• 2023-01-05

116浏览

0评论

react使用useImperativeHandle示例详解

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

• 2023-01-05

181浏览

0评论

React中的生命周期详解

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

• 2023-01-05

96浏览

0评论

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

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

• 2023-01-05

87浏览

0评论

React 全面解析excel文件

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

• 2023-01-05

390浏览

0评论

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

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

• 2023-01-05