React Hooks 完全指南

Hooks 的诞生

Hooks 让函数组件拥有状态和生命周期，是 React 16.8 引入的革命性特性。

基础 Hooks

useState

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

// 函数式更新
setCount(prev => prev + 1);

useEffect

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

// 仅挂载时执行
useEffect(() => {
  console.log("mounted");
}, []);

// 依赖变化时执行
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// 清理函数
useEffect(() => {
  const subscription = subscribe();
  return () => subscription.unsubscribe();
}, []);

useContext

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}

进阶 Hooks

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 });

useCallback

const handleClick = useCallback(() => {
  console.log("clicked", count);
}, [count]);

useMemo

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

useRef

const inputRef = useRef(null);
inputRef.current.focus();

// 保存可变值
const countRef = useRef(0);
countRef.current++;

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

常见陷阱

1. 条件调用 Hooks
2. 遗漏依赖项
3. 对象引用导致无限渲染
4. 闭包陷阱

最佳实践

1. 提取自定义 Hooks 复用逻辑
2. 使用 eslint-plugin-react-hooks
3. 合理使用依赖数组
4. 避免过早优化

总结

Hooks 是现代 React 开发的核心，掌握它能写出更简洁、可复用的组件。