4、React Hooks 入门与 State Hook 深入解析

React Hooks 入门与 State Hook 深入解析

1. React Hooks 概述

在 React 开发中，不必急于将所有组件迁移到 Hooks。建议逐步在某些最能发挥其作用的组件中采用 Hooks。例如，若有多个组件处理相似逻辑，可将该逻辑提取到一个 Hook 中。同时，可将使用 Hooks 的函数组件与类组件并行使用。

Hooks 具有向后兼容性，为我们熟知的各种 React 概念（如 props、state、context、refs 和生命周期）提供了直接的 API。此外，Hooks 还提供了新的方式来组合这些概念，并以更好的方式封装其逻辑，避免了包装器地狱等问题。

1.1 Hooks 思维模式

Hooks 的主要目标是将有状态逻辑与渲染逻辑解耦。它允许我们在单独的函数中定义逻辑，并在多个组件中复用。使用 Hooks 时，无需更改组件层次结构来实现有状态逻辑，也无需再定义一个单独的组件为多个组件提供状态逻辑，直接使用 Hook 即可。

不过，Hooks 需要与传统 React 开发完全不同的思维模式。我们不应再关注组件的生命周期，而应考虑数据流。例如，我们可以让 Hooks 在某些 props 或其他 Hooks 的值发生变化时触发。

1.2 Hooks 使用规则

Hooks 非常灵活，但使用时存在一些限制，需牢记：
- Hooks 只能在函数组件和其他 Hooks 内部使用，不能在类组件或任意函数中使用。
- Hook 定义的顺序很重要，且需保持一致，因此不能将 Hooks 放在 if 条件语句、循环或嵌套函数中。

好在 Vite