React Hooks 深度解析

Hooks 的诞生背景

Hooks 解决了类组件的复用逻辑困难和复杂组件难以理解的问题。

核心 Hooks

useState - 状态管理

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useEffect - 副作用处理

useEffect(() => {
  document.title = `Count: ${count}`;
  return () => { console.log("cleanup"); };
}, [count]);

useContext - 跨组件共享

const theme = useContext(ThemeContext);

useReducer - 复杂状态逻辑

const [state, dispatch] = useReducer(reducer, initialState);

自定义 Hooks

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

最佳实践

1. 只在顶层调用 Hooks
2. 只在 React 函数中调用
3. 正确使用依赖数组

总结

Hooks 让 React 代码更简洁、更易复用。