编程开发 - 教程之家

编程开发

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

70浏览

0评论

ReactJS入门实例教程详解

目录一、ReactJS简介二、对ReactJS的认识及ReactJS的优点1、ReactJS的背景和原理2、组件化三、下载ReactJS，编写Hello，world四、Jsx语法五、ReactJS组件1、组件属性2、组件状...

2023-01-05 20:52:53

67浏览

0评论

react+react-beautiful-dnd实现代办事项思路详解

目录react+react-beautiful-dnd应用效果预览实现思路index.js入口文件配置app.jsx主页面配置untils/with-context.js封装工具todoContextcomponents/TodoHeader.jsx页面头部...

2023-01-05 20:52:51

46浏览

0评论

使用React Router v6 添加身份验证的方法

目录开始基础路由创建受保护的路由使用嵌套路由和< Outlet />结尾React Router v6是React应用程序的一个流行且功能强大的路由库。它提供了一种声明式的、基于组件的路由方...

2023-01-05 20:52:41

62浏览

0评论

React项目中hook实现展示对话框功能

目录思路：使用全局状态管理所有对话框尝试设计一个API去做对话框的全局管理实现：创建NiceModal组件和相关API处理对话框的返回值总结React中使用对话框并不容易，主要因为：对话框...

2023-01-05 20:52:39

42浏览

0评论

一文教会你用redux实现computed计算属性

目录前言原理分析：总结前言什么是computed计算属性？它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。如果是Vue开发者，对这个功能并不陌生，而且很常用。对...

2023-01-05 20:52:37

46浏览

0评论

react diff 算法实现思路及原理解析

目录事例分析diff 特点diff 思路实现 diff 算法修改入口文件实现 React.Fragment我们需要修改 children 对比前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正...

2023-01-05 20:52:36

68浏览

0评论

搭建React Native热更新平台的详细过程

目录一，什么是热更新二，热更新方案三，热更新原理四，CDN 热更新方案五，纯 CDN 方案的弊端六，线上方案七、整体方案梳理八，总结一，什么是热更新所谓热更新，也叫做动态更新，一种类似 Web...

2023-01-05 20:52:33

46浏览

0评论

react-three/postprocessing库的参数中文含义使用解析

目录一、react-three/postprocessing--处理效果的库二、提供的组件<DepthOfField />景深效果组件参数<Bloom /> 光晕效果组件参数<Noise /> 噪点效果组件<Vignette /> 晕影，...

2023-01-05 20:52:30

58浏览

0评论

React 中使用 Redux 的 4 种写法小结

目录不使用 Redux 的写法最底层的写法React-ReduxReact-Redux 配合 connect 高阶组件React-Rudex 配合 React HooksRedux Toolkit总结Redux 是一种状态容器 JS 库，提供可预测...

2023-01-05 20:52:28

57浏览

0评论

取消正在运行的Promise技巧详解

目录前言代码案例CancelablePromise (取消Promise)使用多个Promise链式调用在async和await中使用结束语前言最近项目当中小伙伴遇到一个很奇怪的bug，进入一个页面后，快速切换...

2023-01-05 20:52:27

40浏览

0评论

antd+react中upload手动上传单限制上传一张

目录需求代码导入所需的库用到的常量/stateUpload回调函数需求限制上传一张图片点击按钮，手动上传新增图片替换原来的图片，没有图片时显示PlusOutLined图片预览弹出框代码导入...

2023-01-05 20:52:25

63浏览

0评论

如何在React项目中优雅的使用对话框

目录背景场景一场景二场景三问题一：难以扩展问题二：维护问题问题的本质对话框的本质全局的状态管理的对话框整体的架构具体实现Redux - reducer 存储Redux - action 处理对话...

2023-01-05 20:52:21

327浏览

0评论

react简单实现防抖和节流

目录一、防抖：二、节流防抖和节流可以节省资源，减小服务器端压力，提升用户体验。在日常开发中，我们经常会有这样的需求：监听用户的输入（keyup、keydown）、浏览器窗口调整大小和滚动...

2023-01-05 20:52:19

59浏览

0评论

React父子组件传值(组件通信)的实现方法

目录1、父组件传值子组件2、子组件传值父组件3、兄弟组件传值1、父组件传值子组件在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值...

2023-01-05 20:52:17

44浏览

0评论

React使用有限状态机的实现示例

目录什么是有限状态机？有限状态机的示例有限状态机和软件开发、计算机科学有什么关系？举了那么多例子，但我该怎么展示在前端开发中使用状态机呢？React 应用程序中的注册表单的传...

2023-01-05 20:52:16

58浏览

0评论

聊聊ant design charts 获取后端接口数据展示问题

今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示...

2023-01-05 20:52:12

75浏览

0评论

从零搭建react+ts组件库(封装antd)的详细过程

目录整体需求开发与打包工具选型使用webpack作为打包工具使用babel来处理typescript代码使用less-loader、css-loader等处理样式代码项目搭建思路整体结构方案思路项目搭建...

2023-01-05 20:52:09

50浏览

0评论

react如何添加less环境配置

目录1.安装less2.找到node_modules文件夹里react-scripts/config/webpack.config.js3.然后往下翻代码到下图4.在src目录下创建一个less文件，里面写样式5.引入6.如果启动报错...

2023-01-05 20:52:07

34浏览

0评论

React虚拟渲染实现50个或者一百个图表渲染

目录前言需求方案实现VirtualScroll 组件实现使用结束语前言最近有个需求，一个页面上要渲染50个或者100个图表，把功能实现后，页面太卡了。之前用过虚拟渲染能解决此类的问题，但...

2023-01-05 20:52:04

45浏览

0评论

react使用mobx封装管理用户登录的store示例详解

1、MobX 介绍 MobX 是一个简单、可伸缩的响应式状态管理库。通过 MobX 你可以用最直观的方式修改状态，其他的一切 MobX 都会为你处理好（如自动更新UI），并且具有非常高的性能。当...

2023-01-05 20:52:02

47浏览

0评论

浅谈React Refs 使用场景及核心要点

目录什么是 Refs？使用方式Refs 核心要点避免重复创建 ref 内容ref.current 存储的内容修改是突变ref 作为数据存储时内容的变化不会引起 re-renderref 的读写只能在 useEffec...

2023-01-05 20:52:00

44浏览

0评论

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

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

2023-01-05 20:51:55

55浏览

0评论

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

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

2023-01-05 20:51:52

48浏览

0评论

React Native Popup实现示例

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

2023-01-05 20:51:49

80浏览

0评论

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

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

2023-01-05 20:51:47

326浏览

0评论

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

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

2023-01-05 20:51:45

47浏览

0评论

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

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

2023-01-05 20:51:43

50浏览

0评论

React中的Hooks进阶理解教程

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

2023-01-05 20:51:40

49浏览

0评论

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

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

2023-01-05 20:51:37

55浏览

0评论

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

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

2023-01-05 20:51:35

63浏览

0评论

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

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

2023-01-05 20:51:32

40浏览

0评论

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

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

2023-01-05 20:51:31

79浏览

0评论

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

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

2023-01-05 20:51:29

57浏览

0评论

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

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

2023-01-05 20:51:26

46浏览

0评论

React 路由使用示例详解

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

2023-01-05 20:51:25

41浏览

0评论

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

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

2023-01-05 20:51:21

54浏览

0评论

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

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

2023-01-05 20:51:18

47浏览

0评论

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

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

2023-01-05 20:51:13

42浏览

0评论

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

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

2023-01-05 20:51:12

58浏览

0评论

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

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

2023-01-05 20:51:10

265浏览

0评论

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

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

2023-01-05 20:51:08

37浏览

0评论

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

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

2023-01-05 20:51:05

58浏览

0评论

Electron+React进行通信的方法

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

2023-01-05 20:51:03

52浏览

0评论

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

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

2023-01-05 20:51:01

101浏览

0评论

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

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

2023-01-05 20:51:00

52浏览

0评论

React新文档切记不要滥用effect

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

2023-01-05 20:50:55

54浏览

0评论

useEffect支持async及await使用方式

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

2023-01-05 20:50:51

53浏览

0评论

ahooks正式发布React Hooks工具库

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

2023-01-05 20:50:46

80浏览

0评论

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

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

2023-01-05 20:50:44

59浏览

0评论

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

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

2023-01-05 20:50:38

首页 «159 160161162 163 »尾页

热门文章