在 React 官方文档中，对于 useEffect 有这样一句描述：Effects are an escape hatch from the React paradigm。 这句话怎么理解呢？我们要结合前面的哲学部分进行思考。React 开发指导思想是数据驱动 UI，因此在 React 程序中，我们总是会思考如何设计与 UI 保持一致的数据，把解决问题的重心放在数据逻辑上。 但是这样的思路并不能

在React开发中，我们经常使用钩子函数来处理组件的副作用。其中，最常见的两个钩子函数是useEffect和useLayoutEffect。这两者看似相似，但实际上存在一些关键的区别。本文将深入探讨它们的用法，并通过生动有趣的例子和代码，帮助你理解二者之间的异同。最后，我们还将以表格形式总结它们的区别。 1. 用法简介 1.1 useEffect useEffect是React提供的一个钩子函数，

一、背景 近期在工作中遇到了一个新的需求，该需求需要实现某个组件的拖拽，面对这个需求的第一个项目肯定是问问度娘和用最大同性交友网站进行搜索，最终皇天不负有心人，让我找到了这个17k star的React拖拽库——React DnD。 二、简单使用 1、安装 npm install react-dnd -S // react-dnd包,其核心包 npm install react-dnd-html5

在日常开发中，团队中每个人组织代码的方式不尽相同。下面我们就从代码结构的角度来看看如何组织一个更加优雅的 React 组件！ 1. 导入依赖项 我们通常会在组件文件顶部导入组件所需的依赖项。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： // 外部依赖 import React from "react"; import { useRouter

在 React 中，性能优化一直是开发者们关注的焦点之一。为了减少组件的重渲染和提高应用程序的性能，React 提供了一些钩子函数，其中之一就是 useMemo。本文将深入探讨 useMemo 的用法，展示它如何帮助我们优化 React 组件。 1. 什么是 useMemo？ 在介绍 useMemo 之前，我们先了解一下它的作用。useMemo 是一个 React 钩子函数，用于对计算结果进行缓存

React Native 最新稳定版 0.73 已发布。此版本主要变化包括增加了对使用 Hermes 进行调试的改进、符号链接支持 (symlink) 进入稳定阶段、Android 14 支持以及新的实验性功能。此外还弃用了旧版调试功能，并发布了新架构的下一个支柱：无桥接模式 (Bridgeless Mode)。 Hermes 支持查看控制台历史 console.log()是开发者快速调试 Jav

防抖 防抖函数，就是防止抖动，避免事件重复触发。比如监听输入框的输入，不应该在用户每输入一个字符就触发监听，而是在用户输入结束后再来监听。 流程为：1、事件触发；2、开启定时器；3、当事件再次触发的时候，就会清除上个定时器，然后重新开启新的定时器；4、时间到了以后，就开始处理事件操作。 现在有一个输入框，代码如下： import React from "react"; const Child2 =

在我的日常工作中，我致力于一个 JavaScript 框架（LWC）。尽管我已经在这个项目上工作了将近三年，但我仍然觉得自己是一个业余爱好者。当我阅读有关更大的框架世界的信息时，常常因为不了解的事情太多而感到不知所措。 然而，学习事物的最佳方法之一是亲自动手构建。而且，我们要继续保持那些 “距上一个 JavaScript 框架的天数” 模因的持续。因此，让我们来编写我们自己的现代 JavaScri

12 月 6 日，React Native 0.73 正式发布。这个版本增加了对使用 Hermes 进行调试的改进、稳定的符号链接支持、Android 14 支持以及新的实验性功能。除此之外，还弃用了旧版调试功能，并发布了新架构的下一个支柱：无桥接模式！ 更新亮点 调试改进 React Native 和 Hermes 团队致力于改进 React Native 中的调试体验。在 0.73 版本中，有

之前分享了很多可视化和低代码的技术实践, 最近技术圈友自荐了一款他们开发的基于 React 的高性能表单组件, 目前已经在各个产品线大量使用, 我体验了一下还是非常好用的, 设计思想也很值得学习, 这里就和大家分享一下这款开源表单组件库——react-form-simple. 背景 表单的受控控制一直是 react 里的一个痛点，当我们想要实现一个输入框的受控控制时，需要定义 onChange 和

条件渲染是React中的一个强大功能，它允许开发人员根据某些条件控制组件的显示。它在创建动态和交互式用户界面方面发挥着至关重要的作用。 然而，了解条件渲染在 React 中的工作原理并掌握其实现对于开发人员来说可能具有挑战性，尤其是那些刚接触该框架的开发人员。 今天这篇文章可以为您提供帮助。无论您是初学者还是希望提高技能的经验丰富的开发人员，本文都将为您详细解释 React 中的条件渲染，并提供实

useMemo是React一个重要的性能优化工具，它可以帮助我们避免在渲染过程中不必要的计算，从而提高组件的性能。本文将深入探讨useMemo的使用方法、原理以及源码实现，以便帮助前端开发者更好地理解和利用这一特性。 useMemo的基本用法 在React中，useMemo是一个自定义Hook，它用于缓存计算结果，以避免在每次渲染时重新计算。它的基本用法如下： const memoizedValu

介绍 Jest是目前前端工程化下单元测试火热的技术栈，而Enzyme的支持提供了Jest测试React业务、组件的能力，下面来介绍一下React组件测试的一些实际场景。 1. 测试依赖包 "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "^3.3.5", "jest": "^28.1.1",

大家好，我卡颂。 前端界有句玩笑话 —— 「React 一点都不 react，Solid 才应该叫 React」。 作为一款「借鉴了很多 React 特性」的前端框架，截止目前，Solid已经有 29.6kstar。显然，他已经得到了社区的认可。 前段时间，Solid的作者「Ryan Carniato」在博文Thinking Locally with Signals[1]中提到 —— Solid从

现在有一种观点声音逐渐大了起来，认为市面上出现了许多比 React 性能更好的框架，是不是意味着，React 将要被淘汰了？ 所以有人就在群里问我，他觉得 Solid.js 性能比 React 更好，以后会不会取代 React？ 谈谈我的看法，来做一个深入一点的分析。 先说结论：Solid.js 要取代 React 很难。 双向绑定 双向绑定的概念并非一个新的词，因此对应的解决方案 Signal 

大家好，今天给大家分享一个非常实用的 React 库——formik。formik 是一个用于构建和管理 React 表单的库。它的主要目的是简化表单的开发流程，使得创建和处理表单变得更加容易。 1、什么是 formik，它提供了哪些功能 formik 是一个非常流行的表单库，因为它简单易用，功能强大，而且可以与其他库和框架很好地集成。如果你需要在 React 应用中创建和管理表单，那么使用 fo

React 组件的性能优化一直是前端开发中的重要议题。useEffect 是 React Hooks 提供的一个强大工具，它允许我们处理一些与渲染无关的操作，比如数据获取、订阅和手动操作 DOM。然而，在使用 useEffect 时，我们必须谨慎选择第二个参数，以便在确保功能正确的同时，最大限度地提高性能。 基本用法 首先，我们来回顾一下 useEffect 的基本用法： useEffect(()

React 的 useEffect 是一个重要的 Hook，用于处理组件的副作用。在本文中，我们将深入探讨 useEffect 的实现原理，以更好地理解它在 React 中的作用。 副作用 在React中，副作用函数通常是指那些不纯粹（impure）的函数，即它们可能会对组件外部的状态产生影响，而不仅仅是返回一个值。在React中，常见的副作用包括数据获取、订阅外部事件、手动操作DOM等。 为了处

大家好，我卡颂。 最近Next.js v14发布，发布会的各种梗图刷爆了国外前端社区。 Next.js的诸多特性（比如Server Action、App Router），都是在RSC（React Server Component）基础上衍生出的。 从名字可以看出，RSC是React的特性。那么，该怎么理解RSC和Next.js的关系呢？ React团队的宿愿 对于前端框架的开发范式，有三个重要衡量

前言 随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于react的开源组件库ant-design，material，又比如基于vue的开源组件库elementUI，iView等。 我们在开发管理系统或者中台产品时，完全可以使用这种第三方库来开发，因为首先其服务的用户群