编程开发 - 教程之家

编程开发

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

141浏览

0评论

React18中的useDeferredValue示例详解

目录有什么用？实操起来跟防抖的区别接着上一篇React18的简介和自动批处理的特性，今天我们来聊下useDeferredValue。有什么用？lets you defer updating the less important part...

2023-01-05 20:57:59

157浏览

0评论

react中antd Upload手动上传的示例

目录情况介绍实现方法1.初始化2.上传表单和图片3.图片回显情况介绍在antd官方提供的upload组件案例中，都使用了action属性直接上传，唯一手动上传的一个例子（如下图）也不够好用，可...

2023-01-05 20:56:43

123浏览

0评论

浅谈React 中的浅比较是如何工作的

React 中浅比较的概念无处不在，它在不同的流程中起着关键的作用，也可以在React组件的多个生命周期中找到。比如，React Hooks中的依赖数组，通过React.memo进行记忆。在React的官...

2023-01-05 20:55:54

160浏览

0评论

详解react-router-dom v6版本基本使用介绍

目录RoutesRouteNavigateNavLinkuseRoutes嵌套路由路由传参编程式导航Routes代替Switch组件,不会向下匹配用来包裹RouteRoute必须被Routes组件包裹component属性变成element...

2023-01-05 20:55:04

135浏览

0评论

React中的Props类型校验和默认值详解

目录一、props规则校验二、props默认值1.函数式默认值1.1 函数参数默认值（新版推荐）1.2 defaultProps 设置默认值2.类式默认值2.1 defaultProps2.2 类静态属性声明总结一、pro...

2023-01-05 20:53:45

133浏览

0评论

React函数组件与类组件使用及优劣对比

目录一、类组件的问题原因一、因为this带来的问题：问题描述问题解析原因二、类组件代码量比函数组件多：原因三、类组件过于臃肿不易拆分：二、函数组件的问题挂载阶段：getDervied...

2023-01-05 20:53:43

252浏览

0评论

React服务端渲染和同构的实现

目录背景第一阶段第二阶段第三阶段创建一个服务端渲染应用同构流程总结路由路由同构背景第一阶段很久以前, 一个网站的开发还是前端和服务端在一个项目来维护, 可能是用php+...

2023-01-05 20:53:41

114浏览

0评论

React中的Diff算法你了解吗

目录一、Diff算法的作用二、React的Diff算法 1、什么是调和？2、什么是React diff算法？3、diff策略4、tree diff：5、component diff :6、element diff 三、基于Diff的开发建议...

2023-01-05 20:53:39

142浏览

0评论

React 组件中的state和setState()你知道多少

目录state的基本使用setState()修改状态解决方法：总结state的基本使用状态（state）即数据，是组件内部的私有数据，只能在组件内部使用state的值是对象，可以通过this.state来获取状态...

2023-01-05 20:53:32

122浏览

0评论

React实现核心Diff算法的示例代码

目录Diff算法的设计思路Demo介绍Diff算法实现遍历前的准备工作遍历after遍历后的收尾工作总结Diff算法的设计思路试想，Diff算法需要考虑多少种情况呢？大体分三种，分别是：节点属...

2023-01-05 20:53:30

159浏览

0评论

30行代码实现React双向绑定hook的示例代码

目录使用Proxy代理数据使用useRef创建同一份数据引用添加更新handler去除多次Proxy添加缓存完善代码总结Sandbox 示例Vue和MobX中的数据可响应给我们留下了深刻的印象，在Reac...

2023-01-05 20:53:29

101浏览

0评论

React18之状态批处理的使用

目录状态自动批处理17版 18版退出状态自动批处理要点概述react在3月29号正式发布了18版本, 此次更新包括: 状态自动批处理, 客户端渲染api的更新, 新的hook等很多变化, 本...

2023-01-05 20:53:27

128浏览

0评论

React中setState同步异步场景的使用

目录setState同步异步场景描述原理保证内部数据统一启用并发更新参考setState同步异步场景React通过this.state来访问state，通过this.setState()方法来更新state，当this.setSt...

2023-01-05 20:53:25

392浏览

0评论

React项目中fetch实现跨域接收传递session的解决方案

本次项目使用了react框架，同时使用fetch取代ajax作为获取接口数据的交互方法。本以为过程中应该不会有什么磕绊，没想到遇到了session丢失这个让人甚是苦恼的问题。期间本想换...

2023-01-05 20:53:23

143浏览

0评论

React如何使用refresh_token实现无感刷新页面

目录步骤如下：具体实现步骤如下：1-token过期根据refresh_token获取新的token 重新获取数据2-创建一个新的axios实例【使用request防止再次进入请求拦截和请求响应而进入死循...

2023-01-05 20:53:22

137浏览

0评论

React-hooks中的useEffect使用步骤

目录1.理解函数副作用什么是副作用?常见的副作用2.基础使用使用步骤示例代码3.依赖项控制useEffect 永远是在 DOM渲染完成之后执行1.理解函数副作用什么是副作用?对于React...

2023-01-05 20:53:20

157浏览

0评论

React Hook之使用State Hook的方法

目录等价的class示例Hook和函数组件Hook是什么？声明State变量读取State更新State小结提示：方括号有什么用？提示：使用多个state变量总结Hook 简介章节中使用下面的例子介绍了 Hoo...

2023-01-05 20:53:18

93浏览

0评论

React四级菜单的实现

效果图JSimport { Fragment, useState } from 'react';import styles from './style.less';const data1 = [ { name: '人口', id: 1, arr: [...

2023-01-05 20:53:17

163浏览

0评论

React表单容器的通用解决方案

目录1. 前话2. 正文2.1 表单容器定义2.2 表单容器定义实现2.3 表单容器呈现实现2.3.1 弹窗表单容器2.3.1 抽屉表单容器2.4 表单容器用例3. 最后1. 前话提问：ToB中台类系统的...

2023-01-05 20:53:14

138浏览

0评论

React Hooks与setInterval的踩坑问题小结

目录一、需求二、解决方案1、函数式更新2、使用useRef3、用useReducer4、自定义的hooks一、需求我们希望有一个每一秒自动+1的定时器function Counter() { let [count, set...

2023-01-05 20:53:13

124浏览

0评论

react使用axios进行api网络请求的封装方法详解

目录前言准备工作开始封装axiosconfig.jsrequest.js进行请求总结前言最近写react项目使用到axios进行请求封装，在这里记录一下，希望可以帮助到初学的小伙伴准备工作进行请求需...

2023-01-05 20:53:11

134浏览

0评论

react 可拖拽进度条的实现

效果/* * @Author: hongbin * @Date: 2022-04-16 13:26:39 * @LastEditors: hongbin * @LastEditTime: 2022-04-16 21:00:02 * @Description:拖动进度条组件 */import { FC,...

2023-01-05 20:53:09

448浏览

0评论

使用reactjs优化了进度条页面性能提高70%

目录前言进度条的应用场景不推荐的写法推荐的写法组件部分样式部分缺陷缺陷：这两种方案都会引发频繁的重排和重绘重排：重绘：极致的优化小彩蛋「优化前」「优化后」结尾前言大家...

2023-01-05 20:53:04

110浏览

0评论

react底层的四大核心内容架构详解

目录reactreact-domreact-reconcilerscheduler总结react提供定义 react 组件(ReactElement)的必要函数, 一般来说需要和渲染器(react-dom,react-native)一同使用. 在编写rea...

2023-01-05 20:52:56

175浏览

0评论

React Native 加载H5页面的实现方法

目录一、基本使用1.1 RN向H5发送数据1.2 H5向RN传递数据1.3 双向传值二、属性和方法2.1 属性2.2 方法三、使用示例3.1 加载外源网页信息3.2 登陆场景3.3 功能模块嵌入到 RN...

2023-01-05 20:52:55

138浏览

0评论

ReactJS入门实例教程详解

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

2023-01-05 20:52:53

139浏览

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

108浏览

0评论

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

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

2023-01-05 20:52:41

122浏览

0评论

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

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

2023-01-05 20:52:39

108浏览

0评论

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

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

2023-01-05 20:52:37

105浏览

0评论

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

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

2023-01-05 20:52:36

140浏览

0评论

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

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

2023-01-05 20:52:33

109浏览

0评论

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

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

2023-01-05 20:52:30

129浏览

0评论

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

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

2023-01-05 20:52:28

127浏览

0评论

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

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

2023-01-05 20:52:27

107浏览

0评论

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

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

2023-01-05 20:52:25

125浏览

0评论

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

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

2023-01-05 20:52:21

421浏览

0评论

react简单实现防抖和节流

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

2023-01-05 20:52:19

122浏览

0评论

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

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

2023-01-05 20:52:17

138浏览

0评论

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

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

2023-01-05 20:52:16

119浏览

0评论

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

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

2023-01-05 20:52:12

150浏览

0评论

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

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

2023-01-05 20:52:09

105浏览

0评论

react如何添加less环境配置

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

2023-01-05 20:52:07

107浏览

0评论

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

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

2023-01-05 20:52:04

95浏览

0评论

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

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

2023-01-05 20:52:02

117浏览

0评论

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

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

2023-01-05 20:52:00

108浏览

0评论

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

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

2023-01-05 20:51:55

118浏览

0评论

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

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

2023-01-05 20:51:52

107浏览

0评论

React Native Popup实现示例

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

2023-01-05 20:51:49

147浏览

0评论

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

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

2023-01-05 20:51:47

首页 «183 184185186 187 »尾页

热门文章