前端学习-React Hook(钩子)

一.概述

1.什么是 Hook

hook（钩子）是一种特殊的消息处理机制，它可以监视系统或者进程中的各种事件消息，截获发往目标窗口的消息并进行处理。

1.1 Hook 例子

• 函数记录日志、节流、缓存
• Windows 窗口消息拦截
• 键盘事件拦截（木马和外挂）
• 流量识别分析

1.2 React Hook

我们可以通过 Hook 把需要的状态、副作用方法 “钩” 进来，放到函数内部使用。让原来呆板的 React 函数拥有状态和生命周期。

2. Hook 出现的意义

函数一等公民 - 函数式编程
关注状态变化 - 响应式编程
关注分离，逻辑复用

2.1 没有真正使用到 Class 的特性

• 继承：render 方法无法继承
• 类方法：实例化和命令式调用场景少

2.2 在组件之间逻辑难复用

高阶组件问题：

1. 实现和使用比较麻烦。
2. 组件会有额外节点，多个高阶组件需要层层嵌套。

2.3 生命周期逻辑难维护

1. 同一类逻辑分散在不同生命周期
2. 同一个生命周期中包含不同逻辑

2.4 Hook 不擅长的地方

• 组件实例、异步闭包应用、非幂调用等场景。
• 在实际开发过程中，需要根据实际的场景来选择 Class 或 Hook。

二.基础 Hook API

1. useState —— 让函数拥有内部状态

const [state, setState] = useState(initialState);

1. 调用返回一个数组，分别是 state（状态）和 更新 state 的函数。
2. 在初始渲染期间，返回的 state 与传入的 initialState 相同。
3. 调