react

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

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

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

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

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

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

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

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

前言 我研究 Solid.js 源码已经有一段时间了，在钻研的过程中我发现了其中的一些迷惑行为，在搞懂之后终于恍然大悟，忍不住想要分享给大家。不过这么说其实也不太准确，因为在严格意义上来讲 Solid...

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

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

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

大家好，我卡颂。 虽然主流前端框架都遵循： 状态驱动视图 单向数据流 理论上并不存在某一框架可以实现，其他框架无法实现的特性。 但是，确实存在某些框架（比如Vue、Qwik）可以，但React无法解决...

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

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

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

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

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

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

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

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

在开始今天的文章之前，大家不妨先想一下触发 React 组件 re-render 的原因有哪些，或者说什么时候 React 组件会发生 re-render 。,先说结论：,这里有个误解：props 变...

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

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

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

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

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

,大家好，我卡颂。,很多项目的源码非常复杂，让人望而却步。但在打退堂鼓前，我们应该思考一个问题：源码为什么复杂？,造成源码复杂的原因不外乎有三个：,如果是原因3，那实际理解起来其实并不难。我们需要的只...

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

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

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

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

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

,大家好，我卡颂。,你有没有发现，每过几年，「低代码」的概念就会被翻出来热炒一番。,这也难怪，软件行业最大的成本就是人力成本（程序员的工资），「低代码」号称能够：,一个只有程序员受伤，还能降本增效的世...

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

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

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

之前在项目开发中经常会遇到需要开发各种各样加载动画的需求, 我们可以使用已有的动画库手动改造实现(比如说基于 loaders.css 手动改造), 也可以自己独立设计, 但是这意味着需要花一定的时间调...

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

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

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

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

写 react 项目的小伙伴应该都用过 antd 组件库，但绝大多数同学并没有看过它的源码。,而想深入掌握 antd 组件库，只熟悉参数是不行的，必须要深入到源码层面。,所以今天就来分享下如何调试 a...

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

,大家好，我卡颂。,一些同学喜欢在useEffect中请求初始数据，类似这样：,但​​React18​​并不推荐这种方式。,这么写有什么问题？如果不推荐这种方式，那么推荐的方式是什么呢？,本文来看看​...

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

大家好，我卡颂。,React18进入大家视野已经有一段时间了，不知道各位有没有尝试「并发特性」呢？,当启用「并发特性」后，React会从「同步更新」变为「异步、带优先级、可中断的更新」。,这也为编写单...

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

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

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

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

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

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

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

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

我已经使用 React 多年，我确信我非常了解它，但最近我的老板对我说，“你根本不知道 React，你对它一无所知。”,我很生他的气，但他指出了我程序中的三个漏洞。我现在把它记录下来，也分享给还不知道...

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

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

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

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

不知大家有没有听过Preact​这个框架，就算没听过Preact​那也应该听过React吧？,一字之差，preact比react​多了个p！（听起来咋不像啥好话呢）,这个P代表的是 Performan...

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

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

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

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

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

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

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

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

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

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

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

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

,React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑，但是这仍然不能阻碍我们写出一些安全漏洞 。。。因为框架永远不能完全限制我们编程的灵活性，只要有一定的灵活性存在就意味...

在看似无穷无尽的JavaScript前端框架和库中，有一个库（可以说）占据了至高无上的地位，那个库就是React。但是为什么React年复一年地如此受欢迎呢？在我们深入研究使它如此受欢迎的React原...

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

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

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

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

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

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

尤大大从下面的三个前端领域的不同层次来展开了介绍：,正式分享之前，尤大大提出声明：“本分享只代表讲着个人观点，因为自己是框架和构建工具的作者，肯定会包含利益相关和个人的偏见，但是分享中会尽可能做客观的...

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

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

,一些刚开始学习 React，或者从其他框架转入 React 的开发者，一开始可能不会太关注性能。因为需要一些时间来发现新学习的框架的性能缺点。,后来，由于缺乏经验，这些开发人员在编写代码时会犯一些小...

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