当前位置：首页 > article >正文

React Hooks 基础指南

article 2025/8/22 11:07:52

React Hooks 是 React 16.8 引入的重要特性，它允许开发者在函数组件中使用状态和其他 React 特性。本文将详细介绍 6 个最常用的 React Hooks。

1. useState

useState 是最常用的 Hook，用于在函数组件中添加 state。

import React, { useState } from 'react';function Counter() {// 声明一个叫做 "count" 的 state 变量，初始值为 0const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useState 返回一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数。

2. useEffect

useEffect 用于在函数组件中执行副作用操作，例如数据获取、订阅或手动更改 DOM。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);// 类似于 componentDidMount 和 componentDidUpdateuseEffect(() => {// 使用浏览器 API 更新文档标题document.title = `You clicked ${count} times`;// 清除副作用return () => {document.title = 'React App';};}, [count]); // 仅在 count 更改时重新运行return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useEffect 接受两个参数：一个包含副作用逻辑的函数和一个依赖数组。

3. useContext

useContext 接受一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。

import React, { useContext } from 'react';const ThemeContext = React.createContext('light');function ThemeButton() {const theme = useContext(ThemeContext);return <button style={{ background: theme }}>Theme Button</button>;
}function App() {return (<ThemeContext.Provider value="dark"><ThemeButton /></ThemeContext.Provider>);
}

useContext 使得在函数组件中访问上下文变得非常简单。

4. useReducer

useReducer 是 useState 的替代方案，适用于 state 逻辑较复杂且包含多个子值，或下一个 state 依赖于之前的 state 的情况。

import React, { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></div>);
}

useReducer 特别适合管理复杂的状态逻辑。

5. useRef

useRef 返回一个可变的 ref 对象，该对象的 .current 属性被初始化为传入的参数。常用于访问 DOM 元素或存储可变值。

import React, { useRef } from 'react';function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () => {// 使用原生 DOM API 聚焦文本输入inputEl.current.focus();};return (<div><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></div>);
}

useRef 的值在组件重新渲染时保持不变。

6. useMemo 和 useCallback

这两个 Hook 都用于性能优化。

6.1. useMemo 用法

import React, { useMemo } from 'react';function ExpensiveCalculationComponent({ number }) {const compute = (n) => {console.log('Expensive computation');return n * 2;};const result = useMemo(() => compute(number), [number]);return <div>Result: {result}</div>;
}

6.2. useCallback 用法

import React, { useState, useCallback } from 'react';function Button({ onClick, children }) {return <button onClick={onClick}>{children}</button>;
}function App() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><Button onClick={handleClick}>Increment</Button></div>);
}

useMemo 用于记忆化计算结果，useCallback 用于记忆化函数，两者都只在依赖项变化时重新计算。