函数组件中如何实现useState Hook的回调式状态更新

类组件中你可以通过setState的第二个回调参数实现状态更新后的链式操作，但函数组件的useState没有这个参数，我们可以通过**useEffect监听状态变化或者useReducer管理状态流转**来实现相同效果。

方法一：拆分状态 + useEffect监听 #

这是最常用的方案，通过监听状态变化触发后续操作，同时用useRef标记目标流程，避免不必要的触发。

import { useState, useEffect, useRef } from 'react';

function ChatComponent() {
  const [allowScroll, setAllowScroll] = useState(true);
  const [messages, setMessages] = useState([]);
  // 标记是否为当前触发的更新流程
  const isUpdatingFlow = useRef(false);

  // 触发完整更新流程的函数
  const updateMessages = (list) => {
    isUpdatingFlow.current = true;
    // 第一步：关闭滚动
    setAllowScroll(false);
  };

  // 监听allowScroll变为false，触发消息更新
  useEffect(() => {
    if (!allowScroll && isUpdatingFlow.current) {
      setMessages(list); // list为你要更新的消息列表
    }
  }, [allowScroll, list]);

  // 监听消息更新完成，重新开启滚动
  useEffect(() => {
    if (isUpdatingFlow.current) {
      setAllowScroll(true);
      // 重置标记，避免后续其他消息更新触发此逻辑
      isUpdatingFlow.current = false;
    }
  }, [messages]);

  // ... 组件其他逻辑
}

方法二：useReducer管理状态流转 #

如果状态逻辑更复杂，用useReducer可以把所有状态变化的逻辑集中管理，让流程更清晰。

import { useReducer, useEffect } from 'react';

const initialState = {
  allowScroll: true,
  messages: []
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'START_UPDATE':
      return { ...state, allowScroll: false };
    case 'SET_MESSAGES':
      return { ...state, messages: action.payload };
    case 'FINISH_UPDATE':
      return { ...state, allowScroll: true };
    default:
      throw new Error(`Unknown action type: ${action.type}`);
  }
}

function ChatComponent() {
  const [state, dispatch] = useReducer(chatReducer, initialState);
  const { allowScroll, messages } = state;

  const updateMessages = (list) => {
    dispatch({ type: 'START_UPDATE' });
  };

  // 监听滚动关闭状态，触发消息更新
  useEffect(() => {
    if (!allowScroll) {
      dispatch({ type: 'SET_MESSAGES', payload: list });
    }
  }, [allowScroll, list]);

  // 监听消息更新完成，开启滚动
  useEffect(() => {
    dispatch({ type: 'FINISH_UPDATE' });
  }, [messages]);

  // ... 组件其他逻辑
}

关键说明 #

• 函数组件中useState的更新是异步的，不能直接在调用setXxx后立即执行依赖新状态的操作
• useEffect会在状态更新、组件渲染完成后执行，刚好对应类组件中setState回调的时机
• 用useRef标记流程是为了避免其他无关的状态更新触发链式逻辑

内容的提问来源于stack exchange，提问作者Inaara Kalani