React Hooks 完全指南：从入门到精通

Hooks 核心规则

1. 只在顶层调用（不在循环/条件/嵌套函数中）
2. 只在 React 函数组件中调用

常用 Hooks

useState - 状态管理

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

useEffect - 副作用处理

useEffect(() => {
  // 组件挂载和 count 变化时执行
  console.log('count changed:', count);
  
  return () => {
    // 清理函数（组件卸载或依赖变化前）
    console.log('cleanup');
  };
}, [count]); // 依赖数组

useContext - 跨组件共享

const ThemeContext = createContext('light');

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

useReducer - 复杂状态

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

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

useMemo & useCallback - 性能优化

const memoizedValue = useMemo(() => computeExpensive(a), [a]);
const memoizedCallback = useCallback(() => doSomething(a), [a]);

自定义 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];
}

Hooks 让函数组件更强大，逻辑复用更简单！