Mantine 7.17.0 发布：表单验证增强与性能优化

项目简介

Mantine 是一个基于 React 的现代 UI 组件库，提供了丰富的预构建组件和工具，帮助开发者快速构建美观且功能完善的用户界面。它以其模块化设计、主题定制能力和出色的开发体验而闻名。

核心更新内容

1. Portal 组件性能优化

新版本引入了 reuseTargetNode 属性，这是一个重要的性能优化特性。当多个 Portal 组件需要渲染到同一个目标节点时，启用此选项可以复用相同的 DOM 节点，而不是为每个 Portal 创建新的节点。

技术实现原理：

• 传统方式：每个 Portal 实例创建独立的 DOM 节点
• 新方式：所有 Portal 实例共享同一个目标节点
• 性能提升：减少 DOM 操作和内存使用

最佳实践： 建议在主题配置中全局启用此优化：

import { createTheme, Portal } from '@mantine/core';

export const theme = createTheme({
  components: {
    Portal: Portal.extend({
      defaultProps: {
        reuseTargetNode: true,
      },
    }),
  },
});

2. 表单验证增强

2.1 表单根规则验证

新增了 formRootRule 验证功能，允许开发者同时对对象/数组及其嵌套字段进行验证。这在复杂表单场景中特别有用，例如：

• 验证数组不为空的同时验证每个数组元素的字段
• 验证对象字段之间的组合关系

典型应用场景：

validate: {
  employees: {
    [formRootRule]: isNotEmpty('至少需要一个员工'),
    name: isNotEmpty('姓名不能为空'),
  }
}

2.2 新增验证器

• isNotEmptyHTML：验证 HTML 字符串是否真正包含内容（过滤空白和纯标签）
• isJSONString：验证字符串是否为有效的 JSON 格式

这些验证器简化了常见但复杂的验证逻辑实现。

3. Popover 组件改进

新增 onDismiss 回调属性，统一处理外部点击和 ESC 键关闭事件，简化了交互逻辑的实现：

<Popover opened={opened} onDismiss={() => setOpened(false)}>
  {/* 内容 */}
</Popover>

4. 测试环境支持

MantineProvider 新增 env="test" 配置，专门为测试环境优化：

• 禁用过渡动画
• 禁用 Portal 功能 确保组件在测试环境中行为更可预测。

5. 新增 use-file-dialog Hook

这个新 Hook 提供了无需文件输入元素即可获取用户文件的能力，API 设计简洁：

const fileDialog = useFileDialog();
// 调用 fileDialog.open() 打开文件选择对话框
// 通过 fileDialog.files 访问选择的文件

其他重要更新

1. Tooltip 组件：新增 middlewares 自定义配置，支持更精细的浮动定位控制
2. ScrollArea 组件：支持 overscrollBehavior 属性，控制滚动边界行为
3. Affix 组件：position 属性现在支持主题间距值
4. Anchor 组件：新增 underline="not-hover" 选项，实现悬停时隐藏下划线效果

版本过渡说明

7.17.0 是 7.x 系列的最后一个次要版本，下一个主要版本 8.0 预计将于 5 月 5 日发布。开发团队承诺在 8.0 发布后仍会为 7.x 版本提供一段时间的错误修复支持。

总结

Mantine 7.17.0 在保持稳定性的同时，带来了多项实用改进，特别是在表单验证和性能优化方面。这些更新体现了 Mantine 团队对开发者体验的持续关注，为构建更复杂、更高效的应用提供了更好的工具支持。对于即将到来的 8.0 版本，开发者可以提前预览变更并提供反馈，共同塑造框架的未来发展方向。