Ant Design 中 Hook 式 Message 组件在异步请求中的使用问题解析

问题现象

在使用 Ant Design 的 hook 式 message 组件时，当与异步请求结合使用时，开发者可能会遇到以下问题：

1. 消息提示不展示
2. 控制台出现警告："Warning: [antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead."

问题本质

这个问题源于 React 18 的并发模式(Concurrent Mode)对渲染过程的严格限制。在并发模式下，React 会对渲染过程进行更精细的控制，允许中断和恢复渲染工作。如果在渲染过程中直接调用 message 这样的副作用操作，会导致不可预期的行为。

技术背景

React 18 并发模式

React 18 引入的并发模式是一种新的渲染机制，它允许 React 在渲染过程中中断当前工作，处理更高优先级的更新，然后再返回继续渲染。这种机制提高了应用的响应能力，但也对副作用操作提出了更严格的要求。

Ant Design Message 组件

Ant Design 提供了两种使用 Message 的方式：

1. 静态方法：message.success(), message.error() 等
2. Hook 方式：const [messageApi, contextHolder] = message.useMessage()

解决方案

1. 使用静态方法

对于简单的异步请求场景，可以直接使用静态方法：

const handleSearch = async (value) => {
  try {
    await fetchData(value);
    message.success('请求成功');
  } catch (error) {
    message.error('请求失败');
  }
};

2. 正确使用 Hook 方式

当需要使用 Hook 方式时，确保在事件处理函数中调用 messageApi：

const SearchComponent = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const handleSearch = async (value) => {
    try {
      await fetchData(value);
      messageApi.success('请求成功');
    } catch (error) {
      messageApi.error('请求失败');
    }
  };

  return (
    <div>
      {contextHolder}
      <Search placeholder="输入搜索内容" onSearch={handleSearch} />
    </div>
  );
};

3. 避免在渲染过程中调用

以下是不正确的用法，会导致警告：

// 错误示例：在渲染过程中直接调用
const SearchComponent = () => {
  const [messageApi, contextHolder] = message.useMessage();
  
  // 错误：在渲染过程中调用
  messageApi.success('渲染消息');
  
  return (
    <div>
      {contextHolder}
      <Search placeholder="输入搜索内容" />
    </div>
  );
};

最佳实践

1. 将消息提示与用户操作绑定：消息提示应该是对用户操作的反馈，因此最好在事件处理函数中触发。

2. 合理使用 Hook 方式：当组件需要显示多个不同位置的消息，或者需要更精细控制消息显示时，才需要使用 Hook 方式。

3. 考虑使用状态管理：对于复杂的应用，可以考虑将消息提示逻辑封装到状态管理(如 Redux)中，通过 action 触发消息显示。

总结

Ant Design 的 hook 式 message 组件在异步请求中的使用问题，本质上是 React 18 并发模式对副作用操作的新要求。开发者需要理解 React 的渲染机制，将消息提示操作放在适当的时机执行，通常是事件处理函数或 useEffect 中。通过遵循这些原则，可以避免警告信息，同时确保消息提示功能正常工作。