React Hooks 完全指南：从 useState 到自定义 Hook

useState 状态管理

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: "", age: 0 });
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

useEffect 副作用处理

import { useEffect } from "react";

function Example() {
  // 组件挂载和每次渲染后执行
  useEffect(() => {
    console.log("组件渲染");
  });
  
  // 仅在挂载时执行
  useEffect(() => {
    console.log("组件挂载");
  }, []);
  
  // 依赖变化时执行
  useEffect(() => {
    console.log("count 变化");
  }, [count]);
  
  // 清理函数
  useEffect(() => {
    const timer = setInterval(() => {}, 1000);
    return () => clearInterval(timer);
  }, []);
}

useContext 状态共享

const ThemeContext = React.createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>当前主题：{theme}</div>;
}

useReducer 复杂状态

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      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>
  );
}

自定义 Hook

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}

// 使用
function App() {
  const [name, setName] = useLocalStorage("name", "");
}

Hooks 使用规则

1. 只在顶层调用 Hooks
2. 只在 React 函数中调用
3. 自定义 Hook 以 use 开头

掌握 Hooks，让你的 React 代码更简洁！