在日常开发中，团队中每个人组织代码的方式不尽相同。下面我们就从 代码结构的角度 来看看如何组织一个更加优雅的 React 组件！ 1. 导入依赖项 我们通常会在组件文件顶部导入组件所需的依赖项。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： // 外部依赖 import React from "react"; import { useRouter } from "next/router"; // 内部依赖 import { Button } from "../src/components/button"; // 本地依赖 import { Tag } from "./tag"; import { Subscribe } from "./subscribe"; // 样式 import styles from "./article.module.scss"; 外部依赖： 外部依赖主要是第三方依赖，这些依赖定义在 package.json 文件中并从 node_modules 中

前言 本文将从渐进式、时间线、跨平台及企业级框架情况多个维度对两个库进行对比。 从概念开始 React官网说：React是用于构建用户界面的Javascript库。 Vue官网说：Vue是用于构建用户界面的Javascript渐进式框架。 一个说自己是库，一个说自己是框架，我们就先从这个细节说起。如下图Vue说自己是框架，是因为官方提供了从声明式渲染到构建工具一整套东西。 React说自己是库，是因为官方只提供了React.js这个核心库，路由、状态管理这些都是社区第三方提供了，最终整合成了一套方案。 两者最终达到的效果是相同的，也就是渐进式的解决方案，根据需求复杂度的不同，Vue和React都可以提供相匹配的、合适的解决方案。 何为声明式渲染 何为声明式渲染，为何这种方式能在前端界大行其道呢？ 声明式渲染指的是只需操作数据，不是操作视图（一般指DOM），数据就自然映射到视图上。当开发人员设定好数据和视图的映射...

在单独使用 TypeScript 时没有太多坑，不过和 React 结合之后就会复杂很多。下面就来看一看如何在 React 项目中优雅的使用 TypeScript！ 一、组件声明 在React中，组件的声明方式有两种： 函数组件 和 类组件， 来看看这两种类型的组件声明时是如何定义TS类型的。 1. 类组件 类组件的定义形式有两种： React.Component<P, S={} 和 React.PureComponent<P, S={} SS={} ，它们都是泛型接口，接收两个参数，第一个是props类型的定义，第二个是state类型的定义，这两个参数都不是必须的，没有时可以省略： interface IProps {   name: string; } interface IState {   count: number; } class App extends React.Component<IProps, IState  {   state = {     count: 0   };   render() {     re

之前分享过一篇[ 《使用 TypeScript 编写 React 的最佳实践！》 ](https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA &mid=2247506722&idx=1&sn=8b53ee7c290a7ef3b562f1383892828d&scene=21 wechat_redirect)，文中介绍了 React 和 TypeScript 搭配使用的一些常见用法。其中第四部分介绍了在React的事件处理中如何定义事件类型，下面来通过一些简单的 Demo （每个 Demo 后面都有 CodeSandBox 的在线体验地址）看看如何在 React + TypeScrip 中处理常见的事件！ 1. onClick onClick 是用的最多的事件之一，这里主要列举两种类型的 onClick 事件： button 按钮的 onClick 事件； 任意元素的的 onClick 事件。 下面先来看看按钮的 onClick 事件，当点击按钮时，在页面显示按钮的名称： import Rea

在构建应用时，错误是不可避免的。即使采用最佳的代码实践，运行时也可能会出现意外错误，导致应用崩溃。因此，处理错误是非常重要的。本文就来看看如何在 React 中捕获和处理错误，以及更强大的 React 错误处理方式！ 前言 那为什么要在 React 中捕获错误呢？因为从 React 16 开始，React 生命周期中的错误如果未被停止，整个应用就会自行卸载，导致崩溃。在此之前，即使组件中存在一些小错误，它也会保留在屏幕上，但是现在，UI中某些无关紧要的部分，甚至是无法控制的某些第三方库中的未捕获错误，都可能导致页面崩溃，出现白屏的现象，影响用户体验。所以，捕获并处理 React 中的错误至关重要。 在JavaScript中，我们可以使用 try...catch 来捕获错误，例如： <pre data-line="15" <section <span <span </span <span </span <span </span </span <span </span </section <pre data-title="true" <code data-line="...

在日常开发中，团队中每个人组织代码的方式不尽相同。本文就从 代码结构的角度 来看看如何组织一个更加优雅的 React 组件！ 1. 导入依赖项 我们通常会在组件文件顶部导入组件所需的依赖项。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： // 外部依赖 import React from "react"; import { useRouter } from "next/router"; // 内部依赖 import { Button } from "../src/components/button"; // 本地依赖 import { Tag } from "./tag"; import { Subscribe } from "./subscribe"; // 样式 import styles from "./article.module.scss"; 外部依赖： 外部依赖主要是第三方依赖，这些依赖定义在 package.json 文件中并从 node_modules 中导入

数据获取是任何 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