React:什么是Hook?通俗易懂的讲讲

什么是Hook

  • [1.Hook 是什么?](#1.Hook 是什么?)
  • [2.React 内置的 Hook](#2.React 内置的 Hook)
  • [3. 自定义 Hook](#3. 自定义 Hook)
  • [4. 总结](#4. 总结)

1.Hook 是什么?

可以理解为:函数组件的工具/功能插件

Hook是 React 16.8 以后提供的一种新特性,
让你在函数组件里"钩入"React 的功能(比如状态管理、生命周期等)

不用再写 class 组件了。

2.React 内置的 Hook

React 提供了一些内置的 Hook,最常用的有:

  • useState:给函数组件加上"状态"功能(比如计数器里的数字)。

  • useEffect:用来写副作用,比如请求数据、订阅事件、手动操作 DOM 等。

  • useRef:创建一个可以保存数据的"盒子",组件刷新时内容不会丢失。

  • useContext 就像一个"共享插件",它可以让你的组件轻松地访问其他组件共享的数据。在组件树中方便地传递数据。

例子:计数器

ts 复制代码
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开头,比如 useFetchDatauseMousePosition

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

ts 复制代码
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>;
}

4. 总结

  • Hook 就是让你在函数组件里"钩入"React功能的函数。
  • 内置 Hook 是 React 官方提供的(如 useState、useEffect)。
  • 自定义 Hook 是你自己写的、用来复用逻辑的小函数(必须以 use 开头)。

一句话

Hook = 让函数组件变得更有能力的小工具函数(插件),可以用来管理状态、生命周期、逻辑复用等。

相关推荐
gAlAxy...16 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁16 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖16 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响17 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL18 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟19 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
尘觉20 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge21 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean21 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户214118326360221 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端