79浏览

0评论

react+zarm实现底部导航栏的示例代码

目录需要实现的效果实现过程1.使用 prop-types 库进行类型检查2.使用 useNavigate3.编写标签栏组件4.使用标签栏组件5.添加对应的页面路由6.效果参考资料需要实现的效果需要...

• 2023-01-05

92浏览

0评论

Vite+React+TypeScript手撸TodoList的项目实践

目录布局与样式创建工程定义全局数据类型实现步骤源码地址布局与样式一个TodoList长什么样子相信无需多言：上样式： src/TodoList.css.td-wrapper { width: 700px; margi...

• 2023-01-05

82浏览

0评论

React Native Popup实现示例

目录具体实现使用方法React Native 官方提供了 Modal 组件，但 Modal 是属于全屏的弹出层，当 Modal 显示时，操作区域只有 Modal 里的元素，而且焦点会被 Modal 劫持。虽然移动端不...

• 2023-01-05

120浏览

0评论

React Native采用Hermes热更新打包方案详解

目录1， 背景2，热更新传统方案3，使用Hermes打包1， 背景如果我们打开RN的Android源码，在build.gradle中回看到这样一段代码。 if (enableHermes) { def hermesPath = "../....

• 2023-01-05

393浏览

0评论

React实现类似于Vue中的插槽的项目实践

目录搭建项目实现方式1实现方式2最终效果展示最近刚开始接触React，感觉React比Vue更灵活一些，但是感觉代码确实维护的时候可读性也没有Vue好（可能是因为我太菜了），Vue中很多都是...

• 2023-01-05

84浏览

0评论

基于PixiJS实现react图标旋转动效

目录什么是PixiJSPixiJS初探PIXI.ApplicationPIXI.Spritesprite.x | sprite.y | sprite.anchor旋转起来什么是PixiJSPixiJS是一个开源的基于web的渲染系统，为游戏、数据可视...

• 2023-01-05

96浏览

0评论

React中的Hooks进阶理解教程

目录Hooks进阶useState - 回调函数的参数useEffect - 清理副作用useEffect - 发送网络请求useRefuseContextHooks进阶useState - 回调函数的参数使用场景参数只会在组件的初...

• 2023-01-05

76浏览

0评论

react项目优化配置的操作详解

目录优化-配置CDN优化-路由懒加载 使用步骤代码实现查看效果优化-配置CDN通过 craco 来修改 webpack 配置，从而实现 CDN 优化 yarn add @craco/craco//或者 npm install @c...

• 2023-01-05

91浏览

0评论

React + Typescript领域初学者的常见问题和技巧(最新)

React + Typescript领域初学者的常见问题和技巧创建一个联合类型的常量 Keyconst NAME = { HOGE: "hoge", FUGA: "fuga"} as const;keyof typeof NAME// => "HOGE" | "FUG...

• 2023-01-05

94浏览

0评论

react-router-dom V6的配置使用实践

目录一、关于书写方面二、路由的嵌套方面优化三、关于路由的灵活配置化四、关于路由鉴权方面最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新...

• 2023-01-05

72浏览

0评论

React创建对话框组件的方法实例

原生的前端体系创建一个对话框可是再简单不过了。但是如果放到组件化思想下的react体系中，想要制作一个属于自己的对话框还是有一定的麻烦的。主要遇到的问题有两个：一是如何...

• 2023-01-05

118浏览

0评论

在React中用canvas对图片标注的实现

在审核业务中难免会有需要对图片进行标注的需求，本次用一个最小demo来演示如何对图片进行矩形标注。首先我们要理解canvas是一块画布，而这块画布需要在我们要标注的图片上层，图...

• 2023-01-05

86浏览

0评论

使用react-activation实现keepAlive支持返回传参

目录介绍代码1、安装react-activation2、给路由增加meta3、根组件中渲染4、跳转指定页面的时候才缓存5、抽离逻辑到自定义hooks6、 从详情页返回列表页的时候，控制列表页是否...

• 2023-01-05

86浏览

0评论

React 路由使用示例详解

目录Router简单路由嵌套路由未匹配路由路由传参数索引路由活动链接搜索参数自定义行为useNavigate参考资料Routerreact-router-dom是一个处理页面跳转的三方库，在使用之前需...

• 2023-01-05

75浏览

0评论

浅谈React-router v6 实现登录验证流程

目录封装 Context 包裹容器封装 Layout 父级容器开发 Login 模块开发 Protected 包裹容器App 入口文件此示例演示了一个包含三个页面的简单登录流程：公共页面、受保护页面和...

• 2023-01-05

94浏览

0评论

关于React中的声明式渲染框架问题

目录1. 命令式和声明式1.1 命令式1.2 声明式1.3 两种范式的性能和易维护性2. 虚拟DOM的性能如何3. 运行时和编译时3.1 运行时3.2 运行时 + 编译时3.3 编译时4. 总结在学习Re...

• 2023-01-05

84浏览

0评论

React Suspense前后端IO异步操作处理

目录简单介绍SuspenseSuspense主要用法和场景一. React18之前的做法二. React18之后Suspense配合前端表格组件处理前后端IO异步操作简单介绍SuspenseSuspense主要用来解决网...

• 2023-01-05

78浏览

0评论

react中事件处理与柯里化的实现

目录1. 事件处理阻止默认行为合成事件2. 柯里化柯里化的目的一个简单的例子1. 事件处理React 中元素也可接受、处理事件，但是在语法上有一点不同。在React 中所有事件的命名...

• 2023-01-05

111浏览

0评论

插件化机制优雅封装你的hook请求使用方式

目录引言useRequest 简介架构useRequest 入口处理Fetch 和 Pluginsstate 以及 setState插件化机制的实现核心方法 —— runAsync请求前 —— onBefore...

• 2023-01-05

337浏览

0评论

React前端框架实现原理的理解

目录vdomdsl 的编译渲染 vdom组件状态管理react 架构的演变fiber 架构总结vdomreact 和 vue 都是基于 vdom 的前端框架，我们先聊下 vdom：为什么 react 和 vue 都要基于 vdom...

• 2023-01-05

75浏览

0评论

create-react-app开发常用配置教程

目录引言设置代理模块热替换(HMR)css局部化支持装饰器写法打包后路径问题导致页面空白配置简化路径按需引用antd-mobile（antd同）打包构建分析生产环境去掉map文件配置less配置...

• 2023-01-05

97浏览

0评论

Electron+React进行通信的方法

目录1.前言：2.一些理解：3.数据交互4.前后端交互5.一些代码举例：1.前言：Electron是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序项目的技术栈为：Electron + React Hooks...

• 2023-01-05

99浏览

0评论

React 中的列表渲染要加 key的原因分析

目录为什么需要 key？列表渲染不提供 key 会怎样？列表渲染的 key 用数组索引会怎样？应该用什么值作为 key？结尾在 React 中我们经常需要渲染列表，比如展示好友列表。常用写法是用...

• 2023-01-05

155浏览

0评论

React组件设计过程之仿抖音订单组件

目录前言前期准备实现后的组件效果1. 组件设计思路2. 实现 Myorder 组件2.1 实现tab切换效果2.2 获取数据2.3 实现搜索功能2.4 设置loading状态2.5 实现Empty(空状态)组件3....

抖音
• 2023-01-05

88浏览

0评论

React新文档切记不要滥用effect

目录引言一些理论知识处理副作用总结引言你或你的同事在使用useEffect时有没有发生过以下场景：当你希望状态a变化后发起请求，于是你使用了useEffect：useEffect(() => { fetch(...

• 2023-01-05

89浏览

0评论

useEffect支持async及await使用方式

目录引言背景React 为什么要这么做？useEffect 怎么支持 async...await...自定义 hooks还可以支持 useEffect 的清除机制么？总结与思考引言本文是深入浅出 ahooks 源码系列文章...

• 2023-01-05

97浏览

0评论

ahooks正式发布React Hooks工具库

目录起因解法共建项目目标品牌升级社区开源API 规范示例演示开发迭代下一步起因从 React Hooks 正式发布到现在，越来越多的项目正在使用 Function Component 替代 Class Comp...

• 2023-01-05

132浏览

0评论

React-View-UI组件库封装Loading加载中源码

目录组件介绍Loading API能力组件源码组件测试源码组件库线上地址组件介绍Loading组件是日常开发用的很多的组件，这次封装主要包含两种状态的Loading，旋转、省略号，话不多说先...

• 2023-01-05

98浏览

0评论

create-react-app常用自定义配置教程示例

目录引言yarn安装依赖包报错IE10下报错, Map 未定义webpack添加 alias解决跨域，反向代理配置项目主要文件路径配置关闭自动开启浏览器配置修改 webpack output.publicPath生...

• 2023-01-05

92浏览

0评论

关于 React 中 useEffect 使用问题浅谈

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

• 2023-01-05

106浏览

0评论

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

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

• 2023-01-05

101浏览

0评论

React合成事件原理解析

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

• 2023-01-05

99浏览

0评论

React新文档切记不要滥用Ref

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

• 2023-01-05

108浏览

0评论

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

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

• 2023-01-05

79浏览

0评论

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

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

• 2023-01-05

80浏览

0评论

React 中的 setState 是同步还是异步

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

• 2023-01-05

95浏览

0评论

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

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

• 2023-01-05

135浏览

0评论

React项目配置prettier和eslint的方法

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

• 2023-01-05

84浏览

0评论

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

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

• 2023-01-05

88浏览

0评论

React SSR 中的限流案例详解

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

• 2023-01-05

98浏览

0评论

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

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

• 2023-01-05

82浏览

0评论

React useEffect不支持async function示例分析

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

• 2023-01-05

102浏览

0评论

ahooks useRequest源码精读解析

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

• 2023-01-05

93浏览

0评论

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

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

• 2023-01-05

74浏览

0评论

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

目录前言...

• 2023-01-05

78浏览

0评论

React的生命周期详解

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

• 2023-01-05

96浏览

0评论

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

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

• 2023-01-05

89浏览

0评论

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

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

• 2023-01-05

105浏览

0评论

Iconfont不能上传如何维护Icon

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

• 2023-01-05

78浏览

0评论

useEffect中不能使用async原理详解

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

• 2023-01-05