57浏览

0评论

React前端开发createElement源码解读

目录React 与 Babel元素标签转译组件转译子元素转译createElement源码函数入参第一段代码 __self 和 __source第二段代码 props 对象第三段代码 children第四段代码 default...

• 2023-01-05

61浏览

0评论

React渲染机制超详细讲解

目录准备工作render阶段workloopSyncbeginWorkcompleteWorkcommit阶段commitWorkmutation之前mutationfiber树切换layoutlayout之后总结准备工作为了方便讲解，假设我们有下面...

• 2023-01-05

47浏览

0评论

React深入分析useEffect源码

目录热身准备初始化 mount更新 updateupdateEffect执行副作用总结热身准备这里不再讲useLayoutEffect，它和useEffect的代码是一样的，区别主要是：执行时机不同；useEffect是异步， u...

• 2023-01-05

66浏览

0评论

React运行机制超详细讲解

目录适合人群写源码之前的必备知识点JSX虚拟Dom原理简介手写react过程基本架子的搭建React的源码ReactDom.renderReactDom.Component简单源码适合人群本文适合0.5~3年的reac...

• 2023-01-05

51浏览

0评论

React Native可定制底板组件Magic Sheet使用示例

目录正文如何使用它1.安装并导入2.基本使用方法预览正文一个React Native组件，通过提供一个强制性的API，可以从应用程序的任何地方（甚至在组件之外）调用，以显示一个完全可定制的...

• 2023-01-05

230浏览

0评论

React函数式组件Hook中的useState函数的详细解析

目录前言一、什么是函数式组件二、useState前言公司项目需要使用react，而函数式组件也是官方比较推荐的！！！所以学习hooks是很重要的。一、什么是函数式组件纯函数组件有以下特点...

• 2023-01-05

42浏览

0评论

React为什么需要Scheduler调度器原理详解

目录正文我们为什么需要Scheduler(调度器)Scheduler如何进行工作总结正文最近在重学React，由于近两年没使用React突然重学发现一些很有意思的概念，首先便是React的Scheduler(...

• 2023-01-05

47浏览

0评论

React使用ref方法与场景介绍

目录摘要1.ref的挂载2.使用ref的三种方式3.ref的使用场景摘要不管在Vue中还是React，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一个专属的API就是re...

• 2023-01-05

47浏览

0评论

useReducer createContext代替Redux原理示例解析

目录前言采用react-redux实现采用react hooks模拟redux实现异步action总结前言最近看到很多采用useReducer + createContext 实现一个简易的redux的方案，今天亲自试了一下，发...

• 2023-01-05

209浏览

0评论

React Hook中的useEffecfa函数的使用小结

目录useEffect的详细解析useEffecf基本使用清除副作用(Effect)使用多个useEffectuseEffect性能优化useEffect的详细解析useEffecf基本使用书接上文, 上一篇文章我们讲解了St...

• 2023-01-05

56浏览

0评论

React Redux应用示例详解

目录一 React-Redux的应用1.学习文档2.Redux的需求3.什么是Redux4.什么情况下需要使用redux二、最新React-Redux 的流程安装Redux Toolkit创建一个 React Redux 应用基础示...

• 2023-01-05

52浏览

0评论

React超详细分析useState与useReducer源码

目录热身准备为什么会有hookshooks执行时机两套hookshooks存储初始化 mountuseStatemountWorkInProgressHook更新updateupdateStateupdateReducerupdateWorkInProgressHook...

• 2023-01-05

56浏览

0评论

React Fiber源码深入分析

目录前言React架构前世今生React@15及之前React@16及之后FiberFiber简单理解Fiber结构Fiber工作原理mountupdate前言本次React源码参考版本为17.0.3。React架构前世今生查阅...

• 2023-01-05

61浏览

0评论

React render核心阶段深入探究穿插scheduler与reconciler

目录触发更新ReactDOM.rendersetStateforceUpdate创建更新任务获取更新触发时间划分更新任务优先级创建更新对象关联 fiber 的更新队列reconciler 过程根据任务类型执行不同...

• 2023-01-05

58浏览

0评论

适用于React Native 旋转木马应用程序介绍

目录正文如何使用它1.安装并导入 react-native-intro-carousel2.示例应用程序预览正文一个带有分页功能的介绍页面旋转木马（onboarding）动画。如何使用它1.安装并导入 react-n...

• 2023-01-05

50浏览

0评论

react context优化四重奏教程示例

目录一、前言二、用法三、缺点四、context优化一重奏--使用PureComponent二重奏--使用shouldComponentUpdate三重奏--使用React.memo四重奏--Provider再封装+props.children...

• 2023-01-05

321浏览

0评论

React函数式组件Hook中的useEffect函数的详细解析

目录前言useEffect的作用useEffect的使用？1.class组件2.函数式组件总结前言React函数式编程没有生命周期，因此需要借助useEffect来实现。useEffect的作用发ajax请求获取数据设...

• 2023-01-05

77浏览

0评论

React前端解链表数据结构示例详解

目录什么是链表链表与数组的比较链表有什么作用？链表的优缺点通过JS简单实现一个单向链表创建Node辅助类单向链表新增操作单向链表插入操作单向链表删除操作单向链表查找操作...

• 2023-01-05

67浏览

0评论

React事件处理过程中传参的实现方法

目录摘要1.箭头函数2.函数柯里化3.bind方法摘要首先我们知道，在React中，是通过小驼峰式给元素绑定事件： fn = ()=>{ //执行代码 } button onClick={this.fn}>111</button...

• 2023-01-05

81浏览

0评论

React条件渲染实例讲解使用

我们先创建一个用于演示条件渲染的组件import './App.css';import React from "react";class App extends React.Component{ constructor(props){ super(props); thi...

• 2023-01-05

38浏览

0评论

如何在React中直接使用Redux

React中使用Redux开始之前需要强调一下，redux和react没有直接的关系，你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。尽管这样说，redux依然是...

• 2023-01-05

53浏览

0评论

React自定义视频全屏按钮实现全屏功能

目录前言一、绘制全屏按钮二、编写点击事件三、编写相关函数提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前言React自定义视频全屏按钮，实现全屏功能。一、...

• 2023-01-05

57浏览

0评论

React jsx转换与createElement使用超详细讲解

目录jsx的转换16.x版本及之前17.x版本及之后React.createElement源码React.Component 源码总结jsx的转换我们从 react 应用的入口开始对源码进行分析，创建一个简单的 hello,...

• 2023-01-05

68浏览

0评论

React.memo 和 useMemo 的使用问题小结

目录问题背景useMemo 进行优化React.memo 进行优化props的值是基本类型props的值是引用类型写在最后问题背景大家在使用 React 框架进行开发时一定遇到过以下问题：当函数式组...

• 2023-01-05

54浏览

0评论

可定制react18 input otp 一次性密码输入组件

目录正文主要特点基本用法1.安装和导入2.将OtpInput组件添加到应用程序中3.所有默认的道具预览正文一个完全可定制的、用于React驱动的应用程序的一次性密码（OTP）、电话号码和...

• 2023-01-05

50浏览

0评论

React使用useEffect解决setState副作用详解

目录介绍一下APIfetch()方法访问APIsetState的副作用使用useEffect解决这个问题使用useEffect操控函数运行介绍一下API本文主要内容：描述了setState与fetch之间产生的冲突副...

• 2023-01-05

53浏览

0评论

React中classnames库使用示例

目录classnames的引入引入使用 Node.js, Browserify, or webpack:classnames函数的使用数组的形式ES6中使用动态类名结合React一起使用总结：classnames的引入从名字上可以看...

• 2023-01-05

60浏览

0评论

React Fiber 链表操作及原理示例详解

目录正文什么是FiberFiber节点React源码Fiber树是链表节点独立节省操作时间与单向操作利于双缓存与异步可中断更新操作异步可中断更新双缓存正文看了React源码之后相信大家...

• 2023-01-05

316浏览

0评论

React Native自定义Android的SSL证书链校验

目录前言HTTPS请求WebSocket前言虽然这次分享的内容解决了本人的实际开发需求，但由于不是专职的Android开发工程师，涉及到的Android相关内容可能会存在错误或者写法不合理，仅供...

• 2023-01-05

33浏览

0评论

React使用refs操作DOM方法详解

在react框架 甚至说是三大框架中都是不太支持大家直接去操作dom的因为也没什么必要当然也会有特殊情况 例如视频播放 强制动画 第三方插件的一些渲染或初始化官方也给了我们...

• 2023-01-05

39浏览

0评论

React-Hook中使用useEffect清除定时器的实现方法

目录useEffectuseEffect清除定时器最后useEffect之前我们学习了class组件的声明周期，那么我们想在函数式组件中做一些声明周期有关操作能否实现呢？
函数式组件中是没有生命周...

• 2023-01-05

190浏览

0评论

react fiber执行原理示例解析

目录为什么要使用fiber，要解决什么问题?fiber是什么？数据结构执行单元浏览器工作：Fiber执行原理workInProgress tree：currentFiber tree：Effects list：render阶段：遍历节点过程：收集...

• 2023-01-05

59浏览

0评论

React commit源码分析详解

目录总览commitBeforeMutationEffectscommitMutationEffects插入 dom 节点获取父节点及插入位置判断当前节点是否为单节点在对应位置插入节点更新 dom 节点更新 HostCompone...

• 2023-01-05

54浏览

0评论

React可定制黑暗模式切换开关组件

目录正文如何使用它。1.安装和下载2.导入DarkModeToggle组件3.将黑暗模式切换添加到应用程序中4.默认的组件道具预览正文一个用于React的可定制的黑暗模式切换开关组件。如...

• 2023-01-05

271浏览

0评论

React Hook中的useState函数的详细解析

useState => 让函数组件具有维持状态的能力
useState 这个 Hook 是用来管理 state 的，它可以让函数组件具有维持状态的能力。即在一个函数组件的多次渲染之间，这个 state 是共...

• 2023-01-05

57浏览

0评论

React动画实现方案Framer Motion让页面自己动起来

目录前言效果体验快速开始安装输入使用方式示例节点的挂载与卸载(mount、unmount)列表更多API美中不足前言相信很多前端同学都或多或少和动画打过交道。有的时候是产品想要...

• 2023-01-05

40浏览

0评论

React中的路由嵌套和手动实现路由跳转的方式详解

目录React的路由嵌套手动路由的跳转React的路由嵌套接上一篇文章, 在上一篇文章中讲解了路由的基本介绍, 我再来介绍一下路由的其他用法在开发中，路由之间是存在嵌套关系的。...

• 2023-01-05

74浏览

0评论

el-form错误提示信息手动添加和取消的示例代码

目录需求方案最新想到的方案 推荐运行效果：实现代码需求对表单填写字段进行标记有误和取消标记有误方案最新想到的方案 推荐定义一个存放错误信息的对象，然后再自定义一个验证...

• 2022-12-31

183浏览

0评论

el-table 行合并的实现示例

目录示例一：单个表格示例二：循环表格页面实现行合并的情况还是比较常见的，但实现起来却有一点点难。官网的例子有，不过人家的合并逻辑是从第一行开始两行两行合并，不能根据数据动...

• 2022-12-31

67浏览

0评论

Vue全局事件总线和订阅与发布使用案例分析讲解

目录一、全局事件总线作用安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示二、订阅与发布安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示一、全局事件总线作...

• 2022-12-31

93浏览

0评论

vue-quill-editor富文本编辑器超详细入门使用步骤

目录首先放上效果图1.安装2.引入到项目中3.在页面上写组件4.配置option5.给工具栏鼠标悬停加上中文释义6.上传图片到七牛云7.自定义控制图片大小参考文章：总结首先放上效果图...

• 2022-12-31

212浏览

0评论

ant-design-vue动态表格合并案例

目录前言数据格式ant-desgin-vue表格提供的api合并单元格算法实现效果展示前言最近接到一个需求，要把后端传过来的数据动态展示在表格上面，并且支持前端筛选，相同数据进行单元...

• 2022-12-31

150浏览

0评论

vue移动端项目渲染pdf步骤及问题小结

第一步：引入pdf包 import pdf from "vue-pdf-signature";，这里不引入vue-pdf的包后面再做解释import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";...

• 2022-12-31

63浏览

0评论

Vue装饰器中的vue-property-decorator 和 vux-class使用详解

目录1. 安装2. vue-property-decorator3. vuex-class目前在用vue开发的项目中，都会配合使用TypeScript进行一些约束。为了提高开发效率，往往会使用装饰器来简化我们的代码。本...

• 2022-12-31

98浏览

0评论

vue项目使用cdn加速减少webpack打包体积

目录1.引入cdn资源​2.在webpack基础配置文件中加入externals配置，打包、编译时去除cdn加速的模块，可以大大压缩打包后的压缩包体积3.去除main.js中对以上模块的引用，注册总结...

• 2022-12-31

53浏览

0评论

Vue cli3.0创建Vue项目的简单过程记录

创建Vue项目在要创建项目的文件夹下面打开Powershell窗口输入命令 vue create 项目名称选择第二项回车后选择是否使用历史路由 no 回车选择 Less 回车选择第三个 回车选择第...

• 2022-12-31

75浏览

0评论

Vs-code/WebStorm中构建Vue项目的实现步骤

目录一、使用Vue脚手架(vue-cli)构建Vue项目二、使用Vite构建工具构建Vue项目三、WebStorm中创建Vue项目(使用Vite构建工具)一、使用Vue脚手架(vue-cli)构建Vue项目1、打开c...

• 2022-12-31

98浏览

0评论

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程

大概是在18年的时候，当时还没有疫情。当时工作中同时负责多个项目，有 PC 端运营管理后台的，有移动端 M 站的，有微信小程序的，每天 git 分支切到头昏眼花，每个需求提测需要发送邮件...

• 2022-12-31

64浏览

0评论

vue el-select与el-tree实现支持可搜索树型

目录1. 树型下拉菜单2. vue页面代码3. selectTree 组件代码1. 树型下拉菜单实现效果2. vue页面代码引入selectTree组件import { selectTree } from '@/components'export de...

• 2022-12-31

89浏览

0评论

关于路由重定向redirect的基本使用

目录路由重定向redirect重定向案例vue路由重定向+路由别名路由重定向路由别名（了解）路由重定向redirect重定向使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转...

• 2022-12-31