react

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

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

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

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

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

大家好，我是 CUGGZ。,最初，在 React 中可以使用 createClass 来创建组件，后来被类组件所取代。在 React 16.8 版本中，新增的 Hooks 功能彻底改变了我们编写 Re...

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

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

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

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

React 是用于构建用户界面的JavaScript库，其核心是让开发者能够使用函数组件创建组件驱动的用户界面。它带有一些内置解决方案，例如，用于本地状态、副作用和优化性能的 React Hooks...

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

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

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

作者丨Michael Pautov, 译者 | 翟珂, 审校丨Noe, 谈到前端开发，ReactJS是目前最受欢迎的选择之一。下面列出的是最常问到的ReactJS面试题。, 从易到难，让我们看一下五...

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

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

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

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

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

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

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

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

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

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

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

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

React 是前端开发每天都用的前端框架，自然要深入掌握它的原理。我用 React 也挺久了，这篇文章就来总结一下我对 react 原理的理解。,react 和 vue 都是基于 vdom 的前端框架...

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

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

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

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

随着对用户体验要求的提高，产品要求提升用户体验，多端体验一致。随着多端相同的业务也越来越多，需要投入IOS，Android，Web多端开发人员。这就迫切的需要一种一次开发同时使用在Android ，I...

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

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

作者 | 胥磊,审校 | 孙淑娟,随着移动应用的不断普及，各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案，这里跨平台主要是指安卓和iOS。统计数据显示：截止2021年6月，安卓以接近73%的...

这篇文章将深入探讨最初吸引我使用CSS-in-JS以及后来又决定放弃的原因。如果你对CSS-in-JS背后的逻辑感兴趣，建议耐心看完本文。,顾名思义，CSS-in-JS允许你通过在JavaScript...

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

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

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

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

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

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

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

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

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

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

公司发展到一定程度，随着业务分支不断变多，B端C端的项目也随之增多，由于历史原因可能产生新老技术栈（vue/react）共存的情况，这既不利于组件物料的抽离统一(一类通用组件需适配多套技术栈)，也增大...

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

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

,大家好，我卡颂。,React技术栈的一大优势在于 —— 社区繁荣，你业务中需要实现的功能基本都能找到对应的开源库。,但繁荣也有不好的一面 —— 要实现同样的功能，有太多选择，到底选哪个？,本文要介绍...

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

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

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

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

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

之前写了一篇文章《React Hooks 使用误区，驳官方文档[1]》，文中抛出了两个观点：,这两个观点引起了剧烈的讨论，当然大多数人还是持反对意见的，甚至质疑我不会用 Hooks，(⊙o⊙)… 我想...

本文来探索一下 ahooks 是怎么解决 React 的闭包问题的？,先来看一个例子：,代码示例[4],当我点击按钮的时候，发现 setInterval 中打印出来的值并没有发生变化，始终都是 0。这...

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

,大家好，我是前端西瓜哥。今天带大家来学习如何做 React 性能优化。,一个组件可以通过 React.memo 方法得到一个添加了缓存功能的新组件。,再次渲染时，如果 props 没有发生改变，就跳...

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

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

,本文是由 Emotion 的第二大活跃维护者 Sam 分享，本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库，用于React。文章 Sam 会带大家深入探讨 C...

作者 | 徐杰承,审校 | 云昭,提到前端界的三大主流框架，相信每位前端开发者都能够脱口而出：React、Vue、Angular。在过去的两年中，React和Vue在圈内的热度可以说是节节攀升，“究竟...

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

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

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

,大家好，我卡颂。,前几天写的一篇介绍use这个新hook的文章中聊到React原生实现了一个缓存函数的方法 —— cache。,对于如下代码，被cache包裹的函数，当多次调用时，如果传参不变，会始...

,React Hook 已成为当前最流行的开发范式，React 16.8 以后基于 Hook 开发极大简化开发者效率，同时不正确的使用 React Hook也带来了很多的性能问题，本文梳理基于 Rea...

大家好，我卡颂。,不知道大家有没有一个感觉：React新特性的更新速度非常慢，时间通常是以年计。,实际上，在React漫长的发展过程中，除了很多优秀的特性（比如Hooks、Suspense）外，还有很...

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

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

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

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

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

,用于前端开发的 React 或 Angular，长期以来一直是大众关注的话题。关于两者中哪一个更好的辩论是两个技术堆栈的永无止境的战场。在这篇博文中，我们将告诉您两种技术堆栈中的哪一种更适合您的前端...

大家好，我是 CUGGZ。,今天来分享在 React 开发中常见的一些错误，以及如何避免这些错误。理解这些问题背后的细节，防止犯下类似的错误。, Can’t perform a React state...

,最近公司的前端项目从 React 16 升级到了 React 17，导致 ahooks 的 useClickAway 不能按预期工作。,下面西瓜哥我就来说说到底发生了什么事。,ahooks 是阿里巴...

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

,大家好，我是前端西瓜哥。,为了提高 React 的性能，React 团队在开发 React 16 时做了底层的重构，引入了 React Fiber 的概念。,Fiber，本意为 “纤维”，在计算机世...

大家好，我卡颂。,昨天在开源圈发生个小插曲。起因是有个用户表示：React新文档在文档结构、美观度、性能等各方面都达到很高的标准。,尤雨溪对Vue新文档与React Beta文档做了测试后表示：在性能...

首先本文不会过度深入讲解只属于 React 或者只属于 Vue 的原理，所以只懂 React 或者只懂 Vue 的同学都可以畅通无阻地阅读本文。,关于 Vue3 的 React-style Hooks...

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

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

hello, 大家好, 我是徐夕, 今天又到了分享时间. 今天和大家分享一下我最近开源的轻量级电子签名组件——react-sign2.,,我们可以使用它轻松的实现电子签名, 比如说常用的合同签字, 文...

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

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

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

,大家好，我是 CUGGZ。,今天来分享 10 个编写更简洁 React 代码的实用小技巧！,如何将 true 值传递给给定的 props？,在下面的示例中，使用 prop showTitle 在导航...

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

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

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

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

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

写过 Vue 的读者一定用过官方提供的一个浏览器调试工具 vue-devtool[1]，它支持在浏览器中调试组件时，点击对应的按钮打开该组件对应你本地代码的文件。,这真的非常实用，而且是 Vue 官网...

,提到react fiber，大部分人都知道这是一个react新特性，看过一些网上的文章，大概能说出“纤程” “一种新的数据结构” “更新时调度机制”等关键词。,但如果被问：,本文将从两个框架的响应式...

为了便于理解，以下代码示例采用的都是 React + rdeco 编写，设计模式本身是高度抽象的，并不局限于某一类特定的框架,组件模式是我们用的最多的或者说目前大家都唯一能够理解的模式，组件模式的特点...

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

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

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