编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Android Go语言鸿蒙OS C类语言综合编程正则表达式

43浏览

0评论

关于 React 中 useEffect 使用问题浅谈

目录前言优化前优化后总结前言最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的，感到好奇，因为这样会导致应用重新...

2023-01-05 20:50:35

59浏览

0评论

React Native中实现动态导入的示例代码

目录背景多业务包动态导入Metro 打包原理打包过程bundle 分析__d函数__r函数方案设计分识别入口树拆分bundle 生成合总结背景随着业务的发展，每一个 React Native 应用的代码...

2023-01-05 20:50:33

59浏览

0评论

React合成事件原理解析

目录事件介绍什么是事件？举个栗子代码实现React合成事件基础知识什么是合成事件？在React中事件的写法和原生事件写法的区别？为什么会有合成事件？合成事件机制简述React合成事件...

2023-01-05 20:50:32

55浏览

0评论

React新文档切记不要滥用Ref

目录引言为什么是逃生舱？失控的Ref如何限制失控人为取消限制useImperativeHandle总结引言React新文档有个很有意思的细节：useRef、useEffect这两个API的介绍，在文档中所在的章...

2023-01-05 20:50:30

67浏览

0评论

React 性能优化之非必要的渲染问题解决

目录1. 非必要组件渲染2. 解决方案之 shouldComponentUpdate3. 解决方案之 PureComponent4. 解决方案之 React.memo5. useMemo 和 useCallback1. 非必要组件渲染在 React 工...

2023-01-05 20:50:26

34浏览

0评论

ahooks整体架构及React工具库源码解读

目录引言React hooks utils 库ahooks简介特点hooks 种类ahooks 整体架构项目启动整体结构hooks总结引言本文是深入浅出 ahooks 源码系列文章的第一篇，这个系列的目标主要有以...

2023-01-05 20:50:24

45浏览

0评论

React 中的 setState 是同步还是异步

setState 是同步还是异步？肯定是异步的呀。确定么？那看一下这段代码会打印什么：import { Component } from 'react';class Dong extends Component { constructor() {...

2023-01-05 20:50:22

62浏览

0评论

React大屏可视化脚手架教程示例

目录使用 create-react-app 初始化引入 antd UI库使用 craco 插件来自定义配置自定义 antd 主题，使用 less 作为 css 预处理器修改 craco.config.js 文件craco-less .module....

2023-01-05 20:50:17

88浏览

0评论

React项目配置prettier和eslint的方法

目录配置prettier和eslint配置stylelint保存自动修复参考视频: https://www.bilibili.com/video/BV1rh411e7E5?vd_source=eee62ea3954ac01bff9e87e2a7b40084prettier代码格...

2023-01-05 20:50:14

44浏览

0评论

React useEffect异步操作常见问题小结

目录三个常见的问题：一、react hooks发异步请求二、如何在组件加载的时候发起异步任务三、如果在响应回来之前组件被销毁了会怎样？四、如何在组件交互时发起异步任务为什么两...

2023-01-05 20:50:11

46浏览

0评论

React SSR 中的限流案例详解

目录为什么要限流令牌桶算法当对 React 应用进行页面加载或 SEO 优化时，我们一般绕不开 React SSR。但 React SSR 毕竟涉及到了服务端，有很多服务端特有的问题需要考虑，而限流...

2023-01-05 20:50:04

56浏览

0评论

React项目仿小红书首页保姆级实战教程

目录前言前期准备项目预览项目准备工具项目初始化安装项目依赖工程化src目录api目录assets目录components目录modules目录pages目录，routes目录以及utils目录页面设计思路mai...

2023-01-05 20:50:02

47浏览

0评论

React useEffect不支持async function示例分析

目录引言React为什么这么设计呢？简单改造1、简单改造的写法（不推荐）2、把异步提取成单独函数或自定义hook（推荐）引言useEffect相比大家都耳熟能详啦，如下这种写法，应该是非常常见的...

2023-01-05 20:50:00

60浏览

0评论

ahooks useRequest源码精读解析

目录前言架构图源码解析FetchonBeforeonRequestonSuccessonFinallyonError其它 API小结pluginsusePollingPluginuseRetryPlugin小结useRequest对自定义 hook 的思考总结前言...

2023-01-05 20:49:58

52浏览

0评论

create-react-app项目配置全解析

目录引言准备工作启动命令start.jsbuild.js目录结构配置解析weback.config.js1.entry结语引言create-react-app（以下简称cra）作为react官方提供的脚手架工具，是目前生成react项...

2023-01-05 20:49:56

35浏览

0评论

Vite + React从零开始搭建一个开源组件库

目录前言...

2023-01-05 20:49:52

40浏览

0评论

React的生命周期详解

一、React生命周期React 生命周期分为三种状态1. 初始化2.更新3.销毁初始化1、getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.2、getInitialSta...

2023-01-05 20:49:49

62浏览

0评论

解决react中useState状态异步更新的问题

目录疑惑状态异步更新带来的问题问题示例问题解决类组件的解决方案函数组件的解决方案其他解决方案结尾疑惑相信刚开始使用react函数组件的小伙伴也遇到过一个坑，就是 useSta...

2023-01-05 20:49:47

52浏览

0评论

如何解决React useEffect钩子带来的无限循环问题

目录什么导致的无限循环以及如何解决它们如何解决这个问题使用函数作为依赖项使用数组作为依赖项将对象作为依赖项传递传递不正确的依赖项结尾React的useEffect Hook可以让...

2023-01-05 20:49:45

66浏览

0评论

Iconfont不能上传如何维护Icon

目录引言现在做的事情遇到的问题问题一：命名冲突问题二：icon 图标库没交接问题三： iconfont 维护如何解决？问题一：全局替换问题二：要回权限问题三：力所不及最终方案：使用 svg 代替 i...

2023-01-05 20:49:37

34浏览

0评论

useEffect中不能使用async原理详解

目录引言具体代码分析执行 mountEffect执行 mountEffectImpl执行 pushEffect进入到 schedulePassiveEffects推入卸载队列invokePassiveEffectCreate 执行hook 实现使用引言...

2023-01-05 20:49:34

53浏览

0评论

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

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

2023-01-05 20:49:28

160浏览

0评论

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

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

2023-01-05 20:49:22

55浏览

0评论

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

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

2023-01-05 20:49:17

83浏览

0评论

React.js前端导出Excel的方式

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

2023-01-05 20:49:13

54浏览

0评论

React-Route6实现keep-alive效果

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

2023-01-05 20:49:11

32浏览

0评论

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

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

2023-01-05 20:49:09

50浏览

0评论

浅谈React底层实现原理

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

2023-01-05 20:49:08

81浏览

0评论

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

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

2023-01-05 20:49:06

42浏览

0评论

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

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

2023-01-05 20:49:04

53浏览

0评论

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

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

2023-01-05 20:49:02

37浏览

0评论

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

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

2023-01-05 20:49:00

31浏览

0评论

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

目录本文的起因...

2023-01-05 20:48:58

66浏览

0评论

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

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

2023-01-05 20:48:56

60浏览

0评论

列表页常见hook封装实例

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

2023-01-05 20:48:55

41浏览

0评论

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

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

2023-01-05 20:48:53

46浏览

0评论

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

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

2023-01-05 20:48:50

41浏览

0评论

在React中应用SOLID原则的方法

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

2023-01-05 20:48:47

36浏览

0评论

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

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

2023-01-05 20:48:45

30浏览

0评论

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

目录...

2023-01-05 20:48:42

44浏览

0评论

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

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

2023-01-05 20:48:40

48浏览

0评论

React Hook 四种组件优化总结

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

2023-01-05 20:48:38

44浏览

0评论

React实现轮播图效果

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

2023-01-05 20:48:35

42浏览

0评论

ahooks封装cookie localStorage sessionStorage方法

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

2023-01-05 20:48:34

48浏览

0评论

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

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

2023-01-05 20:48:31

182浏览

0评论

React封装CustomSelect组件思路详解

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

2023-01-05 20:48:30

57浏览

0评论

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

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

2023-01-05 20:48:28

43浏览

0评论

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

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

2023-01-05 20:48:24

31浏览

0评论

React系列useSyncExternalStore学习详解

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

2023-01-05 20:48:22

46浏览

0评论

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

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

2023-01-05 20:48:12

首页 «160 161162163 164 »尾页

热门文章