编程开发 - 教程之家

编程开发

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

79浏览

0评论

React 组件权限控制的实现

目录前话正文1. 控制方式1.1 直接计算1.2 通用权限Hoc1.3 权限包裹组件2. 控制结果2.1 显隐控制2.2 自定义渲染3. 权限数据3.1 静态权限3.2 动态权限前话具备用户体系的业务...

2023-01-05 20:58:59

76浏览

0评论

React自定义Hook-useForkRef的具体使用

目录开篇思路实现自定义 Hook - useForkRef开篇使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素，而在使用 React 封装组件时，会有这样一个场景：组件将 prop...

2023-01-05 20:58:57

74浏览

0评论

react中的双向绑定你真的了解吗

前言：因为项目原因需要学习另一个超级火的框架react, 因为之前一直使用vue进行开发，所以在学习react中会不自觉的代入一些vue中的概念来理解react中的实现，下面就通过对比学习...

2023-01-05 20:58:56

53浏览

0评论

React的事件处理你了解吗

目录一、React的事件处理1、与DOM事件处理的不同之处（1）React事件的命名方式：小驼峰方式，DOM的命名方式是小写（2）事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值（3）阻止...

2023-01-05 20:58:54

66浏览

0评论

react中JSX的注意点详解

目录1 JSX 是一个表达式2 JSX 的属性2.1 驼峰命名2.2 style 接收一个对象3 JSX 标签没有子元素4 JSX 防止注入攻击5 唯一父元素总结1 JSX 是一个表达式JSX 是 JavaScript 的...

2023-01-05 20:58:52

52浏览

0评论

快速创建React项目并配置webpack

目录1.快速创建React项目2.安装所需包3.根目录创建webpack.config.js文件，代码如下4.在根目录下添加文件 .babelrc，代码如下5.修改 package.json6.修改public/index.html文件7...

2023-01-05 20:58:47

72浏览

0评论

React中代码分割的4种实现方式

目录前言import()React.lazyimport() + React LoadableUmiJS 按需加载总结前言在 React 应用中，我们通常的做法是直接将某个模块导入到页面中，这样做导致的结果是打包出来的包...

2023-01-05 20:58:45

281浏览

0评论

深入理解React 三大核心属性

目录1、State 属性2、Props 属性3、Refs 属性（1）字符串形式（2）函数回调形式（3）createRef 创建 ref 容器1、State 属性React 把组件看成是一个状态机（State Machines）。通过与用户...

2023-01-05 20:58:43

49浏览

0评论

React的三大属性你都知道吗

目录React三大属性props函数组件类组件state有状态组件和无状态组件setStateprops和state属性的区别refsReact.createRefref的绑定总结React三大属性props组件是封闭的，接收...

2023-01-05 20:58:41

43浏览

0评论

react实现导航栏二级联动

本文实例为大家分享了react实现导航栏二级联动的具体代码，供大家参考，具体内容如下效果图js代码import { Component } from "react";import './scroll.less' class Scroll ex...

2023-01-05 20:58:39

50浏览

0评论

在react中使用mockjs的方法你知道吗

目录介绍安装&卸载&引入基础语法&规范 7种生成规则生成规则和属性值value的关系占位符@模拟接口总结介绍mock意为“模仿”或"模拟"，简单来说，就是造数据，造你想要的...

2023-01-05 20:58:37

182浏览

0评论

React Native集成支付宝支付的实现方法

在RN应用开发过程中，集成支付宝和微信支付除了直接使用第三方的插件之，比如：react-native-yunpeng-alipay，我们还可以借助RN提供的NativeModules调用原生模块来实现支付。Native...

2023-01-05 20:58:36

224浏览

0评论

React中前端路由的示例代码

目录一. url是什么二. 使用步骤一. url是什么访问不同url, 展示不同的组件二. 使用步骤安装React路由：命令行中执行npm install react-router-dom --save(注意此处的版本为np...

2023-01-05 20:58:34

64浏览

0评论

React 数据共享useContext的实现

因为疫情，最近接手一个新项目。是React的。上次写React已经过去1年多了。虽然捡起来也不是什么难事，不过技术这个东西，长时间不用就容易忘记。为了保证这个项目根其他平行项目...

2023-01-05 20:58:31

87浏览

0评论

说说react中引入css的方式有哪些并区别在哪

目录前言方式在组件内组件中引入css文件组件中引入 .module.css 文件CSS in JS区别前言组件式开发选择合适的css解决方案尤为重要通常会遵循以下规则：可以编写局部css，不会随...

2023-01-05 20:58:30

53浏览

0评论

react中的axios模块你了解吗

目录一、react中axios模块的使用1、基于Promise的HTTP库用在浏览器和node.js中2、创建XMLHttpRequest对象：3、在react中安装axios4、发起不带参数的get请求5、带参数的get请...

2023-01-05 20:58:28

50浏览

0评论

React经典面试题之倒计时组件详解

目录闲聊倒计时组件——需求描述：问题最后闲聊关于面试大家常常吐槽：“面试造火箭，工作拧螺丝。”，从而表达了对工作内容和能力要求匹配不一的现状。不排除...

2023-01-05 20:58:25

291浏览

0评论

如何在React项目中使用AntDesign

目录0.前言1.AntDesign是什么？2.AntDesign如何使用？3.如何具体使用AntDdesign的组件3-1.如何使用 antd 的Table组件3-2.如何使用 antd 的Button组件4.后续0.前言我们在后台管...

2023-01-05 20:58:23

72浏览

0评论

React中styled-components的使用

目录一、官网地址二、styled-components三、基本使用四、全局默认样式引入五、传参六、继承七、修改组件内部标签八、定义组件属性九、背景图片引入十、塑造组件十一、动画`...

2023-01-05 20:58:20

75浏览

0评论

React18新增特性released的使用

目录新功能：Automatic Batching新功能：Transitions新的Suspense功能新的客户端和服务器Rendering APIsReact DOM ClientReact DOM Server新的Strict Mode Behaviors新HooksRea...

2023-01-05 20:58:18

47浏览

0评论

一起来了解React的Hook

目录StateHook声明多个state变量那么，什么是Hook?EffectHookHook使用规则自定义Hook其他Hook总结State Hook这个例子用来显示一个计数器。当你点击按钮，计数器的值就会增加：imp...

2023-01-05 20:58:15

62浏览

0评论

浅谈react 16.8版本新特性以及对react开发的影响

目录react 16.8版本更新useEffectreact16.8版本更新解决了什么问题组件复用更便捷hooks和react diff算法总结Facebook团队对社区上的MVC框架都不太满意的情况下，开发了一套开...

2023-01-05 20:58:12

73浏览

0评论

react实现可播放的进度条

本文实例为大家分享了react实现可播放进度条的具体代码，供大家参考，具体内容如下实现的效果图如下：如果所示，点击播放按钮可以播放，进度条表示进度功能描述：1. 点击播放按钮可以播...

2023-01-05 20:58:10

111浏览

0评论

React框架快速实现简易的Markdown编辑器

目录前言需要实现的功能具体实现一、布局二、markdown语法解析三、markdown主题样式四、代码块高亮五、同步滚动bug1：bug2：六、工具栏七、补充八、最后前言最近我在项目中需要...

2023-01-05 20:58:08

61浏览

0评论

react18中react-redux状态管理的实现

react的状态管理还是挺多的现在流行的有以下五种：RecoilMobXXStateReduxContext今天我们来讲一下react众多状态管理之一的redux，虽然这个我不太喜欢用，但是我觉得简单的状态管...

2023-01-05 20:58:01

74浏览

0评论

React18中的useDeferredValue示例详解

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

2023-01-05 20:57:59

75浏览

0评论

react中antd Upload手动上传的示例

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

2023-01-05 20:56:43

56浏览

0评论

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

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

2023-01-05 20:55:54

78浏览

0评论

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

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

2023-01-05 20:55:04

58浏览

0评论

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

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

2023-01-05 20:53:45

55浏览

0评论

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

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

2023-01-05 20:53:43

142浏览

0评论

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

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

2023-01-05 20:53:41

48浏览

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

59浏览

0评论

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

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

2023-01-05 20:53:32

58浏览

0评论

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

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

2023-01-05 20:53:30

80浏览

0评论

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

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

2023-01-05 20:53:29

35浏览

0评论

React18之状态批处理的使用

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

2023-01-05 20:53:27

56浏览

0评论

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

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

2023-01-05 20:53:25

304浏览

0评论

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

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

2023-01-05 20:53:23

65浏览

0评论

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

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

2023-01-05 20:53:22

67浏览

0评论

React-hooks中的useEffect使用步骤

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

2023-01-05 20:53:20

66浏览

0评论

React Hook之使用State Hook的方法

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

2023-01-05 20:53:18

26浏览

0评论

React四级菜单的实现

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

2023-01-05 20:53:17

75浏览

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

53浏览

0评论

React Hooks与setInterval的踩坑问题小结

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

2023-01-05 20:53:13

56浏览

0评论

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

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

2023-01-05 20:53:11

57浏览

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

349浏览

0评论

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

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

2023-01-05 20:53:04

45浏览

0评论

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

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

2023-01-05 20:52:56

96浏览

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

首页 «158 159160161 162 »尾页

热门文章