经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 React

vue和react的相同点和不同点

Vue和React作为现代前端开发中流行的两个JavaScript框架,它们有诸多相似之处,同时也存在一些关键性的不同。以下是Vue和React的一些主要相同点和不同点: 相同点: 虚拟DOM:Vue和React都使用虚拟DOM(Virtual DOM)来提高性能,减少直接操作真实DOM的频率...[2024/5/13]

React组件封装:文字、表情评论框

1.需求描述 根据项目需求,采用Antd组件库需要封装一个评论框,具有以下功能: 支持文字输入 支持常用表情包选择 支持发布评论 支持自定义表情包 2.封装代码  ./InputComment.tsx 1 import React, { useState, useRe...[2024/3/29]

React Hooks 钩子特性

React Hooks 钩子特性

人在身处逆境时,适应环境的能力实在惊人。人可以忍受不幸,也可以战胜不幸,因为人有着惊人的潜力,只要立志发挥它,就一定能渡过难关。 Hooks 是 React 16.8 的新增特性。它可以让你在不编写 cla 组件的情况下使用 state 以及其他的 React 特性。 React Ho...[2023/12/13]

JSX 代码是如何“摇身一变”成为 DOM 的?

JSX 是一种语法,并不是 React 中的内容,时下接入 JSX 语法的框架越来越多,但与之缘分最深的仍然是 React。本节来讲一下 React 是如何摇身一变成为 DOM 的。 我们平时在写React时会用 JSX 来描述组件的内容,例如下面的代码中,render 方法 return 的...[2023/12/5]

Taro:高性能小程序的最佳实践

前言 作为一个开放式的跨端跨框架解决方案,Taro 在大量的小程序和 H5 应用中得到了广泛应用。我们经常收到开发者的反馈,例如“渲染速度较慢”、“滑动不够流畅”、“性能与原生应用相比有差距” 等。这表明性能问题一直是困扰开发者的一个重要问题。 熟悉 Taro 的开发者应该知道,相比于 Tar...[2023/11/29]

Netty源码学习4——服务端是处理新连接的&netty的reactor模式

系列文章目录和关于我 零丶引入 在前面的源码学习中,梳理了服务端的启动,以及NioEventLoop事件循环的工作流程,并了解了Netty处理网络io重要的Channel ,ChannelHandler,ChannelPipeline。 这一篇将学习服务端是如何构建新的连接。 一丶网络包接收...[2023/11/20]

为React Ant-Design Table增加字段设置

为React Ant-Design Table增加字段设置

最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。 在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:@silverage/table-custom,将这些差别都集成了进去...[2023/11/17]

React技术栈支援Vue项目,你需要提前了解的

写在前面 react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom react的思路通过js来生成html, 所以设计了jsx,还有通过j...[2023/10/25]

关于 React 性能优化和数栈产品中的实践

关于 React 性能优化和数栈产品中的实践

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:的卢 引入 在日常开发过程中,我们会使用很多性能优化的 API,比如像使用 memo、useMemo优化组件或者值,再比如使用 shouldC...[2023/10/25]

【Vue3响应式入门#01】Reactivity

专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核??推荐?? 欢迎各位ITer关注点赞收藏?????? 背景 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节,课程链接在此:Vue 3 Reactivity - Vue 3 Re...[2023/10/19]

React跨路由组件动画

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:佳岚 回顾传统React动画 对于普通的 React 动画,我们大多使用官方推荐的 react-transition-group,其提供了四个...[2023/10/11]

Vue vs React:你需要知道的一切

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

推荐一个react上拉加载更多插件:react-infinite-scroller

推荐一个react上拉加载更多插件:react-infinite-scroller

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

React Native实现Toast轻提示和loading - Lanny-Chung

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

为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

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

react18 hooks自定义移动端Popup弹窗组件RcPop

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

React组件设计之性能优化篇

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

如何编写难以维护的React代码?——滥用useEffect

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

React中编写操作树形数据的自定义Hook

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

React ISR 如何实现 - 最后的 Demo

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

深入解析React DnD拖拽原理,轻松掌握拖放技巧!

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

react中useRef的应用

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

基于.NetCore+React单点登录系统

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

APP中RN页面渲染流程-ReactNative源码分析

APP中RN页面渲染流程-ReactNative源码分析

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

APP中RN页面热更新流程-ReactNative源码分析

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

ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!

ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!

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

理解 React 中的 useEffect、useMemo 与 useCallback

理解 React 中的 useEffect、useMemo 与 useCallback

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

源码分析Vue3响应式核心之reactive

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

vue3.0 Reactive数据更新页面没有刷新的问题

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

React中immutable的UI组件渲染性能详解

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

简单谈谈Vue3中的ref和reactive

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

react中context传值和生命周期详解

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

react跳转后路由变了页面没刷新的解决

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

vue3使用reactive包裹数组正确赋值问题

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

React优雅的封装SvgIcon组件示例

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

react 高效高质量搭建后台系统 系列 —— 前端权限

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

react中axios结合后端实现GET和POST请求方式

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

react 高效高质量搭建后台系统 系列 —— 表格的封装

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

react 高效高质量搭建后台系统 系列 —— 系统布局

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

React使用高阶组件与Hooks实现权限拦截教程详细分析

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

如何实现在react现有项目中嵌入Blazor?

如何实现在react现有项目中嵌入Blazor?

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

vue3源码分析reactivity实现原理

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

Vue3源码分析reactivity实现方法示例

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

React18系列commit从0实现源码解析

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

react的ui库antd中form表单使用SelectTree反显问题及解决

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

基于React.js实现简单的文字跑马灯效果

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

React Fiber原理深入分析

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

react 高效高质量搭建后台系统 系列 —— 请求数据

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

解决React报错Style prop value must be an object

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

295
2
记录数:145 页数:1/3123下一页尾页
 友情链接:直通硅谷  直通硅谷 怎么样 mac软件下载
加载更多