React Hooks 完全指南

Hooks 为什么出现？

Hooks 让函数组件拥有状态和生命周期，代码更简洁可复用。

核心 Hooks

useState - 状态管理

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
  点击 {count} 次
</button>

useEffect - 副作用处理

useEffect(() => {
  document.title = `点击 ${count} 次`;
  return () => { console.log("清理"); };
}, [count]);

useContext - 全局状态

const theme = useContext(ThemeContext);

useReducer - 复杂状态

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

自定义 Hook

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. 自定义 Hook 以 use 开头

最佳实践

• 合理拆分自定义 Hook
• 使用 ESLint 插件检查依赖
• 避免在渲染中创建新对象作为依赖

总结

Hooks 是 React 的未来，掌握它能写出更优雅的组件代码。