类和函数的差异#

类组件和函数组件是有差异的。不同的写法，代表了不同的编程方法论。

类（class）是数据和逻辑的封装。 也就是说，组件的状态和操作方法是封装在一起的。如果选择了类的写法，就应该把相关的数据和操作，都写在同一个 class 里面。

函数一般来说，只应该做一件事，就是返回一个值。 如果你有多个操作，每个操作应该写成一个单独的函数。而且，数据的状态应该与操作方法分离。根据这种理念，React 的函数组件只应该做一件事情：返回组件的 HTML 代码，而没有其他的功能。这种只进行单纯的数据计算（换算）的函数，在函数式编程里面称为 “纯函数”（pure function）。

但是，这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。

React Hooks 的设计目的，就是加强版函数组件，完全不使用”类”，就能写出一个全功能的组件。

Hook 的含义#

Hook 这个单词的意思是”钩子”。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用 use 前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 useXxx。

Hook 使用规则#

1. 只在最顶层调用 Hook 不要在循环、条件或嵌套函数中调用 Hook，确保每次渲染时 Hook 的调用顺序一致。
2. 只在 React 函数中调用 Hook 即在 React 函数组件或自定义 Hook 中调用，不要在普通 JavaScript 函数里使用。

（React 官方提供了 ESLint 插件 eslint-plugin-react-hooks 来自动检测这些规则。）

1
function Counter() {
2
  const [count, setCount] = useState(0);
3
  // ...
4
}

1
function MyComponent() {
2
  const [count, setCount] = useState(0);      // Hook 1
3
  // 错误：在条件语句中调用 Hook
4
  if (count > 0) {
5
    useEffect(() => { ... }, []);            // Hook 2 (条件性触发)
6
  }
7
  const [name, setName] = useState('Alice');  // Hook 3
8
}

异步批量更新#

调用 setState 不会立即改变当前执行流中的 state 变量。 它的本质是向 React 提交一个“更新请求”，并触发下一次渲染。

1
const [count, setCount] = useState(0);
2

3
const handleClick = () => {
4
  setCount(count + 1);
5
  console.log(count); // 打印出来的仍然是 0，而不是 1
6
};

每次渲染，count 都是一个特定时间点的“快照”。在 handleClick 函数被触发的那个渲染周期里，count 的值就是 0。改变状态会触发全新的下一次渲染，在下一次渲染的函数体中，count 才会变成 1。

同时 为了性能优化，React 会将同一个事件处理函数内的多个 setState 操作合并为一次重渲染，避免频繁触发 DOM 更新。

函数式状态更新#

当新的状态高度依赖于前一次的状态，或者在异步闭包（如 setTimeout）中需要获取最新状态时，应当向 setState 传入一个回调函数，而不是具体的值：

1
// 假设 count 当前为 0
2
setCount(prevCount => prevCount + 1); // 接收最新状态，返回新状态
3
setCount(prevCount => prevCount + 1);
4

5
// 最终视图上 count 会变成 2。如果写成 setCount(count + 1)，最终只会是 1。

惰性初始化#

如果初始状态需要经过复杂的计算（例如读取 localStorage、进行大量运算），可以直接传一个函数给 useState：

1
const [data, setData] = useState(() => {
2
  const saved = localStorage.getItem('key');
3
  return saved ? JSON.parse(saved) : defaultValue;
4
});

这个函数只在组件首次渲染时执行一次，之后的渲染都会忽略它。如果直接写 useState(func())，则该表达式会在每次渲染时都执行（即使结果被丢弃），造成性能浪费。

当一个 useState 在 Mount 时被初始化，React 会在对应的 Hook 链表节点上挂载一个 queue（更新队列）对象。

每当你调用 setState(x) 时，React 并不会马上计算出最终结果，而是把 x 作为一个 Update 动作推入该 Hook 节点的更新队列中。当 React 调度器（Scheduler）开始处理该组件的重渲染时，会遍历这个队列，依次应用这些更新动作，最终计算出最新的状态值并付诸渲染。

语法#

1
useEffect(() => {
2
  // 1. 执行副作用逻辑（Effect）
3

4
  return () => {
5
    // 2. 清理资源逻辑（Cleanup）
6
  };
7
}, [dependencies]); // 3. 依赖项数组（Dependency Array）

依赖数组决定了副作用什么时候重新执行，React 调度器在每次重渲染后，会采用 Object.is比对当前渲染周期与上一次渲染周期的依赖项数组：

• 省略依赖项（不传数组）： 副作用在 每次组件渲染完成（包括挂载与更新）后 都会执行。这通常会导致严重的性能问题或死循环。
• 空依赖项数组 []：副作用仅在 组件首次挂载完成（Mount）时 执行一次。这意味着该副作用不依赖任何组件状态的变更。
• 非空依赖项数组 [a, b]： 在首次挂载时，以及后续任何一次渲染中，只要 a 或 b 的引用或值发生改变，副作用就会在渲染完成后重新触发。

当依赖项改变触发组件重渲染时，React 的内部执行顺序如下：

1. 组件完成重渲染并更新 DOM。
2. 执行上一次渲染所产生的副作用的清理函数。（擦除旧的副作用）
3. 执行当前渲染所产生的新的副作用函数。（建立新的副作用）

清理函数#

useEffect 允许返回一个函数作为清理器。清理器的执行并不是在组件销毁时才发生，React 会在两个时间点调用它：

1. 组件卸载时
2. 下一次副作用执行前

这是保证不产生内存泄漏的关键，比如清除定时器、取消订阅。

1
useEffect(
2
  function () {
3
    const timer = setInterval(() => {
4
      setCount(count => count + 1)
5
    }, 1000)
6
    return () => clearInterval(timer)
7
  },
8
  [setCount],
9
)

如果组件已卸载，但之前的异步操作或订阅仍然存在，会导致错误或内存泄漏。

使用#

1
useEffect(() => {
2
  const timer = setTimeout(() => {
3
    setCount(c => c + 1);
4
  }, 2000);
5
  return () => clearTimeout(timer);
6
}, []); // 依赖缺了 setCount

1
useEffect(() => {
2
  let cancelled = false;
3
  async function fetchData() {
4
    const result = await api.get(userId);
5
    if (!cancelled) {
6
      setData(result);
7
    }
8
  }
9
  fetchData();
10
  return () => { cancelled = true; }; // 防止组件卸载后设置状态
11
}, [userId]);

1
useEffect(() => {
2
  const handleResize = () => setWidth(window.innerWidth);
3
  window.addEventListener('resize', handleResize);
4
  return () => window.removeEventListener('resize', handleResize);
5
}, []);

语法#

useRef 返回一个普通的 JavaScript 对象，该对象有一个 current 属性。useRef 返回的 refContainer 对象的内存地址，在组件的整个生命周期内是绝对不变的。无论组件因为状态改变重新渲染了多少次，React 始终返回最初 Mount 时创建的同一个对象。虽然外层的对象引用不可变，但其唯一的属性 .current 是完全可变的。你可以随时对其进行读写操作（如 refContainer.current = newValue）。

1
const refContainer = useRef(initialValue);

• initialValue：current 属性的初始值，可以是任何类型。
• refContainer 在每次渲染时都是同一个对象引用。

useRef 同样会在组件的 Hook 链表上创建一个节点，保存 { current: initialValue } 这个对象。因为每次渲染返回的都是同一个内存对象，所以修改 ref.current 不会导致节点本身发生变化，React 自然也不会去触发重渲染。

用法#

1
function TextInputWithFocusButton() {
2
  const inputRef = useRef(null);
3

4
  const focusInput = () => {
5
    // 直接访问 DOM 元素并调用 focus 方法
6
    inputRef.current.focus();
7
  };
8

9
  return (
10
    <>
11
      <input ref={inputRef} type="text" />
12
      <button onClick={focusInput}>聚焦输入框</button>
13
    </>
14
  );
15
}

1
function Timer() {
2
  const intervalRef = useRef(null);
3
  const [count, setCount] = useState(0);
4

5
  const start = () => {
6
    // 把定时器 ID 存在 ref 里，清理时用
7
    intervalRef.current = setInterval(() => {
8
      setCount(c => c + 1);
9
    }, 1000);
10
  };
11

12
  const stop = () => {
13
    clearInterval(intervalRef.current);
14
  };
15

16
  // 组件卸载时清理定时器
17
  useEffect(() => {
18
    return () => clearInterval(intervalRef.current);
19
  }, []);
20

21
  return (
22
    <div>
23
      <p>{count}</p>
24
      <button onClick={start}>开始</button>
25
      <button onClick={stop}>停止</button>
26
    </div>
27
  );
28
}

与 useState() 的区别#

判断数据是否应放在 ref 还是 state 的核心标准是：该数据变化时是否需要重新渲染界面。

React 的官方文档明确指出：不要在渲染期间读取或写入 ref.current（除了初始化）。组件的渲染过程可能会被中断然后重新执行。如果渲染时修改了 ref，那么这种修改可能会被多次应用，产生不可预测的结果。 一般在 useEffect / useLayoutEffect 内部，或者在 事件处理函数 内部对 .current 进行读写。

基本语法#

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

• state：当前状态。通常是一个复杂的 JavaScript 对象（例如包含表单数据、加载状态、错误信息的复合体）。与 useState 一样，这里的状态同样不可变
• dispatch：一个函数，它是组件触发状态变更的唯一方式。调用它并传入 action 对象，如 dispatch({ type: 'increment' })，React 会将当前 state 和该 action 交给 reducer，用返回值作为新状态，并触发重渲染。
• reducer：形如 (state, action) => newState 的纯函数，负责根据 action 计算出新状态。action 通常包含两个标准属性：type：字符串常量，表示行为的唯一类型（如 'FETCH_START'）。payload：附带的业务数据负载（如 API 返回的数据包）。
• initialState：初始状态值 。
• init（可选）：惰性初始化函数，签名 (initialArg) => initialState，用于从传入的参数中计算初始状态。

当遇到以下情况时，useReducer 会比 useState 更合适：

1. 状态之间有复杂的依赖关系

   例如表单有多个字段互相影响，使用多个 useState 容易产生多个分散的 setXxx 调用，且不易追踪整体逻辑。

2. 下一个状态强依赖前一个状态

   在 useState 中必须用函数式更新 setState(prev => ...)，但若更新逻辑很复杂（如根据前一个状态的多个属性计算新状态），函数式更新会变得冗长。useReducer 直接在 reducer 函数中拿到最新的 state，编写逻辑更自然。

3. 需要将 dispatch 传递给深层子组件，避免回调重新创建

   React 保证 dispatch 函数在组件生命周期内引用稳定（和 useState 的 setState 一样），所以它不用写进 useCallback 的依赖中，可安全传给子组件。

计数器示例#

1
import React, { useReducer } from 'react';
2

3
// 定义初始状态
4
const initialState = { count: 0, error: null };
5

6
// 编写 Reducer 纯函数
7
function counterReducer(state, action) {
8
  switch (action.type) {
9
    case 'INCREMENT':
10
      return { ...state, count: state.count + 1 };
11
    case 'DECREMENT':
12
      return { ...state, count: Math.max(0, state.count - 1) };
13
    case 'SET_ERROR':
14
      return { ...state, error: action.payload };
15
    case 'RESET':
16
      return initialState;
17
    default:
18
      // 遇到未定义的 Action 时抛出错误或返回原状态
19
      throw new Error(`Unhandled action type: ${action.type}`);
20
  }
21
}
22

23
// 组件内部集成
24
function CounterComponent() {
25
  const [state, dispatch] = useReducer(counterReducer, initialState);
26

27
  return (
28
    <div>
29
      <p>当前计数: {state.count}</p>
30
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
31

32
      {/* 组件不直接修改状态，只通过 dispatch 宣告行为 */}
33
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
34
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>减少</button>
35
      <button onClick={() => dispatch({ type: 'SET_ERROR', payload: '触发一次模拟错误' })}>
36
        报错
37
      </button>
38
    </div>
39
  );
40
}

更新逻辑全部在 reducer 里，组件本身只是通过 dispatch 发“命令”（action）。

惰性初始化#

如果初始状态需要从 props 或其他数据中计算得出，你可以传入第三个参数 init：

1
function init(initialCount) {
2
  return { count: initialCount };
3
}
4

5
function Counter({ initialCount }) {
6
  const [state, dispatch] = useReducer(reducer, initialCount, init);
7
  // ...
8
}

init() 接收当前的初始状态值，并将返回值作为最新的状态值返回给 state，init(initialCount) 只会在首次渲染时执行。

与 useState() 区别#

• 如果状态更新有多种操作类型（如增、删、改、重置），useReducer 更清晰。
• 如果只是简单的 toggle 或文本输入，useState 完全足够。

注：

1. reducer 必须是纯函数

   不能在里面执行副作用（如网络请求、修改 DOM），副作用应放在 useEffect 中。

2. action 通常是一个对象 { type, payload? }

   这是约定俗成的惯例，但非强制。也可以自行定义 action 的结构，只要 reducer 能识别。

3. dispatch 是稳定的引用

   与 useState 的 setState 一样，dispatch 不会在重渲染时变化，所以可以安全地传给子组件而无需 useCallback。

4. 状态更新是批处理的

   同 useState，多次 dispatch 在事件处理函数中会被批处理，React 会等到事件处理结束再统一应用所有更新。

5. 遵循 Hook 链表顺序

   useReducer 同样在组件的 Hook 链表中占据一个节点，按顺序存储状态。调用 dispatch 时，React 会标记更新，重渲染时按顺序读出状态，而不会重新调用 reducer 来计算当前状态（reducer 只在 dispatch 时运行）。

基本语法#

1
import { createContext } from 'react';
2

3
export const ThemeContext = createContext('light'); // 参数为默认值

1
import { ThemeContext } from './ThemeContext';
2

3
function App() {
4
  const [theme, setTheme] = useState('dark');
5

6
  return (
7
    <ThemeContext.Provider value={{ theme, setTheme }}>
8
      <Toolbar />
9
    </ThemeContext.Provider>
10
  );
11
}

1
import { useContext } from 'react';
2
import { ThemeContext } from './ThemeContext';
3

4
function Toolbar() {
5
  // 直接拿到 App 中提供的 theme 和 setTheme
6
  const { theme, setTheme } = useContext(ThemeContext);
7

8
  return (
9
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
10
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
11
        切换主题
12
      </button>
13
    </div>
14
  );
15
}

与 useReducer 配合实现全局状态管理#

1
const AppContext = createContext();
2

3
function reducer(state, action) {
4
  switch (action.type) {
5
    case 'login': return { ...state, user: action.payload };
6
    case 'logout': return { ...state, user: null };
7
    default: return state;
8
  }
9
}
10

11
export function AppProvider({ children }) {
12
  const [state, dispatch] = useReducer(reducer, { user: null });
13
  return (
14
    <AppContext.Provider value={state, dispatch}>
15
      {children}
16
    </AppContext.Provider>
17
  );
18
}
19

20
// 自定义 Hook，封装 useContext 调用
21
export function useApp() {
22
  const context = useContext(AppContext);
23
  if (context === undifined) throw new Error('AppContext must used AppProvider');
24
  return context;
25
}

任何在 <AppProvider></AppProvider> 包裹的子组件都可以调用 useApp() 获取 state 和 dispatch 。