当前位置：首页 > news >正文

React：什么是Hook？通俗易懂的讲讲

news 来源：原创 2025/4/25 7:24:14

什么是Hook

1.Hook 是什么？
2.React 内置的 Hook
3. 自定义 Hook
4. 总结

1.Hook 是什么？

可以理解为：函数组件的工具/功能插件
Hook是 React 16.8 以后提供的一种新特性，
让你在函数组件里“钩入”React 的功能（比如状态管理、生命周期等），
不用再写 class 组件了。

2.React 内置的 Hook

React 提供了一些内置的 Hook，最常用的有：

useState：给函数组件加上“状态”功能（比如计数器里的数字）。
useEffect：用来写副作用，比如请求数据、订阅事件、手动操作 DOM 等。
useRef：创建一个可以保存数据的“盒子”，组件刷新时内容不会丢失。
useContext： 就像一个“共享插件”，它可以让你的组件轻松地访问其他组件共享的数据。在组件树中方便地传递数据。

例子：计数器

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0); // 用 useState 声明状态return (<div><p>当前值：{count}</p><button onClick={() => setCount(count + 1)}>加一</button></div>);
}

3. 自定义 Hook

自定义 Hook其实就是自己写的函数工具，
这个函数里可以用别的 hook，
用来复用一套逻辑。

命名习惯： 必须以use开头，比如 useFetchData、useMousePosition。

例子：自定义获取窗口宽度的 Hook

import { useState, useEffect } from 'react';function useWindowWidth() {const [width, setWidth] = useState(window.innerWidth);useEffect(() => {const onResize = () => setWidth(window.innerWidth);window.addEventListener('resize', onResize);return () => window.removeEventListener('resize', onResize);}, []);return width;
}// 用法
function Demo() {const width = useWindowWidth();return <div>窗口宽度：{width}</div>;
}