每个 React 组件都像一个生命体，从诞生（被创建并添加到 DOM）到成长（通过更新 props 和 state 来改变），再到最终的消亡（从 DOM 中移除）。React 提供了一系列特殊的“生命周期方法”，允许我们在组件生命中的特定时刻执行代码。 React 的组件生命周期的三个核心阶段如下： 1. **挂载 (Mounting)**: 组件实例被创建并插入到 DOM 中的过程。 2...

在理解 `useCallback` 和 `React. memo` 之前，必须先理解 React 的一个核心渲染机制和由此带来的性能问题。 在 JavaScript 中，函数和对象都是**引用类型**。当一个 React 父组件重新渲染时，它内部定义的所有函数和对象都会被**重新创建**，得到一个全新的引用地址。 ```javascript function...

React 组件的核心职责是根据 props 和 state 渲染 UI。理想情况下，渲染过程是“纯粹”的。但应用总需要与外部世界交互，例如从服务器获取数据、设置定时器或手动操作 DOM。这些与 React 渲染流程无关的操作，被称为**副作用 (Side Effects)**。 一个纯函数对于相同的输入总是返回相同的结果，并且不影响任何外部状态。React...

State 是一个组件的**私有内存**。它用来“记住”那些会**影响组件渲染输出并且会随用户交互而改变的信息**，比如输入框里的文字、一个开关是开还是关、一个正在加载的数据等。 > 如果说 `props` 是从外部传递给组件的配置，那么 `state` 就是组件内部自己维护的、随时间变化的数据。State 是让 React 应用**变得动态和交互的核心**。 State 和 props...

组件化让我们可以构建可复用的 UI 模块，但这些模块需要一种方式来相互通信。`props` (properties 的缩写) 正是 React 中实现组件间通信的基石，它使得组件变得更加动态和灵活。 Props 是从父组件传递给子组件的任意数据。可以把 props 想象成函数的参数，它们决定了组件的渲染输出和行为。 在 React 中，数据流是**单向的 (Unidirectional...

想象一下，我们渲染了一个项目列表。当这个列表的数据更新时，React 需要弄清楚 UI 该如何变化。它面临两个选择： 1. **销毁整个列表，然后从头开始重新创建**：这种方式简单粗暴，但效率极低，会导致所有相关的 DOM 节点和组件实例被重新创建。 2...

在应用中，我们经常需要渲染一个项目列表 (Rendering Lists)，比如一个待办事项清单、用户列表或文章列表。直接在 JSX 中硬编码列表项是不现实的。 处理动态列表的标准做法是使用 JavaScript 的 `Array. map()` 方法。我们可以在 JSX 的花括号 `{}` 中，将一个数据数组转换为一个 React 元素数组。 ```javascript function...

```bash npm create vite@latest my-react-app -- --template react cd my-react-app npm install npm run dev ``` Vite 创建的项目结构如下： - `public/`: 存放静态资源，如图片、图标等。此文件夹中的内容在构建时会被直接复制到输出目录。 - `src/`: 存放应用的源代码。...

> 这里记录了很多JavaScript的神奇技巧，会持续更新. 解构赋值语法是一种允许你将数组或对象中的数据“解压”到独立变量中的表达式。 > 把解构想象成你收到了一个“礼品篮”（对象或数组）。你不需要整个篮子，你只想拿出其中的几样东西（属性或元素），并给它们分别贴上标签（变量名）。解构就是帮你自动完成这个“拿出并贴标签”过程的语法。 这是最常用的解构形式，用于从对象中提取属性。...

**测试驱动开发 (Test-Driven Development, TDD)** 是一种软件开发流程，它的核心思想是**先编写测试，再编写足以让测试通过的代码**。这与传统的“先写代码，后写测试”的流程正好相反。 TDD 遵循一个简短的重复循环，称为“红-绿-重构” (Red-Green-Refactor)： 1. **红...