React - 哈喽比特 - https://www.hellobit.com.cn

JavaScript

当然，常规的前端框架不只做到这一步，它们有专门的语法，如 Vue 中的模板语法和 React 中的 JSX，这些语法使得编写复杂的前端页面相对于其他方式更加简洁。

发表于 1年以前 · 阅读量：749

JavaScript

最近AIGC技术的大热，市面上也出现了许多类似生产的AI工具，其中有一大特色就是对话的输出结果是类似真人的打字效果出现，要呈现出这种效果，最主要的就是要利用SSE技术（Server-Sent Events是一种基于HTTP长连接的“服务器推”技术，其特点在于建立更长时间的连接以等待后续数据的传输。

发表于 1年以前 · 阅读量：906

JavaScript

Chrome 插件开发指南和实践

阅读本文你将了解到:Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。

发表于 11月以前 · 阅读量：1107

JavaScript

useEffect 实践案例（一）

对于 useEffect 的掌握是 React hooks 学习的**重中之重**。因此我们还需要花一些篇幅继续围绕它讲解。

发表于 1年以前 · 阅读量：689

JavaScript

React 和 Vue 全方位对比总结

本文将从渐进式、时间线、跨平台及企业级框架情况多个维度对两个库进行对比。

发表于 1年以前 · 阅读量：718

JavaScript

React 中条件渲染的 N 种方法

条件渲染在React开发中非常重要的功能，它允许开发人员根据条件控制渲染的内容，在创建动态和交互式用户界面方面发挥着至关重要的作用，本文总结了常用的的条件渲染方法。

发表于 10月以前 · 阅读量：740

JavaScript

React：我们的用法习惯可能是错误的

在我们React的日常开发中一些常用的写法，看似运行的很好，实际可能并不优雅。学习React并不是如何如何使用它，而是如何写出优雅，干净的代码。下面举一些例子，总结了一些React开发中不好的写法及相应更好的写法。

发表于 1年以前 · 阅读量：715

JavaScript

React之Context 深层传递参数

通常情况下，我们使用Context来避免通过props一层一层地传递数据，特别是当应用程序变得复杂时。深层传递参数是指在React应用程序中将数据从一个祖先组件传递到较深层的后代组件。

发表于 9月以前 · 阅读量：539

JavaScript

我知道你想用useEffect，但你先别急

useEffect是React提供给我们的一个“逃生舱”，是React 的纯函数式世界通往命令式世界的“逃生通道”，选择合适的时机使用useEffect会让我们的代码既优雅又高效，反之会造成不必要的负担。

发表于 9月以前 · 阅读量：782

JavaScript

浅析 5 种 React 组件设计模式

作为一名 React 开发者，你可能会面临下面几个问题：如何构建一个高复用度性的组件，使其适应不同的业务场景？如何构建一个具有简单 API的组件，使其易于使用？如何构建一个在 UI 和功能方面具有可扩展性的组件？为解决上述问题，下面介绍五种 React 组件设计模式，并对比它们的优缺点。

发表于 10月以前 · 阅读量：862

JavaScript

React Router v6 实践

React Router 是 React 应用程序中用于处理路由的标准库。随着版本的不断更新，React Router v6 引入了许多重要的新特性和改进。

发表于 5月以前 · 阅读量：378

JavaScript

逃离 HTML + CSS

当下，构建交互式应用程序的主流技术是 Web 技术，其中包括 HTML、CSS 与 JavaScript。在过去的 10 年，Web 技术生态发生了翻天覆地的变化，包括层出不穷的开发框架，诸如 React、Vue、Svelte，也包括日新月异的前端工程化工具，比如 Webpack、esbuild、Vite 等等。但归根结底，他们都逃不开 HTML、CSS、JavaScript 三剑客的范畴。

发表于 5月以前 · 阅读量：358

JavaScript

React之Effect详解

在React中，Effect是一种用于处理副作用的机制，它允许我们在组件生命周期中执行诸如数据获取、订阅事件、手动操作DOM等副作用操作。

发表于 9月以前 · 阅读量：777

JavaScript

React之条件渲染

条件渲染是指根据特定条件选择性地渲染React组件或元素。这可以通过JavaScript中的条件语句（如`if`语句或三元运算符）来实现。在React中，条件渲染通常与组件的`render`方法结合使用，根据某些条件返回不同的React元素。

发表于 10月以前 · 阅读量：676

JavaScript

三种虚拟列表原理与实现

工作中一直有接触大量数据渲染的业务，使用react-window多之又多，所以对虚拟列表有了些浅显的理解。今天，我们就照着react-window的使用方式来实现三种虚拟列表。

发表于 1年以前 · 阅读量：571

JavaScript

「React 进阶」React 优雅的捕获并处理渲染异常

React jsx 在编译阶段，会被 babel 变成 React.Element 的形式，它的执行是在 React 整个渲染的 render 阶段执行的，如果 React.Element 出现了空指针等异常，那么就会中断 render 阶段的执行，当然也不会执行渲染真实 DOM 的 commit 阶段。所以如果是初次渲染，任何渲染动作也就不会执行，最终呈现给我们的视图就是白屏。

发表于 1年以前 · 阅读量：557

JavaScript

你为什么需要 useMount 和 useUnmount?

使用 React 类组件时，React 有明显的生命周期方法，可以在确定的生命周期方法里做确定逻辑，自从 React Hooks 推出后，React 没有推出明确的生命周期方法，更多的是使用 useEffect 去模拟生命周期方法，比如 useMount、useUnmount 等等。

发表于 5月以前 · 阅读量：380

JavaScript

图解 JS、React、Vue 设计模式

今天来分享一个免费在线学习 JS、React、Vue 设计模式的网站，该网站旨在为 JavaScript 设计、渲染和性能模式带来现代视角，使用普通 JavaScript 或现代框架构建功能强大的 Web 应用！

发表于 1年以前 · 阅读量：616

JavaScript

了解前端新框架-nue.js

前端开发者 Tero Piirajinen 推出了一个名为 Nue.js 的极简化前端开发工具，并迅速引发社区讨论。Piirajinen 在 Hacker News 上表示，它是 React、Vue、Next.js、Vite、Svelte 和 Astro 的替代品。

发表于 11月以前 · 阅读量：626

不一样的懒+预加载带来不一般的用户体验

本文提到的便是一个基于webpack 插件与 react 组件实现的一套研发高度自定义、组件按需加载的资源预加载方案. 简单来说是为了通过配置 webpack 插件及少量业务代码即可实现Code Splitting + 组件懒加载 + 组件预加载。

发表于 1年以前 · 阅读量：683

JavaScript

更轻巧的状态管理工具——Hookstate

作为 React 开发人员，管理中型应用程序的状态可能很困难。在开发小型应用程序时，将状态从一个组件传递到另一个组件相对简单。当应用程序的规模发生变化时，就会变得不方便，因为你需要无层级关系组件状态的互相访问支持。

发表于 7月以前 · 阅读量：591

JavaScript

译：为什么你应该用 React Query

React Query 为您提供了大量功能，如缓存、重试、轮询、数据同步、预取……以及数以百万计的其他功能，这些功能远远超出了本文的讨论范围。如果你不需要这些功能也没关系，但我仍然认为这不应该阻止你使用 React Query。

发表于 1年以前 · 阅读量：617

JavaScript

React之自定义 Hook

自定义Hooks是一种在React中重用逻辑的方式。它允许我们将组件中的状态逻辑提取到可重用的函数中，并在需要时在不同的组件中使用。

发表于 9月以前 · 阅读量：572

JavaScript

使用React Context的一些优化建议

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

发表于 7月以前 · 阅读量：613

JavaScript

React Fiber技术解读：你需要知道面试官最关心的话题！

关于 React Fiber 出来也有几年了，可最近面试多了才发现，还是有很多人一知半解，所以本文梳理了一下有关 Fiber、以及这个话题环环相扣，可以延伸的点，给大家面试复习、查缺补漏，如果你是面试官也可直接拿去提问。

发表于 1年以前 · 阅读量：890

JavaScript

认识&对比 React、Vue2、Vue3 三者的 diff 算法

React 是 Fiber 架构的，Fiber 其实是一个链表的结构，但是由于没有设置反向指针，因此没有使用双端比对的方式去优化 Diff 算法（没有反向指针，从右往左遍历链表会很困难）。这一点在 React 源码 reconcileChildrenArray 函数的注释中也有说明。

发表于 9月以前 · 阅读量：568

React 组件库都是怎么打包的？

大家都用过组件库，react 流行的组件库有阿里的 ant-design、字节的 semi-design、arco-design 等。那这些组件库都是怎么打包的呢？我们自己写个组件库的话，怎么写打包逻辑呢？这篇文章我们就来探究下。

发表于 1年以前 · 阅读量：556

JavaScript

React.js快速入门教程

React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。

发表于 10月以前 · 阅读量：462

JavaScript

用TypeScript编写React的最佳实践

如今， React 和 TypeScript 是许多开发人员正在使用的两种很棒的技术。但是把他们结合起来使用就变得很棘手了，有时很难找到正确的答案。不要担心，本文我们来总结一下两者结合使用的最佳实践。

发表于 10月以前 · 阅读量：739

JavaScript

二十分钟掌握React核心理念，老鸟快速入门指南

这是一份适合有着前端开发经验，并习惯使用现代前端框架，却还没深入使用过 React 的老鸟快速入门指南，如果你还没有接触过前端框架，那建议直接在官方文档仔细从头看起。

发表于 1年以前 · 阅读量：826

登录后可以享受更多权益