React Hooks 完全指南

Hooks 让函数组件拥有状态和生命周期。掌握核心 Hooks，开发更高效。

useState: 状态管理

const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: "", age: 0 });

// 更新状态
setCount(count + 1);
setUser(prev => ({ ...prev, name: "John" }));

useEffect: 副作用处理

// 组件挂载和更新时执行
useEffect(() => {
  document.title = `Count: ${count}`;
});

// 仅挂载时执行
useEffect(() => {
  fetchData();
}, []);

// 依赖变化时执行
useEffect(() => {
  subscribe(userId);
  return () => unsubscribe(userId); // 清理函数
}, [userId]);

useContext: 跨组件共享

const ThemeContext = createContext("light");

// 提供者
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// 消费者
const theme = useContext(ThemeContext);

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 });
dispatch({ type: "increment" });

useMemo & useCallback: 性能优化

// 缓存计算结果
const expensive = useMemo(() => compute(a, b), [a, b]);

// 缓存函数引用
const handleClick = useCallback(() => {
  doSomething(a);
}, [a]);

自定义 Hooks

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
• 只在 React 函数中调用
• 注意依赖数组
• 避免无限循环

Hooks 是 React 的未来，深入理解才能用好。