什么是React Hooks？常用的Hooks有哪些？

React Hooks大概是这几年React生态里最重要的一次变革。简单说，它是一系列函数，让你能在函数组件里“钩入”React的特性，比如状态、生命周期。以前这些能力只有类组件才有，现在函数组件啥都能干了。

为什么需要Hooks？

在Hooks之前，函数组件被叫做“无状态组件”，只能傻傻地接收props然后渲染。稍微复杂点的逻辑，你就得改成类组件。但类组件有它自己的麻烦：this绑定让人头大，生命周期方法把代码切得七零八落，逻辑复用也主要靠高阶组件和渲染属性这些弯弯绕绕的模式。

Hooks就是为了解决这些问题来的。它让你能用更直观、更函数式的方式组织组件逻辑。

最核心的Hook：useState

useState是让你在函数组件里添加状态的法宝。

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      点了 {count} 次
    </button>
  );
}

useState(0)返回一个数组：第一个元素是当前的状态值count，第二个是更新它的函数setCount。调用setCount后，组件会重新渲染，展示新值。就这么简单，彻底告别了this.setState。

处理副作用的Hook：useEffect

useEffect大概是第二重要的Hook。它负责处理副作用——那些在渲染之外做的事，比如数据获取、订阅、手动改DOM。

import { useState, useEffect } from 'react';
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
    return () => { /* 这里可以做清理，比如取消订阅 */ };
  }, [userId]); // 依赖数组：userId变化时才重新执行
  return <div>{user?.name}</div>;
}

你可以把useEffect理解为componentDidMount、componentDidUpdate和componentWillUnmount三合一的替代品。第二个参数（依赖数组）是它的精髓，控制着效果何时运行。

获取DOM引用：useRef

当你需要直接操作一个DOM元素，或者想保存一个渲染周期中持续存在的可变值（且不会触发重新渲染）时，就用useRef。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>聚焦输入框</button>
    </>
  );
}

inputEl.current就是真实的DOM节点。

性能优化相关：useMemo和useCallback

当组件重新渲染时，里面的函数和复杂计算会被重新创建。useMemo用来缓存昂贵的计算结果，useCallback用来缓存函数本身。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

它们都接受一个依赖数组，只有当依赖变化时，才会重新计算或创建。别滥用，只在真正有性能瓶颈时再用。

Hooks改变了我们写React组件的方式。它让逻辑更聚合，复用更方便（自定义Hook），代码也更清晰。从类组件切换到Hooks可能需要一点适应期，但用惯了之后，你大概就不想回去了。