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开头，比如 useFetchData、useMousePosition。

例子：自定义获取窗口宽度的 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 = 让函数组件变得更有能力的小工具函数（插件），可以用来管理状态、生命周期、逻辑复用等。