react常用hook

引言💭

自 React 16.8 起，Hook 的引入彻底改变了函数组件的开发方式。Hook 让函数组件拥有了管理状态、处理副作用、访问上下文等能力，大大提高了代码的可复用性和可读性。

---

一、useState ------ 管理组件状态的基础

useState 是最常用的 Hook，用于在函数组件中声明状态变量。

用法示例：

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数：{count}
    </button>
  );
}

特点：

• 每次调用 setCount 都会触发组件重新渲染。
• useState 可以接收一个函数作为初始值（惰性初始化）。

---

二、useEffect ------ 副作用处理器

useEffect 用于处理副作用，例如：数据获取、事件监听、DOM 操作等。

用法示例：

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('tick');
    }, 1000);

    return () => clearInterval(id); // 清理定时器
  }, []); // 仅在组件挂载时执行一次
}

特点：

• 第一个参数是副作用函数。
• 第二个参数是依赖数组，控制副作用的执行时机。
• 返回函数用于清理资源。

注意

在 React 18 及更高版本中，useEffect 在开发模式下会故意执行两次。

• 主要原因

严格模式(Strict Mode)的影响：React 18 在开发模式下默认启用严格模式，严格模式下会故意挂载、卸载、再重新挂载组件，目的是帮助开发者发现副作用中的错误，模拟用户行为（如快速切换页面），确保组件的副作用能够正确处理清理和重新设置。

• 具体表现

useEffect(() => {
  console.log("Effect ran"); // 在开发模式下会打印两次
  
  return () => {
    console.log("Cleanup"); // 也会执行两次
  };
}, []);

---

三、useRef ------ 引用 DOM 或保存可变值

useRef 用于获取 DOM 元素的引用，或在组件间保存一个不会触发重新渲染的变量。

用法示例：

import { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus(); // 直接操作 DOM
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>聚焦输入框</button>
    </>
  );
}

特点：

• ref.current 可以持久保存任意值。
• 常用于处理定时器、缓存值等不需触发更新的场景。

---

四、useContext ------ 跨组件共享状态

配合 React 的 Context API，useContext 可让你在任意子组件中访问全局数据。

用法示例：

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext); // 获取上下文值
  return <button className={theme}>主题按钮</button>;
}

特点：

• 避免多层 props 传递。
• useContext 会订阅 context 变化，自动更新。

---

五、useMemo ------ 缓存计算结果

useMemo 用于缓存耗时计算，避免不必要的重复运算。

用法示例：

import { useMemo } from 'react';

function ExpensiveComponent({ input }) {
  const result = useMemo(() => {
    return expensiveCalculation(input);
  }, [input]);

  return <div>{result}</div>;
}

特点：

• 只有依赖项发生变化时才会重新计算。
• 用于优化性能，但请勿滥用。

---

六、useCallback ------ 缓存函数引用

useCallback 返回一个记忆化的函数引用，用于避免子组件重复渲染。

用法示例：

import { useCallback } from 'react';

function Parent() {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <Child onClick={handleClick} />;
}

特点：

• 与 useMemo 类似，但用于缓存函数。
• 在需要传递稳定函数引用时使用（如依赖项、子组件 props）。

---

七、useReducer ------ 更复杂的状态逻辑管理

useReducer 更适合处理状态变化逻辑复杂或状态结构较大的情况。

用法示例：

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
}

---

八、总结

• 使用 useState 管理简单状态，useReducer 管理复杂状态。
• 使用 useEffect 时确保清理副作用，避免内存泄漏。
• 使用 useMemo 和 useCallback 仅在性能瓶颈时启用。
• 将重复逻辑封装成自定义 Hook 提高复用性。

---

结语✒️

React Hook 为函数组件带来了强大的功能和灵活性。掌握这些常用 Hook，不仅可以简化代码结构，还能提升应用的性能与可维护性。