前言

        在现代 React 开发中，Hooks 已经成为函数式组件的核心特性。它们让开发者无需编写类组件就能使用状态和其他 React 特性。不知道初学React的小伙伴会不会觉得Hooks有点小多，容易忘，所以我来啦，本文将对几个常用的 Hooks 进行快速回顾，帮助你巩固基础知识并提高开发效率。本文包含（useState,useRef,useContext,useEffect,useSelector,useDispatch,useNavigate）这几个hooks函数，剩余hooks会在下篇文章整理

目录

一、useState 

二、useEffect

三、useContext 

四、useRef 

五、useSelector 和 useDispatch

六、useNavigate

总结

一. useState - 状态管理

useState是React 中最基础且重要的 Hook，用于在函数组件中添加状态管理。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值为 0

  return (
    <div>
      <p>点击次数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        点击增加
      </button>
    </div>
  );
}

要点：​​

• 返回一个状态值和一个更新该状态的函数

• 状态更新会触发组件重新渲染

• 可以接受函数作为参数来基于先前状态更新

二. useEffect - 副作用处理

useEffect用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用），如数据获取、订阅或手动修改 DOM。

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 模拟 API 调用
    fetchUser(userId).then(data => setUser(data));
    
    // 清理函数 (可选)
    return () => {
      // 取消订阅或清理操作
    };
  }, [userId]); // 依赖数组，只有 userId 变化时才会重新执行

  return <div>{user ? user.name : '加载中...'}</div>;
}

依赖项:

1. 没有依赖项:组件初始渲染 + 组件更新时执行 
2. 空数组依赖:只在初始渲染时执行一次 
3.添加特定依赖项:组件初始渲染 + 依赖项变化时执行 

要点：​​

• 第二个参数是依赖数组，控制 effect 的执行时机

• 返回清理函数可避免内存泄漏

三. useContext - 上下文访问

useContext让你无需组件嵌套就能订阅 React 的 Context,利用这个机制可以实现跨层通信（就是不常用就是了，redux香香的，当然可能只是我没用到，额是新手）。

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return (
    <button className={theme}>
      当前主题: {theme}
    </button>
  );
}

要点：​​

• 与 Context.Procvider配合使用

• 避免 props 逐层传递（prop drilling）

四. useRef - DOM 引用和值持久化

useRef主要用于访问 DOM 元素，也可用于保存不会触发重新渲染的可变值。

import { useRef, useEffect } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 自动聚焦到输入框
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

// 用于保存可变值
function Timer() {
  const intervalRef = useRef();
  
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      // 定时操作
    }, 1000);
    
    return () => clearInterval(intervalRef.current);
  }, []);
}

要点：​​

• 修改 ref 不会触发重新渲染

• curren属性t可读写

• 常用于访问 DOM 元素或保存上一次的值

五. useSelector 和 useDispatch - Redux 集成

这两个 Hook 来自 React-Redux 库，用于在组件中访问 Redux 状态和分发 action。

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function CounterComponent() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>
        增加
      </button>
    </div>
  );
}

​​要点：​​

• useDispatch返回 dispatch 函数用于发送 actions

• useSelector订阅 Redux store 的状态

六. useNavigate - 路由编程跳转

useNavigate来自 React-Router v6，用于编程式导航。

import { useNavigate } from 'react-router-dom';

function LoginButton() {
  const navigate = useNavigate();

  const handleLogin = async () => {
    await loginUser();
    navigate('/dashboard'); // 跳转到仪表板
  };

  return (
    <button onClick={handleLogin}>
      登录
    </button>
  );
}

​​要点：​​

• 可以传递数字实现浏览器历史记录导航（如 navigate(-1)返回上一页）,接受参数涉及到其他Hooks函数，下篇文章会讲，鼠博主有点赶时间，不然应该和这个放到一起的

• 替代了旧版本的 useHistoryHook

  总结

  Hook	用途	触发重新渲染
  useState	组件状态管理	是
  useEffect	副作用处理	否（但可导致子组件渲染）
  useContext	访问上下文值	是（当上下文值变化时）
  useRef	DOM 引用/持久化值	否
  useSelector	读取 Redux 状态	是（当选择的值变化时）
  useDispatch	发送 Redux actions	否
  useNavigate	路由编程导航	否