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

React Hooks 入门与 State Hook 深入解析

1. React Hooks 概述

React Hooks 是 React 提供的一种新特性，它允许我们在不编写 class 的情况下使用 state 以及其他 React 特性。目前，不需要急于将所有组件迁移到 Hooks，建议逐步在某些最能发挥其作用的组件中采用。例如，如果有多个组件处理相似的逻辑，可以将这些逻辑提取到一个 Hook 中。同时，也可以将使用 Hooks 的函数组件与类组件一起使用。

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

1.1 Hooks 的思维方式

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

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

1.2 Hooks 的规则

虽然 Hooks 非常灵活，但使用时也有一些限制，需要牢记：
- Hooks 只能在函数组件和其他 Hooks 内部使用，不能在类组件或任意函数中使