标签:react

你需要知道的 19 个 Console 实用调试技巧!

大家好,我是 CUGGZ。 浏览器的开发者工具为我们提供了强大的调试系统,可以用来查看DOM树结构、CSS样式调试、动画调试、JavaScript代码断点调试等。今天我...

React-Router6:从入门到实战最佳指南

大家好,我是CoderBin。前段时间学了 react-router5 后才知道出了6,经典白学...,所以,本文将总结 react-router6 的常用操作,以理论+代码+注释的形式教同学...

关于React的这些常用技巧,你应该知道

大家好,我是 CoderBin,本文总结了React中的一些常用技巧,相信看完本文的小伙伴都能从中有所收获。,创作不易,你们的点赞收藏留言就是我最大的动力,如果文...

Redux+React-Redux 最新入门实战指南?

大家好,我是CoderBin,本文将给大家带来redux和react-redux的快速使用,以理论+代码+案例的形式教大家如何在react中去使用状态管理,以实现数据的高效通信,如...

快速体验React开发基础入门指南

大家好,我是 CoderBin,本次整理了我学习react过程中的各部分的知识点,看完文本你将会学到,如果文中有不对、疑惑的地方,欢迎在评论区留言指正,想深入学习...

React API 和代码重用的演变!

本文将探究 React API 的演变及其背后的心智模型。从 mixins 到 hooks,再到 RSCs,了解整个过程中的权衡。我们将对 React 的过去、现在和未来有一个更清晰的...

我们一起聊聊 React 发布十周年!

2013 年 5 月 29 日,React 正式开源,至今已过去了十年!自发布以来,React 已经成为前端开发领域中最受欢迎的技术之一,其生态系统越来越丰富,Github 累计...

Form 元素是 React 的未来

大家好,我卡颂。 请思考一个问题:如果有一个HTML标签,React围绕他专门出了2个hook,那这个标签对React未来的发展一定非常重要,这没毛病吧? 这个标签就...

盘点 Solid.js 源码中的那些迷惑行为

前言 我研究 Solid.js 源码已经有一段时间了,在钻研的过程中我发现了其中的一些迷惑行为,在搞懂之后终于恍然大悟,忍不住想要分享给大家。不过...

六种在 React 中获取数据的方法

数据获取是任何 React 应用程序的核心方面。对于 React 开发人员来说,了解不同的数据获取方法以及哪些用例最适合他们很重要。 但首先,让我们了解 JavaSc...

​不数不知道,React已经有22个Hook了

大家好,我卡颂。 5月30日刚好是React10周年纪念日。 我顺手拉了下React最新代码,这一看不要紧,居然已经有22个hook了。 其中: react包导出了21个...

结合使用React和其他技术的七种方法

点击参加51CTO网站内容调查问卷 译者 | 布加迪 审校 | 重楼 React是一种知名的JavaScript库,可以用它来为用途广泛的Web应用程序开发UI。React有很强的适...

现有React架构无法解决的问题

大家好,我卡颂。 虽然主流前端框架都遵循: 状态驱动视图 单向数据流 理论上并不存在某一框架可以实现,其他框架无法实现的特性。 但是,确实存...

5步创建一个具有Serverless用户身份验证的React项目

【51CTO.com快译】许多基于Web的项目最终必须考虑的一个常见问题是如何处理用户身份验证。我们都熟悉网站登录页面后隐藏与用户相关的数据和流程;用户如果拥...

如何在 React 中使用 Vite 构建工具?

 Vite使用 esbuild 预构建依赖。由于esbuild是一个用Go编写的JavaScript(和TypeScript)绑定器,这也是它快速的原因之一。 ​​ 通常,当用React构建一个...

为什么React一年不发新版了?

,大家好,我卡颂。,遥想前几年,不管是React还是Vue,都在快速迭代版本,以至于很多同学抱怨「学不动了」。,而现在,React已经一年没更新稳定release了。,,上...

不清楚React Hooks的类型声明?来看就对了

在了解react hooks的类型之前,有必要先了解一下@types、.d.ts文件的概念及作用。,当我们使用第三方npm包的时候,如果这个包不是ts编写,则没有导出类型,这...

2023 年八个优秀 React UI 组件库和框架

,首先,我们有React Bootstrap。这是较旧的 React UI 库之一,这意味着您为 UI 设计奠定了良好的基础。,此示例将创建一系列的样式按钮:,,总的来说,React Bo...

React Server Component 从理念到原理

,大家好,我卡颂。,React Server Component(后文简称RSC)是React近几年最重要的特性。虽然他对React未来发展至关重要,但由于:,所以虽然体验Demo[1]已经发...

如何优雅的使用 React Context

在开始今天的文章之前,大家不妨先想一下触发 React 组件 re-render 的原因有哪些,或者说什么时候 React 组件会发生 re...

前端没了?也许是刚开始

前段时间社区上大肆讨论「前端已死」,各种唱衰前端的言论此起彼伏,真是闻者落泪,听者伤心。,最近又听说某大厂取消大前端部门,前端被拆分到各个业务组。很...

高中生打破React性能极限,将React性能提升70%!

React 是当今最受欢迎的 JavaScript 框架之一,它的创新之一就是引入了虚拟 DOM,但很多现代框架已经不再采用这种方案,其在某些情况下会影响应用的性能。Sve...

React Native 0.72 正式发布!

,6 月 21 日,React Native 0.72 正式发布!版本增加了 Metro 强烈要求的功能,改进了错误处理和其他开发者体验方面的改进。其中很多工作都是根据 2022 ...

React 的七大值得推荐的动画库,你用过几个?

今天,Web 应用程序用户界面有许多吸引用户的元素,为了满足这些需求,开发人员不得不寻找新的方法来实现带有动画和过渡的 UI,因此,开发了专门的库和工具来...

几天不写React,已经看不懂语法了

,大家好,我卡颂。,下面这个React组件代码,用到3个use关键词,你理解他们的作用吗?,真是几天不写React,语法都看不懂了。本文就来聊聊这几个use关键词各自...

React Context的核心实现,就五行代码

,大家好,我卡颂。,很多项目的源码非常复杂,让人望而却步。但在打退堂鼓前,我们应该思考一个问题:源码为什么复杂?,造成源码复杂的原因不外乎有三个:,如...

2023年提升您React项目的五个库

https://github.com/TanStack/query,图3,简而言之,React Query 可以使在 React 中获取数据体验更好。其是一个处理异步服务器状态的状态管理库,通过提供了一...

如何方便的检测React项目的性能?

,大家好,我卡颂。,对于长期迭代的React项目,性能是不能忽视的问题。通常我们通过:,检测运行时性能瓶颈。,实际上,React本身就内置了性能检测组件 —— ...

老板说,给我把这个 JS React 项目迁移到 TypeScript

Hi,我是 ssh,在我做前端的过程中,TypeScript + React 迅速的风靡起来,新项目越来越多的默认启用 TypeScript 做类型保护,它的各种好处对于长期维护的项目...

八个好用的React UI组件库

库可以帮助我们快速启动我们的应用程序,使用 UI 库可以节省时间、精力并为我们的应用程序带来一些统一性。,在本文中,我将与您分享可以在应用程序中使用的顶...

“整洁架构” 和商家前端的重构之路

,团队归属于后方业务支撑部门,组内的项目都以 pc 中后台应用为主。对比移动端应用,代码库比较庞大,业务逻辑也相对复杂。在持续的迭代过程中,我们发现当前...

如何优雅地覆盖组件库样式?

大家好,我是年年!组件库的样式覆盖不掉,这应该是很多前端在工作中遇到过的问题。今天从实际案例出发分析原因,最后会给出在React和Vue项目中的最优解。,本...

20个GitHub仓库助你成为React大师

大家好,我是 CUGGZ,明天就是端午节啦,提前祝大家端午节快乐鸭!,今天来分享20个很棒的 React 仓库,助你成为 React 大师!,关于 React 生态系统的一系列很...

React:搞了半天,我才是低代码的最佳形态

,大家好,我卡颂。,你有没有发现,每过几年,「低代码」的概念就会被翻出来热炒一番。,这也难怪,软件行业最大的成本就是人力成本(程序员的工资),「低代码...

优雅的 React 源码调试方式

什么?调试 React 源码还有优雅和不优雅之分?,别着急,我们先来听个故事:,东东是一名前端工程师,主要用 React 技术栈,用了多年之后想深入一下,所以最近...

为什么Hook没有ErrorBoundary?

大家好,我卡颂。,在很多全面使用Hooks开发的团队,唯一使用ClassComponent的场景就是「使用ClassComponent创建ErrorBoundary」。,可以说,如果Hooks存在如下...

Hooks时代,如何写出高质量的react和vue组件?

,vue和react都已经全面进入了hooks时代(在vue中也称为组合式api,为了方便后面统一称为hooks),然而受到以前react中类组件和vue2写法的影响,很多开发者都...

推荐!从零开发一套基于React的加载动画库

之前在项目开发中经常会遇到需要开发各种各样加载动画的需求, 我们可以使用已有的动画库手动改造实现(比如说基于 loaders.css 手动改造), 也可以自...

React:我们即将和后端 API 告别?

2020 年底,React 公布了一个全新的特性:Server Components,当时它还处于调研和试验阶段,并没有正式发布,随着 React 18.0 版本的正式发布,Server Compon...

2022 年您应该知道的十个强大的 React 工具

​React是一个非常强大和流行的开源JavaScript库,现在大多数Web开发人员都在使用它。它具有许多有用的功能,可以更轻松地创建快速且更易于访问的现代网站和We...

实现React过程中一次有趣的问题排查经历

,大家好,我卡颂。,逞着对React内部运行流程还记得住,业余时间尝试复刻一个React —— big-react[1]。,即然是复刻一个React,那肯定得跑通部分官方...

如何在React导航栏实现搜索功能

作者丨Hrushi M, 译者 | 涂承烨, 本文向你展示如何在React导航栏中实现搜索功能,具体包括如何配置搜索输入,监听用户数据输入回调,以及如何设置它的样式...

为什么说 90% 的前端不会调试 Ant Design 源码?

写 react 项目的小伙伴应该都用过 antd 组件库,但绝大多数同学并没有看过它的源码。,而想深入掌握 antd 组件库,只熟悉参数是不行的,必须要深入到源码层面...

重学React:一个案例通关React核心知识点

,,小羊们好,本文希望用一个经典案例TodoMVC带大家掌握React中最核心的知识点。,我们将学到如下核心知识点:,官方推荐的SPA应用创建工具链是create-react-app...

官方答:在React18中请求数据的正确姿势(其他框架也适用)

,大家好,我卡颂。,一些同学喜欢在useEffect中请求初始数据,类似这样:,但​​React18​​并不推荐这种方式。,这么写有什么问题?如果不推荐这种方式,那么推荐...

为什么useEffect不适合进行API调用

作者丨Rojan Maharjan, 译者 | 涂承烨, React团队在useEffect钩子中做出的设计选择仍然是一个热议的话题。有些人喜欢,有些人不喜欢。, 如果你不是来自Rea...

React团队是如何测试并发特性的

大家好,我卡颂。,React18进入大家视野已经有一段时间了,不知道各位有没有尝试「并发特性」呢?,当启用「并发特性」后,React会从「同步更新」变为「异步、...

「React 进阶」react-router v6 通关指南

,,不知不觉 react-router 已经到了 v6 版本了,可能很多同学发现,v6相比之前的 v5 有着翻天覆地的变化,因为最近接触到了 React 的新项目,用到了 v6 版本的...

2023 年八大 Web 开发趋势预测!

大家好,我是 CUGGZ。开工第一天,祝大家开工大吉,事业新启,前兔无量!,本文将分享通过 State of JS 2022 调查结果 总结的 2023 年 8 大 Web 发...

React开发者们的Solid.js快速入门教程

,在 2021 年的 JavaScript 调查问卷中,黑马 Solid.js 一骑当先登上榜首,在用户满意度的评分上连超两大竞争对手,React 和 Svelte。虽然 React 仍有着不错的...

React 中的列表渲染为什么要加Key

,大家好,我是前端西瓜哥,今天来学习 React 中的列表渲染要加 key 的原因。,在 React 中我们经常需要渲染列表,比如展示好友列表。,常用写法是用 Arrary.pro...

从源码理解 React Hook 是如何工作的

,大家好,我是前端西瓜哥。,今天我们从源码来理解 React Hook 是如何工作的。,React Hook 是 React 16.8 后新加入的黑魔法,让我们可以 在函数组件内保...

React和Next.js已死,真的要被取代了?

作者丨Somnath Singh, 译者 | 胥磊, 这是不是JavaScript框架的下一次革命的开始?显而易见,是的!, 通常的Web开发中存在一对不可调和的矛盾,即一方面需...

使用 Next.js 12 和 Cosmic 构建一个可以上线的餐厅网站

译者 | 吴河东,审校 | 孙淑娟 梁策,​​Next.js​​ - 用于生产的 React 框架,可以轻松地启动全栈应用程序。,​​Cosmic​​ - 无头部 CMS工具,它实现了数据(内容)...

2022 年,React 团队在做什么?

上个月中,React 团队发了一篇文章 React Labs: What We've Been Working On – June 2022 讲了一下最近他们在做的事情,社区没有看到中文翻译,这里简单解读...

我老板:你根本不懂 React!

我已经使用 React 多年,我确信我非常了解它,但最近我的老板对我说,“你根本不知道 React,你对它一无所知。”,我很生他的气,但他指出了我程序中的三个漏洞...

React团队回应使用Vite替换Create React App的建议

大家好,我是 CUGGZ。,最近,网友 t3dotgg 建议把 React 官方文档中关于建议使用 Create React App 来创建新项目更换为建议使用 Vite 来创建新项目...

React 16 升级到 17 的一个坑:组件销毁时 Ref 可能会被重置为Null

大家好,我是前端西瓜哥。,最近公司的项目用的 React 从 16 升到了 17 版本,选择升级的原因是想以后将项目迁移到 Nextjs 上。,结果发现因为 React 的行为不...

如何在 React 中正确的使用 socket.io 客户端?

最近在一个 React 项目中,使用到了 socket.io 处理即时消息,这里面有几点容易被忽视的问题,例如:在 React 单页面应用中如何防止出现多个 socket 实例、在...

2022年值得使用的 Node.js 框架

Node.js 是最受欢迎的 JavaScript 运行时,今天就来看看有哪些热门、值得使用的Node.js 框架。,Next.js 是一个用于生产环境的 React 应用框架,使用它可以快...

信仰崩了?Preact 开始采用 Vue3 的响应式设计

不知大家有没有听过Preact​这个框架,就算没听过Preact​那也应该听过React吧?,一字之差,preact比react​多了个p!(听起来咋不像啥好话呢),这个P代表的是&n...

React Server Components:我们即将和 API 告别?

2020 年底,React 公布了一个全新的特性:Server Components,当时它还处于调研和试验阶段,并没有正式发布,随着 React 18.0 版本的正式发布,Server Compon...

每天都在用,也没整明白的 React Hook

,useState 可以说是我们日常最常用的 hook 之一了,在实际使用过程中,有一些简单的小技巧能帮助你提升性能 & 减少出 bug 的概率。,通常我们会使用...

React 的调度系统 Scheduler

,React 使用了全新的 Fiber 架构,将原本需要一次性递归找出所有的改变,并一次性更新真实 DOM 的流程,改成通过时间分片,先分成一个个小的异步任务在空闲时...

调试工具的通用原理:调试四要素

作为前端开发,调试是每天都会接触的概念。你觉得什么是调试呢?,有同学说,我用 Chrome DevTools 调试网页,可以查看元素,网络请求,断点运行 JS,用 Perfo...

从UseEffect看React、Vue设计理念的不同

,大家好,我卡颂。,我们知道,React发布Hooks后,带来了业界一波Hooks热。很多框架(比如Vue Composition API、Solid.js)都借鉴了Hooks的模式。,但是,即使...

前端新宠 Svelte 带来哪些新思想?赶紧学起来!

,Svelte[1] 是我用过最爽的框架,就算 Vue 和 React 再强大,生态再好,我还是更喜欢 Svelte,因为它开发起来真的很爽。,其实在很久之前我就注意到 Svelte[2]...

如何使用React创建QR code生成器

​译者 | 赵青窕,审校 | 孙淑娟,创建二维码生成器(Quick Response Code Generator)就是将图像格式转换为文本格式进行转换。二维码(QR code)是利用图像数据来代...

React新文档:不要滥用Ref哦!

大家好,我卡颂。,React新文档有个很有意思的细节:useRef、useEffect这两个API的介绍,在文档中所在的章节叫Escape Hatches(逃生舱)。,显然,正常航行时是...

简单好用的前端拖拽排序库

,大家好,我是 CUGGZ。,今天来推荐 8 个简单又好用的前端拖拽排序库!,react-beautiful-dnd 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然,性能...

React:不要动,否则你会被炒鱿鱼

,大家好,我卡颂。,不知道大家在用React开发时,有没有注意到react与react-dom这两个包中有个很奇葩的属性__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIR...

React 渲染的未来,你想知道吗?

,大家好,我是 CUGGZ。,在过去的几年中,React 的流行度一直在增加,而且还在加速。React 每周的 npm 下载量超过 1400 万次 ,React Devtools Chro...

前端开发中的流程自动化与提效实践

随着前端的发展,越来越多的工具库、方法被用在日常研发流程中,这大大提升了业务开发的效率,而随着各类自动化流程的建设,开发同学也不再需要关注到每一个...

超详细的 React 组件设计过程 – 仿抖音订单组件

作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心。,组件就是对一些具有相同业务场景和交互模式...

理解 React 的调和器 Reconciler

,大家好,我是前端西瓜哥。今天来学习 React 中的调和器 Reconciler。,ReactElement 就是 React.createElement() 方法的返回结果,一种 映射真实 DOM 层...

实现一个自定义 React Hook:UseLocalStorageState

大家好,我是前端西瓜哥。,最近做需求,需要将数据保存到 localStorage 里,在组件初始化的时候获取,然后修改该值的时候,要保存到本地的 localStorage 中。...

开发者如何为React Native选择合适的数据库

,译者 | 陈峻,策划 | 云昭,如今,程序员们可以选用多种编程语言,来创建在线平台、网站和应用程序。其中,在编程社区中,广受不同开发背景的人员所推崇的一种...

五个优秀JavaScript Web 开发框架

​在本文中,我们将讨论5个最好的 JavaScript web 开发框架。,,JavaScript 框架是用于执行所需任务的几个 JavaScript 库的预先编写的集合。,JavaScript 框架和...

一篇带你理解 React 的 Commit 阶段

,大家好,我是前端西瓜哥。今天我们来详细讲解一下 React 的 commit 阶段的逻辑。,commitRootImpl 中的三个函数的调用分别对应这个三个阶段:,在 reconcil (...

重学React:应用规模化之状态管理

,小羊们好!我们通过TodoMVC的例子掌握了React的很多核心知识点,搞一个小应用不成问题,但是,但凡上点规模的应用都会需要状态管理和路由。所以,我们将继续...

React 最新的路由库,玩出了什么花样?

,大家好,我是 ssh。,React Router 是 React 生态系统中最受欢迎的第三方库之一,近一半的 React 项目中使用了 React Router。,React Router 创建于 2014 年...

Jest:给你的 React 项目加上单元测试

,大家好,我是前端西瓜哥。,Jest 是一款轻量的 JavaScript 测试框架,它的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进...

图解 React 的 Diff 算法:核心就两个字 — 复用

,React 是基于 vdom 的前端框架,组件 render 产生 vdom,然后渲染器把 vdom 渲染出来。,state 更新的时候,组件会重新 render,产生新的 vdom,在浏览器平台...

在 React 中实现条件渲染的七种方法

先从 React 最基本的条件类型来看。如果有数据就显示组件,如果没有数据就不显示任何内容。posts 为需要渲染的列表:,这种形式会生效的原因就是我们会提前返...

React和Vue谁会淘汰谁

,大家好,我卡颂。,在我的技术群里大家经常会聊一些宏观的技术问题,就比如:,这样的讨论,到最后往往会陷入技术的细枝末节的比较,比如:,很多程序员朋友,...

React Router v6 完全指南

大家好,我是 CUGGZ。,React Router 是 React 生态系统中最受欢迎的第三方库之一,近一半的 React 项目中使用了 React Router,下面就来看看如何在 React 项...

《彻底掌握Redux》之开发一个任务管理平台

,redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信...

React 的一些优秀安全实践

,React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑,但是这仍然不能阻碍我们写出一些安全漏洞 。。。因为框架永远不能完全限制我们...

React如此受欢迎离不开这4个主要原则

在看似无穷无尽的JavaScript前端框架和库中,有一个库(可以说)占据了至高无上的地位,那个库就是React。但是为什么React年复一年地如此受欢迎呢?在我们深...

React新文档:不要滥用Effect哦

大家好,我卡颂。,你或你的同事在使用​​useEffect​​时有没有发生过以下场景:,当你希望​​状态a​​​变化后「发起请求」,于是你使用了​​useEffect​​:,这段代码...

React 并发渲染的前世今生

2161 天!,这是 React 团队从计划为 React 增加 并发渲染 的能力,到 React 18 可用版本发布所花费的时间。,为啥中间花费了这么长的时间?中间又发生了哪些有...

Vue 和 React 有什么不同?

,大家好,我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。,本人 Vue2 和 React 都用过,但不熟悉 Vue3,没用它做过项目。,其实我对这两大框架...

使用 TypeScript 编写 React 的优秀实践!

大家好,我是 CUGGZ。,在单独使用 TypeScript 时没有太多坑,不过和 React 结合之后就会复杂很多。下面就来看一看如何在 React 项目中优雅的使用 TypeScript...

从源码层面理解 React 是如何做 Diff 的

,大家好,我是前端西瓜哥。今天带带大家来分析React源码,理解单节点 diff 和多节点 diff 的具体实现。,React 的节点对比逻辑是在 reconcileChildFibers 方法...

Astro简介:智能的JavaScript延迟加载

​译者 | 李睿,审校 | 孙淑娟,Astro是当前JavaScript热潮中的一种新方法:从响应式前端获得更多性能。它是由创建Snowpack构建工具的同一团队开发的。,已...

尤雨溪解读 2022 Web 前端生态趋势

尤大大从下面的三个前端领域的不同层次来展开了介绍:,正式分享之前,尤大大提出声明:“本分享只代表讲着个人观点,因为自己是框架和构建工具的作者,肯定会...

React为什么不将Vite作为默认推荐?

,大家好,我卡颂。,在React文档中,对于构建新的React应用,首推的方式是CRA(create-react-app)。,CRA推出于2016年,彼时还没有成体系的React脚手架工具供...

如何在 React 中快速实现暗黑模式

暗黑模式已成为许多应用程序和网站的最基本功能,因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能,使用 ReactJS 和 Chakra UI...

七大提高React 性能的技巧

,一些刚开始学习 React,或者从其他框架转入 React 的开发者,一开始可能不会太关注性能。因为需要一些时间来发现新学习的框架的性能缺点。,后来,由于缺乏经...

为什么说 90% 的情况下,immer 能完胜 immutable?

假设 React 组件有这样一个状态:,我们这样修改了它的状态:,你觉得组件会重新渲染么?,我们先在 class 组件里试一下:,渲染 state.a.b 的值,两秒以后修改 s...
12