React Hooks 核心机制
React Hooks 是允许你在函数组件里“钩入” React state 及生命周期等特性的函数。它们让你在无需编写 class 的情况下使用 state 和其他 React 特性。
常用 Hooks 示例
| Hook 名称 |
功能描述 |
示例代码 |
| useState |
添加 state 变量 |
const [count, setCount] = useState(0); |
| useEffect |
执行副作用操作（如API请求） |
useEffect(() => { fetchData(); }, []); |
| useContext |
订阅 React context |
const value = useContext(MyContext); |
| useReducer |
复杂 state 逻辑管理 |
const [state, dispatch] = useReducer(reducer, initialState); |
通过 Hooks，开发者可以更清晰地组织代码，将相关逻辑封装在自定义 Hook 中，提高代码复用性和可测试性。
JavaScript 事件钩子
除了 React，原生 JavaScript 中也广泛使用钩子概念，主要体现在事件监听和生命周期钩子上。
浏览器生命周期钩子
- window.onload： 页面完全加载后触发。
- document.onreadystatechange： 文档加载状态改变时触发。
- beforeunload： 页面卸载前触发，常用于提示用户保存数据。
自定义事件钩子
开发者可以使用 EventTarget 或第三方库（如 EventEmitter）创建自定义事件钩子，实现模块间解耦通信。