23、React Hooks与事件处理全解析

React Hooks与事件处理全解析

1. React Hooks 概述

React 拥有 15 种不同的内置钩子，但其中一些很少使用，大约 10 种构成了所有 React 应用程序构建的核心 API。钩子用于多种目的，使组件变得智能，并能与整个网页进行交互。尽管所有钩子的用途差异很大，但它们都有一些共同特征。

• 状态钩子（Stateful Hooks） ：使应用程序具有状态。可以根据应用程序的复杂性和状态中的值使用不同的钩子。在 React 18 中，甚至可以进行低优先级和高优先级的状态更新，以帮助 React 使 UI 尽可能响应迅速。
• 副作用钩子（Effect Hooks） ：用于在组件内部运行副作用，通过使用依赖数组，可以在所需的时间触发副作用。
• 记忆化钩子（Memoization Hooks） ：用于优化 React 中的渲染。虽然可以不使用钩子进行记忆化，但有时需要钩子来记忆复杂的值，特别是回调函数是常见的记忆化目标。
• 库钩子（Library Hooks） ：仅适用于更复杂的代码库，可能与日常应用程序无关。

使用钩子时，必须遵守两条钩子规则：
1. 仅在组件的顶层调用钩子（即没有条件钩子或钩子循环）。
2. 仅在函数式组件中使用钩子（即不在组件外部、辅助函数中或基于类的组件中使用钩子）。

依赖数组很棘手，是常见的混淆来源，需要特别注意其中的内容，以确保副作用和记忆化正确触发。 </