Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢？在本篇 Vue 与 React 的对比中，我们将尝试找出答案。我们将回顾每种工具的优缺点，提供选择使用哪种工具的技巧，并帮助你开始使用。 总览 什么是Vue？ Vue...[2023/9/11]

在开发网页和移动应用时，经常需要处理大量数据的展示和加载。如果数据量非常大，一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题，我们可以使用无限滚动（Infinite Scroll）的技术。React 提供了一个方便的组件库，即 react-infinite-scroller，它可以帮助我...[2023/9/9]

React Native 封装Toast 前言 使用react native的小伙伴都知道，官方并未提供轻提示组件，只提供了ToastAndroid API，顾名思义，只能再安卓环境下使用，对于ios就爱莫能助，故此，只能通过官方的核心组件，自行封装，实现Toast功能 实现 创建文件 ...[2023/9/1]

因历史遗留原因，接手的项目没有代码提醒/格式化，包括 eslint、pretttier，也没有 commit 提交校验，如 husky、commitlint、stylelint，与其期待自己或者同事的代码写得完美无缺，不如通过一些工具来进行规范和约束。 eslint eslint 是一个代码校...[2023/8/7]

基于React18 Hooks实现手机端弹框组件RcPop react-popup 基于react18+hook自定义多功能弹框组件。整合了msg/alert/dialog/toast及android/ios弹窗效果。支持20+自定义参数、组件式+函数式调用方式，全方位满足各种弹窗场景需求。 ...[2023/7/31]

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：空山 前言 由于笔者最近在开发中遇到了一个重复渲染导致子组件状态值丢失的问题，因此关于性能优化做了以下的分析，欢迎大家的交流 我们在日常...[2023/7/26]

如何编写难以维护的React代码？——滥用useEffect 在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子，特别是在处理衍生状态时。让我们来看一个例子： const ComponentA = ({ list }) => { ...[2023/7/26]

什么是 Hook hook 即为钩子,是一种特殊的函数,它可以让你在函数式组件中使用一些 react 特性,目前在 react 中常用的 hook 有以下几类 useState: 用于在函数组件中定义和使用状态(state)。 useEffect:用于在函数组件中处理副作用,也可以模拟 rea...[2023/7/12]

之前写了两个 demo 讲解了如何实现 SSR 和 SSG，今天再写个 demo 说在 ISR 如何实现。 什么是 ISR ISR 即 Incremental Static Regeneration 增量静态再生，是指在 SSG 的前提下，可以在收到请求时判定页面是否需要刷新，如果需要则重新构...[2023/6/28]

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：霁明 一、背景 1、业务背景 业务中会有一些需要实现拖拽的场景，尤其是偏视觉方向以及移动端较多。拖拽在一定程度上能让交互更加便捷，能大大提升...[2023/6/9]

何为useRef useRef是随着react函数式组件发展而来的，是react众多官方hook中的一个，调用useRef可以返回一个伴随这组件整个声明周期不发生改变的对象，这个对象常见的用途有两个： 用于绑定dom元素，从而实现对dom元素的操作 用于保存不希望随着组件重新渲染而改变的值，如...[2023/5/26]

对于有多个应用系统的企业来说，每一个应用系统都有自己的用户体系，这就造成用户在切换不同应用系统时，就要多次输入账号密码，导致体验非常不好，也造成使用上非常不便。 针对这个问题，我们就可以采用单点登录的机制，只需用户登录一次，就可以实现切换到不同的应用系统，不需重新登录验证。 下面给大家推荐一...[2023/5/25]

在APP启动后，RN框架开始启动。等RN框架启动后，就开始进行RN页面渲染了。 RN页面原生侧页面渲染的主要逻辑实现是在RCTUIManager和RCTShadowView完成的。 通过看UIMananger的源码可以看到，UIMananger导出给JS端的API接口在对UI的操作上，基本都会同时...[2023/5/25]

平时使用WebStorm或VSCode对RN工程中的文件修改后，在键盘上按一下快捷cmd+s进行文件保存，此时当前调试的RN页面就会自动进行刷新，这是RN开发相比于原生开发一个很大的优点：热更新。 那么，从按一下快捷cmd+s到RN页面展示出最新的JS页面，这个过程是怎样发生的呢？下面根据时间顺序...[2023/5/19]

大家好，我是DOM哥。 图谱年年有，今年我来盘！ 之前已经盘完了 Vue 的技术图谱，今天来盘 React 的。 我用 ChatGPT 开发了一个 React 的资源导航网站。 不管你是资深 React 用户，还是刚入门想学习 React 的小白，这个网站都能帮助到你。 网站地址：ht...[2023/5/10]

useEffect 先理解 useEffect 有助于学习 useMemo 和 useCallback。因为 useMemo 和 useCallback 的实现实际上都是基于 useEffect 的。 useEffect 是 React 中的一个很重要的 Hook，用于执行副作用操作。什么...[2023/5/8]

目录一、Reactive源码1、reactive2、接着看工厂方法createReactiveObject二、baseHandlers1、baseHandlers vue3响应式核心文章汇总： vue3响应式核心之reactive源码详解 vue3响应式核心之effect源码详解 vue...[2023/4/24]

目录vue3.0 Reactive数据更新页面没有刷新vue3.0中的reactive用法在 reactive 使用基本类型参数响应式代理 vs. 原始对象总结 vue3.0 Reactive数据更新页面没有刷新 vue 3.0 ref 和 Reactive 数据响应式，以及使用 Reactiv...[2023/4/21]

目录引言UI组件渲染性能方案一：shallow compare方案二：直接对前后的对象进行deepCompare总结： 引言 react 一直遵循UI = fn(state) 的原则，有时候我们的state却和UI不同步 有时候组件本身在业务上不需要渲染，却又会再一次re-render。之前在项...[2023/4/19]

目录一、是什么？二、先聊reactive三、再聊ref四、ref和reactive定义数组对比五、对比总结总结 一、是什么？ ref和reactive是Vue3中用来实现数据响应式的API 一般情况下，ref定义基本数据类型，reactive定义引用数据类型 （我喜欢用它来定义对象，不用...[2023/4/17]

目录context传值用途Context传值优点何时使用 ContextContextAPI项目案例：主题色切换。添加自定义颜色添加监听context变化类组件的生命周期 假设： 项目中存在复杂组件树： context传值用途 数据是通过 props 属性自上而下（由父及子）进行传...[2023/3/20]

目录问题解决方案总结 问题 这样的问题貌似原因还挺多的，我的问题是带参数的url不能刷新，router 5.0版本 ，使用withRouter关联组件进行页面跳转 如下所示 路由代码 解决方案 在路由组件上最上层元素上加一个key增加路由的识别度，因为普通的跳转是根据...[2023/3/14]

目录使用reactive包裹数组正确赋值提供几种办法vue3的reactive重新赋值无效vue3官方的文档说明总结 使用reactive包裹数组正确赋值 需求：将接口请求到的列表数据赋值给响应数据arr const arr = reactive([]); const load = ...[2023/3/6]

目录React如何优雅的封装SvgIcon组件第一步：安装svg-sprite-loader第二步：配置webpack第三步：创建icon vg文件夹，并且加载所有svg文件第四步：创建 SvgIcon 组件第五步：在组件中使用 SvgIcon注意可能会遇到的bug总结 React如何优雅的封装Sv...[2023/2/22]

其他章节请看： react 高效高质量搭建后台系统 系列 权限 本系列已近尾声，权限是后台系统必不可少的一部分，本篇首先分析spug项目中权限的实现，最后在将权限加入到我们的项目中来。 spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户（例如 pjl），可以这...[2023/2/17]

目录react axios结合后端实现GET和POST请求get实现方式1（参数直接在url中）get时间方式2（作为JSONString跟在url末尾）post实现（传递JSONObject）react 项目axios请求配置axios请求封装总结 react axios结合后端实现GE...[2023/2/15]

目录react定义变量并使用这里面涉及到了react全局变量的设置总结 react定义变量并使用 这里面涉及到了 1、变量如何定义2、变量如何进行改变3、方法如何调用 都写有详细的注释大家可详细观看适合刚学习react的新同学 cla Packaging extends React....[2023/2/15]

其他章节请看： react 高效高质量搭建后台系统 系列 表格 有一种页面在后台系统中比较常见：页面分上下两部分，上部分是 input、select、时间等查询项，下部分是查询项对应的表格数据。包含增删改查，例如点击新建进行新增操作。就像这样： 本篇将对 ant 的表格进行封装...[2023/2/13]

其他章节请看： react 高效高质量搭建后台系统 系列 系统布局 前面我们用脚手架搭建了项目，并实现了登录模块，登录模块所依赖的请求数据和antd（ui框架和样式）也已完成。 本篇将完成系统布局。比如导航区、头部区域、主体区域、页脚。 最终效果如下： spug 中系统布局的分析...[2023/2/1]

目录思路实现注入权限列表抽离Context向页面注入权限列表的HOC向根组件注入权限含有权限拦截功能的HOC无权限时显示的组件权限拦截HOC组件测试用于测试的组件在组件中使用权限组件 高阶组件是以组件作为参数，返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。...[2023/1/30]

如何实现在react现有项目中嵌入Blazor？ 目前官方只提供了angular和react俩种示例所以本教程只将react教程 思路讲解： 首先在现有react项目中我们可能某些组件是在Blazor中完成，但是我们没办法找到怎么在react中轻量级使用blazor组件，可能会有人会使用if...[2023/1/20]

目录引言第一部分:简单版reactivity(1).实现reactive和effect(2).实现ref(3).实现computed第二部分:深入分析对于object、array的响应式代理(1).handlers中的getter(2).handlers中的setter(3).handlers的de...[2023/1/20]

目录深入分析对于map、set、weakMap、weakSet的响应式拦截(1).mutableInstrumentations(2).shallowInstrumentations(3).readonlyInstrumentations(4).shallowReadonlyInstrumentat...[2023/1/20]

目录正文桥梁commit EffectcommitRoot执行commitMutationEffects执行commitMutationEffectsOnFibersgetHostParent执行appendPlacementNodeIntoContainer执行例子： 正文 本系列是讲述从...[2023/1/18]

目录react ui库antd中form表单使用SelectTree反显问题最近遇到这个问题，后来找到原因react antd form表单回显踩坑需求如下总结 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题，后来找到原因 1.formItem 需...[2023/1/18]

刚好手上有一个要实现文字跑马灯的react项目，然后ant-design上面没有这个组件，于是只能自己手撸一个。 我想到的最简单的方法，就是定位啦，定时移动这个文字块不就跑起来了。 需要注意的是，要判断文字的宽度，当文字超出屏幕的宽度的时候再动起来，我用的是hook的写法，要在销毁页面的时...[2023/1/16]

目录为什么需要 fiberfiber 之前fiber 之后fiber 节点结构dom 相关属性tagkey 和 typestateNode链表树相关属性副作用相关属性flagsEffect List其他lanealternatefiber 树的构建与更新mount 过程update 过程总结 rea...[2023/1/11]

其他章节请看： react 高效高质量搭建后台系统 系列 请求数据 后续要做登录模块（主页），需要先和后端约定JSON数据格式，将 axios 进行封装，实现本地的数据模拟 mockjs。 Tip：spug 中后端返回 json 通常有 data 和 error两个 key。就像这样：...[2023/1/6]

目录总览映射提取 总览 在React中，当我们为元素的style 属性传递字符串时，会产生"Style prop value must be an object"警告。为了解决该警告，使用从属性到值的映射。比如说，style={{paddingLeft: '15p...[2022/12/5]

需求：vue3中setup组合式api中如何定义响应式数据并且修改赋值呢？ 1、字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等 <script setup> import { ref } from ''vue''...[2022/12/5]

目录总览useNavigateJestreplace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时，会产生"useNavigate() may be used only in the context of a Router...[2022/12/5]

目录高阶组件（HOC）概述使用HOC解决横切关注点问题不用改变原始组件使用组合约定-将不相关的 props 传递给被包裹的组件约定-最大化可组合性约定-包装显示名称以便轻松调试使用高阶组件的注意事项 高阶组件（HOC） 概述 是React复用组件逻辑的一种高级技巧，是一种基于React组合特...[2022/12/5]

目录总览备用值useStatedefaultValue 总览 当input的值被初始化为undefined，但后来又变更为一个不同的值时，会产生"A component is changing an uncontrolled input to be controlled"...[2022/12/5]

目录前言状态下移内容提升 前言 本专栏的另一篇文章，讲到了 useMemo 有一定的开销，不能滥用，本篇文章讲解两个简单实用的优化组件渲染性能的方法： 状态下移内容提升 在讲解这两种方法之前，我们需要先手动创建一个有严重渲染性能的组件，如下所示： import { useState }...[2022/11/28]

目录setState异步更新那么为什么setState设计为异步呢？如何获取异步的结果setState一定是异步的吗？ setState异步更新 开发中当组件中的状态发生了变化，页面并不会重新渲染。我们必须要通过setState来告知React数据已经发生了变化，重新渲染页面。 先来看下面的...[2022/11/19]

目录前言什么是Concurrent React？设置项目实现 useTransition()isPending 是做什么的？ 前言 React 18 引入了一个关键的新概念，称为“Concurrent”。 并发涉及同时执行多个状态更新，这可以说是 React 18 中...[2022/9/15]

目录一、基本使用二、路由跳转2.1 Link 组件2.2 NavLink 组件2.3 编程式跳转三、动态路由参数3.1 路径参数路径匹配规则兼容类组件3.2 search 参数四、嵌套路由5.1 路由定义5.2 在父组件中展示5.3 在组件中定义五、默认路由六、全匹配路由七、多组路由八、路由重定向九...[2022/9/15]

目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例：计数器 背景 在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库 如果将两者连接在一起，可以使用官方...[2022/9/15]

本文实例为大家分享了React封装弹出框组件的方法，供大家参考，具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React from "react"; export const HAlertList = ...[2022/8/23]

本例基于react实现了一个简单的确认弹窗，可以让我们在项目中根据需要随时调用 创建全局modal组件 此处我将弹窗模态框独立出来，用户可以通过传入组件或Element来填充模态框的内容。 import ReactDOM from ''react-dom''; import React...[2022/8/23]