73浏览

0评论

React-Router6版本的更新引起的路由用法变化

目录用法变化替换为嵌套路由重定向路由跳转路由传参search传参动态路由传参其他总结React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的...

• 2023-01-05

75浏览

0评论

你知道怎么基于 React 封装一个组件吗

目录antd 是如何封装组件的仓库地址divider 组件源代码如何暴露组件属性如何设置统一类名前缀如何处理样式与类名divider 组件样式源代码总结前言很多小伙伴在第一次尝试封...

• 2023-01-05

57浏览

0评论

React工作流程及Error Boundaries实现过程讲解

目录什么是Error Boundaries步骤1:捕获错误步骤2:构造callback执行callback总结这里简单讲解下React工作流程，后文有用。分为三步：触发更新render阶段：计算更新会造成的副作用c...

• 2023-01-05

89浏览

0评论

React组件二次包装的具体实现

目录1. 类型声明2. 默认属性3. 自定义属性与属性透传原生组件是对公共场景的抽象，若要契合实际业务往往需要对其进行二次包装。
对组件进行二次包装一般需要进行包括不限于以...

• 2023-01-05

61浏览

0评论

聊聊jenkins部署vue/react项目的问题

目录准备工作1、安装参数化部署插件2、安装好插件后，配置Nodejs环境创建项目构建centOS安装jenkins1、安装JDK2、安装jenkins3、配置jenkis的端口4、启动jenkinsjenkins安装...

• 2023-01-05

61浏览

0评论

react 源码中位运算符的使用详解

位运算符基本使用按位与(&)：a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0按位或(|)：a | b对于每一个比特位,两个操作数都为 0 时, 结果为 0, 否则为 1按位...

• 2023-01-05

54浏览

0评论

React中的axios模块及使用方法

目录1 axios介绍2 使用方法2.1 在React中安装axios2.2 get请求2.3 post请求：发送表单数据和文件上传2.4 put请求：对数据进行全部更新2.5 patch请求：只对更改过的数据进行更新2....

• 2023-01-05

196浏览

0评论

一起来学习React元素的创建和渲染

目录React 和 ReactDOMReact 初体验创建 React 元素JSXJSX 初体验总结React 是一个用于构建用户界面的 JavaScript 库它包括两个库：react.js 和 react-dom.jsreact.js：React...

• 2023-01-05

70浏览

0评论

深入理解React State 原理

目录问题：setState 到底是同步还是异步的？类组件statesetState原理揭秘函数组件state问题：setState 到底是同步还是异步的？如果对 React 底层有一定了解，可以回答出 batchUpdate...

• 2023-01-05

267浏览

0评论

React中使用react-player 播放视频或直播的方法

业务中需要播放视频，寻来寻去，找到了react-player初次点击，甚是眼熟，思来想去，竟是钉钉同款如果使用react框架 先安装npm install --save video-react react react-dom redux1.引...

• 2023-01-05

67浏览

0评论

你知道怎么在 HTML 页面中使用 React吗

目录index.html代码：index.js代码：ReactComponentContainer.js代码：HelloReact.jsx代码：遇到的问题：Gitee代码地址：总结该方案使用场景：在html页面中使用react，主js文件index.js和其...

• 2023-01-05

84浏览

0评论

React 组件权限控制的实现

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

• 2023-01-05

78浏览

0评论

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

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

• 2023-01-05

77浏览

0评论

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

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

• 2023-01-05

57浏览

0评论

React的事件处理你了解吗

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

• 2023-01-05

69浏览

0评论

react中JSX的注意点详解

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

• 2023-01-05

54浏览

0评论

快速创建React项目并配置webpack

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

• 2023-01-05

74浏览

0评论

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

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

• 2023-01-05

286浏览

0评论

深入理解React 三大核心属性

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

• 2023-01-05

52浏览

0评论

React的三大属性你都知道吗

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

• 2023-01-05

49浏览

0评论

react实现导航栏二级联动

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

• 2023-01-05

54浏览

0评论

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

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

• 2023-01-05

187浏览

0评论

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

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

• 2023-01-05

227浏览

0评论

React中前端路由的示例代码

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

• 2023-01-05

66浏览

0评论

React 数据共享useContext的实现

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

• 2023-01-05

93浏览

0评论

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

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

• 2023-01-05

56浏览

0评论

react中的axios模块你了解吗

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

• 2023-01-05

54浏览

0评论

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

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

• 2023-01-05

299浏览

0评论

如何在React项目中使用AntDesign

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

• 2023-01-05

74浏览

0评论

React中styled-components的使用

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

• 2023-01-05

78浏览

0评论

React18新增特性released的使用

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

• 2023-01-05

51浏览

0评论

一起来了解React的Hook

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

• 2023-01-05

68浏览

0评论

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

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

• 2023-01-05

75浏览

0评论

react实现可播放的进度条

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

• 2023-01-05

116浏览

0评论

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

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

• 2023-01-05

66浏览

0评论

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

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

• 2023-01-05

76浏览

0评论

React18中的useDeferredValue示例详解

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

• 2023-01-05

78浏览

0评论

react中antd Upload手动上传的示例

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

• 2023-01-05

59浏览

0评论

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

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

• 2023-01-05

82浏览

0评论

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

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

• 2023-01-05

61浏览

0评论

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

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

• 2023-01-05

62浏览

0评论

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

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

• 2023-01-05

149浏览

0评论

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

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

• 2023-01-05

50浏览

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

62浏览

0评论

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

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

• 2023-01-05

60浏览

0评论

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

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

• 2023-01-05

82浏览

0评论

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

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

• 2023-01-05

38浏览

0评论

React18之状态批处理的使用

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

• 2023-01-05

60浏览

0评论

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

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

• 2023-01-05

309浏览

0评论

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

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

• 2023-01-05