Posts tagged with #Frontend

在 React 中，`useState` 是处理组件状态最常用的 Hook。但随着组件逻辑变得复杂，状态更新散布在多个事件处理函数中，会导致组件变得臃肿且难以维护。 想象一个管理任务列表的组件，它需要处理添加、删除和编辑任务。如果使用 `useState`，代码可能如下： ```javascript function TaskManager() { const [tasks,...

在 React 的声明式世界中，我们通常让 React 来负责所有的 DOM 更新。但有时，我们需要一个“逃生舱口”来直接与 DOM 交互，或者在多次渲染之间“记住”一些不触发视图更新的信息。这就是 `useRef` 的用武之地。同时，为了应对不必要的重渲染带来的性能问题，React 提供了 `useMemo`、`useCallback` 和 `React. memo` 等一系列...

在 React 中，数据流通常是自上而下的（通过 props）。但当应用规模变大，组件层级变深时，在组件之间传递数据，尤其是全局状态（如用户登录信息、UI 主题），会变得非常繁琐。一个典型的例子就是 Props 钻探，它有下面的问题： 1. **代码冗余和可读性差**：许多组件的 props 列表会变得臃肿，包含了大量与自身无关的属性，使得组件的真实依赖关系模糊不清。 2...

最常见的场景是在组件首次加载（mount）时获取数据。我们可以通过向 `useEffect` 传递一个**空依赖数组 `[]`** 来实现这一点。空数组告诉 React，这个 effect 只应该运行一次，即在组件挂载后。 ```javascript function UserProfile() { const [user, setUser] = useState(null);...

在传统的网站（多页面应用，MPA）中，每次点击一个链接，浏览器都会**向服务器发送一个新请求**，然后服务器**返回一个全新的 HTML 页面，导致整个页面刷新**。 而在**客户端路由**（单页面应用，SPA）中，导航行为由前端的 JavaScript 代码接管。当用户点击链接时： 1. JavaScript 会阻止浏览器的默认跳转行为。 2...

每个 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...