97浏览

0评论

ahooks解决React闭包问题方法示例

引言本文是深入浅出 ahooks 源码系列文章的第三篇，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库...

• 2023-01-05

212浏览

0评论

Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

目录Reactjs + Nodejs + Mongodb 实现文件上传概述React + Node.js + Mongodb「上传文件」前后端项目结构前端项目结构Reactjs 前端部分后端项目结构后端项目结构前端部分-...

• 2023-01-05

96浏览

0评论

Input标签自动校验功能去除实现

目录自动校验解决方法解决思路多种解决方法1、ConfigProvider2、修改defaultProps3、拦截React.createElement4、全局监听input事件5、MutationObserver自动校验注：以下输入...

• 2023-01-05

160浏览

0评论

React.js前端导出Excel的方式

目录前言实现方式csv 与 Excel 的区别react-csvxlsxcdn 方式在 react 中使用json 转 excel结语前言前段时间，项目上有个需求需要将数据报表导出为 excel 的需求，这本来是后端...

• 2023-01-05

95浏览

0评论

React-Route6实现keep-alive效果

目录一、基于react-route6 useOutlet实现二、代码呈现代码分析isKeepPathuseKeepOutletslocationelementuseContext<any>(KeepAliveContext)isKeepObject.entrieskeyhidden...

• 2023-01-05

73浏览

0评论

React父组件调用子组件中的方法实例详解

目录Class组件1. 自定义事件2. 使用 React.createRef()3. 使用回调RefsFunction组件补充：子组件调用父组件方法总结文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用...

• 2023-01-05

93浏览

0评论

浅谈React底层实现原理

目录1. props，state与render函数关系，数据和页面如何实现互相联动？2. React中的虚拟DOM常规思路改良思路（仍使用DOM）React的思路深入理解虚拟DOM3. 虚拟DOM的diff算法4. React中r...

• 2023-01-05

123浏览

0评论

React UI组件库之快速实现antd的按需引入和自定义主题

目录React UI组件库流行的开源React UI组件库antd的基本使用antd样式按需引入antd自定义主题总结React UI组件库流行的开源React UI组件库material-ui（国外）ant-design（国内蚂...

• 2023-01-05

96浏览

0评论

React前端DOM常见Hook封装示例上

目录引言useEventListeneruseClickAwayuseEventTargetuseTitleuseFavicon引言本文是深入浅出 ahooks 源码系列文章的第十四篇，这个系列的目标主要有以下几点：加深对 React hoo...

• 2023-01-05

87浏览

0评论

react render props模式实现组件复用示例

目录一 render props的使用步骤二 组件的复用三 使用children名代替属性一 render props的使用步骤1 创建要复用的组件,在组件中提供要复用的状态逻辑代码
2 将要复用的stat...

• 2023-01-05

73浏览

0评论

详解React 如何防止 XSS 攻击论$$typeof 的作用

目录JSXXSS 攻击防止 XSS 攻击的方法React 对于文本节点的处理dangerouslySetInnerHTML 处理富文本节点$$typeof 的作用JSX先来简单复习一下 JSX 的基础知识。JSX 是React.c...

• 2023-01-05

76浏览

0评论

React不能将useMemo设置为默认方法原因详解

目录本文的起因...

• 2023-01-05

105浏览

0评论

React官方团队完善原生Hook闭包陷阱

目录正文useEventuseEvent的实现与开源Hooks的差异总结正文我们知道，Hooks使用时存在所谓的闭包陷阱，考虑如下代码：function Chat() { const [text, setText] = useState('');...

• 2023-01-05

104浏览

0评论

列表页常见hook封装实例

目录引言列表页常见元素usePaginationuseAntdTable引言本文是深入浅出 ahooks 源码系列文章，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如何抽象自定义 h...

• 2023-01-05

84浏览

0评论

React文字展开收起组件的实现示例

目录前言背景开发1.1 定义组件所需字段1.2 获取截断后的文字1.3 获取展开收起按钮1.4 展开收起逻辑1.5 完整代码1.5.1 逻辑代码1.5.2 样式代码1.6 安装使用组件资源前言最近...

• 2023-01-05

89浏览

0评论

React项目经验总结及遇到的坑

目录1、报错 xxx.map is not a function2、如何将后端返回的二进制流转换为base64格式的展示？3、下载4、父组件如何把值传给子组件？子组件又如何接收？5、父组件如何获取子组件...

• 2023-01-05

79浏览

0评论

在React中应用SOLID原则的方法

目录1、单一职责原则（SRP）2、开放封闭原则（OCP）3、里氏替换原则（LSP）4、接口隔离原则（ISP）5、依赖倒置原则（DIP）6、小结在面向对象编程（OOP）中，SOLID 原则是设计模式的基础，它的每个字母代...

• 2023-01-05

82浏览

0评论

Shopee在React Native 架构方面的探索及发展历程

目录1. 背景2. 发展历程2.1 第一阶段：单 bundle 集中开发模式2.2 第二阶段：单 bundle 多业务组开发模式2.3 第三阶段：多 bundle 中心化架构模式3. 去中心的 RN 架构模型3.1 独...

• 2023-01-05

65浏览

0评论

React路由组件传参的三种方式(params、search、state)

目录...

• 2023-01-05

81浏览

0评论

React将组件作为参数进行传递的3种方法实例

目录前言方式一：直接传递 jsx 创建好的元素方式二：直接传递组件本身方式三：传递一个返回组件的函数三种方案的对比总结前言在日常的开发中，开发通用组件的机会其实并不多，尤其是...

• 2023-01-05

88浏览

0评论

React Hook 四种组件优化总结

目录前言组件抽取memo 优化组件React.memo 语法useCallback 优化组件useCallback 作用useMemo 优化useMemo 语法useCallback 和 useMemo 区别前言React Hook 已成为当前最流...

• 2023-01-05

82浏览

0评论

React实现轮播图效果

本文实例为大家分享了React实现轮播图效果的具体代码，供大家参考，具体内容如下效果：轮播功能用到了react-slick组件，安装：npm install react-slick --savenpm install slick-caro...

• 2023-01-05

82浏览

0评论

ahooks封装cookie localStorage sessionStorage方法

目录引言cookielocalStorage/sessionStorage总结与归纳引言本文是深入浅出 ahooks 源码系列文章的第九篇，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如何...

• 2023-01-05

89浏览

0评论

react 表单数据形式配置化设计

目录前言实现一般实现配置化的实现实现思路具体实现使用示例总结前言在日常的中后台系统开发中，表单是和我们打交道非常多的名词。但是在一般的表单实现中、我们会做着很多重...

• 2023-01-05

229浏览

0评论

React封装CustomSelect组件思路详解

目录思路和前提编码与实现处理createContext与useContext对content的封装和拆分: DispatchRender, Controls先说Controls, 包含控制行: 重置, 确定DispatchRender 用于根据t...

• 2023-01-05

108浏览

0评论

解析react 函数组件输入卡顿问题 usecallback react.memo

目录现象分析解决方案一：方案二：弊端现象在输入问题时，输入框响应巨慢。效果图分析右侧控制台显示，子组件不停在mount unmount，子组件中使用了CKEditor组件，每次mount开支较大，导致...

• 2023-01-05

83浏览

0评论

React前端DOM常见Hook封装示例下

目录引言useFullscreenuseHoveruseDocumentVisibility引言本文是深入浅出 ahooks 源码系列文章的第十五篇，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如...

• 2023-01-05

80浏览

0评论

React系列useSyncExternalStore学习详解

目录前言useSyncExternalStore 初体验Concurrent 模式下使用 react-redux 7Concurrent 模式下使用 react-redux 8Concurrent 模式下使用自定义 external store源码分析useSy...

• 2023-01-05

85浏览

0评论

React手写一个手风琴组件示例

目录知识点结构分析AccordionItem子组件Accordion容器组件知识点emotion语法react语法css语法typescript类型语法结构分析根据上图，我们来分析一下，一个手风琴组件应该包含一...

• 2023-01-05

79浏览

0评论

React函数组件hook原理及构建hook链表算法详情

目录写在前面的小结Demofiberhook 链表hook 对象及其属性介绍useState Hook 对象useRef HookuseEffect、useLayoutEffect 以及 useImperativeHandleuseMemouseCallback构建...

• 2023-01-05

81浏览

0评论

react hooks闭包陷阱切入浅谈

目录引言1、一个熟悉的闭包场景2 浅谈hooks原理，理解useEffect 的 “闭包陷阱” 出现原因2 难道真的要在依赖数组里写上的值，才能拿到新鲜的值？3 为什么使用useRef能...

• 2023-01-05

237浏览

0评论

ahooks控制时机的hook实现方法

目录引言Function Component VS Class ComponentClass ComponentFunction ComponentLifeCycle - 生命周期useMountuseUnmountuseUnmountedRefEffectuseUpdateEffect 和 useU...

• 2023-01-05

67浏览

0评论

useEvent显著降低Hooks负担的原生Hook

目录前言没有 useEvent 的时候...

• 2023-01-05

98浏览

0评论

基于React Context实现一个简单的状态管理的示例代码

目录前言封装一个父组件用来包裹其他子组件子组件如何获取数据呢class Component 方式context.ConsumeruseContext总结参考前言在大多数情况下，我们开发项目都需要一个状态管...

• 2023-01-05

69浏览

0评论

关于react+antd样式不生效问题的解决方式

目录1、添加antd组件样式不生效2、运行yarn eject时暴露配置文件报错3、less-loader版本过高，删除旧版本，下载低版本即可4、项目中引入icon代码报错补充：React中antd按需加载样...

• 2023-01-05

88浏览

0评论

如何应用 SOLID 原则在 React 中整理代码之开闭原则

目录本系列其他文章什么是开闭原则？让我们从一个例子开始一个糟糕的解决方案解决方案是什么？让我们创建单独的用户组件注意总结SOLID 是一套原则。它们主要是关心代码质量和可...

• 2023-01-05

93浏览

0评论

使用 React Hooks 重构类组件的示例详解

目录1. 管理和更新组件状态2. 状态更新后的操作3. 获取数据4. 卸载组件时清理副作用5. 防止组件重新渲染6. Context API7. 跨重新渲染保留值8. 如何向父组件传递状态和方法...

• 2023-01-05

82浏览

0评论

React组件三大属性之state,props,refs

目录1.1基本理解和使用1.1.1 使用React开发者工具调试1.1.2 定义组件的方式1.1.3 注意1.1.4 渲染类组件标签的基本流程1.2 组件实例的三大核心属性之一：state1.2.1 理解1.2.2...

• 2023-01-05

79浏览

0评论

详解React hooks组件通信方法

目录一、前言二、父子组件通信1）父组件传值给子组件2）子组件传值给父组件3）跨组件传值（父传孙子组件）一、前言组件通信是React中的一个重要的知识点，下面列举一下 react hooks中常...

• 2023-01-05

92浏览

0评论

ahooks解决用户多次提交方法示例

目录引言场景useLockFn缺点axios 自动取消重复请求axios 取消请求如何自动取消重复的请求思考与总结引言本文是深入浅出 ahooks 源码系列文章的第四篇，这个系列的目标主要有...

• 2023-01-05

93浏览

0评论

React18中请求数据的官方姿势适用其他框架

目录引言这是一个普遍的问题为什么不推荐这么写？需要解决竞态问题点击返回按钮后重新请求数据CSR时的白屏时间瀑布问题推荐的方式总结引言一些同学喜欢在useEffect中请求初始...

• 2023-01-05

98浏览

0评论

React中的权限组件设计问题小结

目录背景所谓的权限控制是什么？实现思路路由权限菜单权限背景权限管理是中后台系统中常见的需求之一。之前做过基于 Vue 的后台管理系统权限控制，基本思路就是在一些路由钩子...

• 2023-01-05

85浏览

0评论

react基于react-slick实现多图轮播效果

目录写在前面：一、进入官网查看文档（Docs）二、安装插件（Quick Start）三、范例使用（Examples）1、直接copy代码：2、实现结果：3、引入样式：4、还是报错？5、运行成功！实现结果：总结写在前面：目...

• 2023-01-05

95浏览

0评论

教你应用 SOLID 原则整理 React 代码之单一原则

目录什么是单一责任原则？让我们从一个糟糕的例子开始1. 移动数据处理逻辑2. 可重用的数据获取钩子3. 分解 UI 组件让我们回顾一下我们刚刚做了什么总结SOLID 原则的主要是作...

• 2023-01-05

83浏览

0评论

react组件memo useMemo useCallback使用区别示例

目录正文memo使用useMemo使用useCallback使用正文memo用来优化函数组件的重复渲染行为，针对的是一个组件useMemo返回一个memoized的值本质都是用同样的算法来判定依赖是否发...

• 2023-01-05

89浏览

0评论

react redux中如何获取store数据并将数据渲染出来

目录前景提要1.创建仓库骨架并书写初始代码2.正式开始3.store 数据获取方法（可略过）4.数据的获取与展示前景提要如果不了解基础的话 ----- 点击此处本文着重实现效果，不会讲太...

• 2023-01-05

94浏览

0评论

关于react中useCallback的用法

目录基础用法父组件子组件useCallback是react中比较重要的一个hookuseCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。基础用法useCallba...

• 2023-01-05

102浏览

0评论

React中井字棋游戏的实现示例

目录需求分析实现分析涉及的组件涉及的状态编码实现项目初始化定义各个组件的props/stateSquare组件propsBoard组件propsGame组件state各组件代码SquareBoardGame最近开始接...

• 2023-01-05

326浏览

0评论

React 函数式组件和类式组件详情

目录前言1. 函数式组件2. 类式组件前言React 是 组件化的 的 JS 库，组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI...

• 2023-01-05

83浏览

0评论

关于React动态修改元素样式的三种方式

目录React动态修改元素样式1.借助ref动态修改样式2.通过动态控制状态的变化修改元素的样式（两种方式）3.通过在DOM中使用JS代码（三元运算符）React样式冲突问题css-样式私有化cssM...

• 2023-01-05