Skip to main content

React Hooks 详解

Hooks 是 React 16.8 引入的新特性，让你在函数组件中使用状态和其他 React 特性。

常用 Hooks​

useState​

管理组件的局部状态。

const [state, setState] = useState(initialState);

useEffect​

处理副作用，如数据获取、订阅或手动更改 DOM。

useEffect(() => {
    // 副作用代码
    return () => {
        // 清理代码
    };
}, [dependencies]);

useContext​

消费 Context 值。

const value = useContext(MyContext);

自定义 Hooks​

创建可重用的状态逻辑。

function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);
    
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    const reset = () => setCount(initialValue);
    
    return { count, increment, decrement, reset };
}

Hooks 规则​

  1. 只在顶层调用 - 不要在循环、条件或嵌套函数中调用 Hooks
  2. 只在 React 函数中调用 - 只在 React 函数组件或自定义 Hooks 中调用