数据获取是任何 react 应用程序的核心方面。对于 React 开发人员来说，了解不同的数据获取方法以及哪些用例最适合他们很重要。 但首先，让我们了解 JavaScript Promises 简而言之，promise 是一个 JavaScript 对象，它将在未来的某个时间产生一个值。这通常适用于异步操作（例如数据获取）。 Promises具有三种状态： Pending:承诺仍在进行中的地方 Fulfilled：承诺成功解决并返回值的地方 Rejected：承诺因错误而失败 如果一个promise被Fulfilled或Rejected，它就被解决了。Promise 有不同的方法来根据结果做不同的事情。下一节将更详细地讨论这些方法。 1、使用 Promise 方法获取 api Fetch API 提供了一个全局的 fetch() 方法，使开发人员能够以直接的方式获取数据。在 fetch() 之前，传统方法是使用 XMLHttpRequest()。（本文不涉及此方法，因为 fetch() 已被更强大、更灵活的功能集所取代。） ...

在我们React的日常开发中一些常用的写法，看似运行的很好，实际可能并不优雅。学习React并不是如何如何使用它，而是如何写出优雅，干净的代码。下面举一些例子，总结了一些React开发中不好的写法及相应更好的写法。( 仅代表个人观点 ) 过多的声明state 问题 一个组件中声明了过多的state，过多的setState方法。例如下面的这样： import { useState } from "react"; export default function MoreState() {   const [username, setUsername] = useState("");   const [age, setAge] = useState("");   const [gender, setGender] = useState("");   const [email, setEmail] = useState("");   const [password, setPassword] = useState("");   const [addre

本文来分享 React 中的 16 种常见反模式和最佳实践。 1、在组件外部声明CSS 如果使用 CSS in JS 的解决方案，尽量避免在组件内声明 CSS。 <pre data-line="11" <section <span </span <span </span <span </span </section <code data-line="11" <span <span import</span makeCss <span from</span <span 'some/css/in/js/library'</span <br/ </span <span <br/ </span <span <span const</span <span Component</span <span =</span <span (</span <span )</span <span = </span <span {</span <br/ </span <span <span // 不要这样写</span <br/ </span <span <span retur...

React 18 引入了并发功能，从根本上改变了 React 应用的渲染方式。本文将探讨 Transitions、Suspense 和 React Server Components 等并发功能如何影响和提高应用的性能。 主线程和长任务 当在浏览器中运行 JavaScript 时，JavaScript 引擎在单线程环境中执行代码，该环境通常称为主线程。除了执行 JavaScript 代码之外，主线程还负责处理其他任务，包括管理用户交互（如单击）、处理网络事件、计时器、更新动画以及管理浏览器重排和重绘。 主线程负责将任务一一处理 当一个任务正在处理时，所有其他任务都必须等待。虽然浏览器可以顺利执行小型任务以提供无缝的用户体验，但较长的任务可能会出现问题，因为它们可能会阻止其他任务的处理。任何运行时间超过 50 毫秒的任务都被视为“ 长任务 ”。 ![图片](https://static.deve...

6 月 21 日，React Native 0.72 正式发布！版本增加了 Metro 强烈要求的功能，改进了错误处理和其他开发者体验方面的改进。其中很多工作都是根据 2022 年社区调查 ^[1]^ 中提供的反馈进行优先考虑的。下面就来看看该版本都有哪些更新吧！ 亮点 新的 Metro 功能 符号链接支持（beta） 符号链接支持仍然是 Metro 中最受欢迎的功能之一，在 React Native 0.72 中提供了 beta 版支持。 符号链接支持使得 React Native 可以与多仓库设置和 pnpm 无缝协作，消除了临时解决方案的需求。 包导出支持（beta） 包导出是 package.json 的现代替代方案，为 npm 包定义其公共 API 并针对 React Native 提供新的功能。 通过在 Metro 配置中启用包导出支持，应用将与更广泛的 JavaScript 生态系统兼容，包括通过新的 “react-native”社区条件 ^[2]^ 。 启用 beta 版功能 要在项目中启用这些功能，请更...

前言 现在我们用 React+TS 写一个支持多种命令的 Terminal 终端吧。 每一步骤后都有对应的 commit 记录; 搭建环境 我们使用 vite 构建项目，安装所需要的依赖库： @neodrag/react (拖拽) tailwindcss lucide-react (图标) 步骤： pnpm create vite 选择 React+TS 模版 安装依赖： pnpm install @neodrag/react lucide-react && pnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p 配置 tailwind.config.js: /  @type {import('tailwindcss').Config}  / export defaul

React 是一个声明式、高效、灵活的用于构建用户界面的 JavaScript library，本文主要对 React 带来的三个颠覆性理念一一展开介绍。 一、React 是什么 在 React 之前前端有三个里程碑意义的 library/framework jQuery 解决了浏览器兼容和 DOM 元素快捷操作问题，其链式操作 API 也对后续前端框架产生了深刻影响； Knockout 提出了前端代码 MVVM 分层理念，数据通过模板映射为 UI 视图，大幅度减少了 DOM 操作； AngularJS 在 MVVM 基础上引入了双向绑定，数据变化自动反映到 UI，视图上的操作也反向自动更新数据；其通过指令拓展 HTML 的风格提升了模板引擎的灵活性，可惜作者引入了大量借鉴服务器编程的概念，让 AugularJS 学习成本直线上升，性能也略有不足； React 是一个声明式、高效、灵活的用于构建用户界面的 JavaScript library，React 核心理念在于将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作 “Component”...

大家好，我是沐华。最近部门招人，捞了一批简历至少都是5年以上的前端来面试，其中不乏360的，腾讯的，简历上写的基本都是熟练使用 Vue2 、 Vue3 、 React 并阅读源码对其实现原理有自己的理解，实际问起来却不免让人唏嘘 比如：既然两个框架都用过，那能说一下你觉得这俩有什么区别吗 毕竟是两个框架，不像两个 API ，要说细节上的区别就太多太多了，可能能聊几个小时都聊不完，所以你给自己的定位是什么呢 说说 Vue 和 React 的区别 青铜级 只要真正了解一些，或者用过两个框架开发，就一定能说上来的一些语法层面： Vue API 多， React API 少 Vue 双向绑定，修改数据自动更新视图，而 React 单向数据流，需要手动 setState Vue template 结构表现分离， React 用 jsx ...

在 [可在控制流中调用！React 新 hook 尝鲜](https://www.developers.pub/article/1205663) 中，我们对 React 新 Hook use 的设计理念和限制进行了深入分析，并提供了一个可能的实现来帮助读者更好地理解这一概念。 然而，这个 Hook 的雄心远不止于此。根据相关提案，我们有充分理由推断，这个全新的 Hook 将引发一场颠覆性的 Hook 变革。 未来展望 useContext use(Context) 许多读者反馈称，尽管这个 Hook 确实可以在控制流中调用，但将其命名为 use 似乎并不合适。既然其入参是 Promise ，为何不直接称其为 usePromise 呢？ 然而，将 Promise 作为入参仅仅是这个 Hook 宏伟蓝图的第一步。根据相关提案和计划，这个 Hook 将接受被称为“usable”的类型作为入参。 具体来说，什么是“usable”尚无明确定义，似乎还需要进行更多的思考和讨论。 然而，可以确定的是，第一个官方实现的“usable”数据结构是 Re

背景 React 在之前的文档中提到了 Suspense for data fetching^[1]^ 的理念，虽然在新的文档中下线了，但还是有相关的请求库做了实现，比如 useSwr^[2]^ 和 useQuery ^[3]^ 。React 团队一直想对请求这件抽象且频繁的事情做更好的支持，因此有个新提案带来了新的 Hook —— use 。 介绍 前置条件 在开始正式说 use 前，我不得不先说下需要做的准备工作。这个新 Hook 一般来说得和 Suspense 一起使用，因此，需要准备这样的 wrapper 组件，用以包裹下文提到的绝大多数组件。 function LoadingErrorWrapper({ children }) {   return <ErrorBoundary     <Suspense fallback={<Loading / }       {ch

在日常开发中，遇到非常难以维护的页面是常态，相信不少同学也为此苦恼过，笔者在业务开发中总结了些经验希望对大家有所启发。（后台回复大数据即可获得《大数据&AI实战派》电子书） 背景 在日常开发中，遇到非常难以维护的页面是常态，相信不少同学也为此苦恼过，笔者在业务开发中总结了些经验希望对大家有所启发。下图是一个较为复杂的详情页、表单页，我截取了其中一小部分作为示例： 随着需求不断迭代，这个页面的代码变得越来越复杂，代码达到几千行，html 标签嵌套层级非常深，每次想在正确的节点改东西、加元素都非常费眼睛；每次想修改、叠加业务逻辑，看到一堆 useEffect、useState、useRef 令人望而却步。于是决定重构以改变现状。 如何重构，以拆解复杂页面 如何重构一个复杂前端页面？笔者平常主要写后端，实际工程中后端代码的腐化很多都来源于 if-else 不断叠加，要重构一般分几个层次看： 如果是某一个业务概念比...

近日，React 中引入了两个实验性 Hooks： useOptimistic 和 useFormStatus ，下面就分别来这两个 Hooks 都有什么用处！ useOptimistic 实验性 useOptimistic Hooks 提供了一种在应用中实现 乐观更新 的方法。 乐观更新是一种通过使应用看起来响应更快来增强用户体验的技术。 在实际场景中，往往会遇到一些需要与服务器进行异步交互的情况，比如消息发送。为了提升用户体验，在这类操作中，我们通常希望优先显示新数据或新状态，而不是等待服务器返回响应后再进行更新。这样做可以让用户立即感知到自己的操作已经被执行，降低等待时间和不确定性。 useOptimistic 钩子就是为了支持这种优化而设计的。当组件通过该钩子创建一个新状态时，可以指定一个函数，用于在每次更新状态时生成一个新的状态数组。这个函数可以在新状态中添加一些临时数据，比如正在发送的消息等。同时，将这些临时数据展示给用户，使其可以及时地感知到自己的操作已经被执行，从而提高交互体验。 来看下面的例子： import { exp

React 团队希望给 React 社区提供一个选项， 使其可以在新功能的设计接近完成时就可以选择使用这些功能，而不必等到它们发布为稳定版本 ，因此引入了一个新的官方支持的 Canary 发布渠道，这个渠道将使用单独的 React 功能与 React 发布计划解耦。 概述： React 团队为 React 引入官方支持的 Canary 发布渠道。由于它得到官方支持，如果出现任何回归，将像对待稳定版本中的错误一样紧急处理。 使用 Canary 可以在它们被发布为稳定的语义化版本之前开始使用单独的新 React 功能。 与实验功能不同，React Canaries 仅包含有理由相信可以采用的功能，鼓励框架考虑捆绑固定的 Canary React 版本。 将在 React 官方博客上宣布 Canary 版本中的重大更改和新功能。 React 将在每个稳定版本中继续遵循语义化版本（Semver）。 React 功能通常是如何开发的？ 通常，每个 React 功能都经历以下阶段： 1. 首先，开发一个最初版本，并在 API 名称前添加 ex...

最近 React 发布了全新的文档，文档中已经不再将 create-react-app (CRA) 作为搭建 React 应用的推荐方式，而是推荐了很多其他方式，包括 Vite、Next.js、Remix、Gatsby 等，下面就分别看看这些方式都有哪些优缺点，2023年该如何做出选择！ Vite Vite 很显然是 create-react-app (CRA) 的继任者，因为它与 CRA 没有太大的区别。与 create-react-app（使用 Webpack）相比，它要快得多，因为它在底层使用了esbuild。 和 create-react-app (CRA) 一样，Vite 也更倾向于使用客户端路由和渲染来创建单页面应用（SPA）。然而，由于服务端渲染（SSR）越来越受到重视，因此在 Vite 中它作为一个可选功能提供。 ![图片](https://static.developers.pub/e6eb8f50ac86406...

1. 编程风格 & 视图风格 1.1 编程风格 1. React 语法少、难度大； Vue 语法多，难度小 例如指令： Vue <input v-model="username"/ <ul     <li v-for="(item,index) in list" :key="index" {{ item }}</li </ul 复制代码 React <input value={username} onChange={e =  setUsername(e.target.value)}/ <ul { list.map((item,index) =  <li key={index} {item}</li ) } </ul 复制代码 Vue 给我们提供了很多的指令功能，而这些功能在 React 中基本都需要我们使用原生 js 来实现。 所以会有很多人说: "使用 Vue 实际上你就是在操作 Vue，使用 React 实际上你是在操作 js"。 2. React 魔改少，手动实现；