antd组件库

• React

React Antd 组件库

概述 (20%)

Ant Design 是企业级的 UI 设计语言和 React 组件库，提供了丰富的组件和设计规范。在实际项目中，经常需要进行样式重置和自定义来满足设计需求。

详细实现 (80%)

样式重置

在使用 Antd 组件库时，样式重置是确保设计一致性的重要步骤。

UnoCSS Reset 兼容方案

若使用 UnoCSS 的 reset，优先选择兼容版本：

import '@unocss/reset/tailwind-compat.css'

这个兼容版本替代默认 reset，能够减少对 UI 框架的样式冲突影响。

样式自定义

Antd 提供了多种样式自定义方案，根据版本选择合适的方法。

v5以上版本 - CSS变量方案

v5及以上版本可以使用现代的CSS变量进行主题定制：

:root {
  --ant-primary-color: #1890ff;
  --ant-success-color: #52c41a;
  --ant-warning-color: #faad14;
}

v5以下版本 - Less变量方案

v5以下版本需要使用Less变量进行主题定制：

@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;

参考资源

详细的样式定制指南可以参考：https://zhuanlan.zhihu.com/p/546697951?utm_id=0

相关链接

• base::UI组件库

Form.useWatch

child::

form.useWatch示例

same::

Form字段监听

• React

梗概

Form.useWatch 是Antd提供的Hook，用于监听表单中特定字段的值变化，实现响应式的表单交互。与传统的表单监听方式相比，它更轻量且性能更好。

基本用法

监听单个字段

import React from 'react';
import { Form, Input, Typography } from 'antd';
 
const { Text } = Typography;
 
const WatchSingleField = () => {
  const [form] = Form.useForm();
  const username = Form.useWatch('username', form); // 只监听 username 字段
 
  return (
    <div style={{ maxWidth: 500 }}>
      <Form form={form}>
        <Form.Item name="username" label="用户名">
          <Input />
        </Form.Item>
      </Form>
      
      {/* 只显示 username 字段 */}
      <Text strong style={{ marginTop: 16, display: 'block' }}>
        当前用户名: {username || '未输入'}
      </Text>
    </div>
  );
};
 
export default WatchSingleField;

监听多个字段(建议不要使用， 有bug)

const WatchMultipleFields = () => {
  const [form] = Form.useForm();
  const values = Form.useWatch(['username', 'email'], form);
  
  return (
    <div>
      <Form form={form}>
        <Form.Item name="username" label="用户名">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
      </Form>
      
      <div>
        <p>用户名: {values?.username}</p>
        <p>邮箱: {values?.email}</p>
      </div>
    </div>
  );
};

监听所有字段

const WatchAllFields = () => {
  const [form] = Form.useForm();
  const values = Form.useWatch([], form); // 空数组表示监听所有字段
  
  return (
    <div>
      <Form form={form}>
        {/* 表单项 */}
      </Form>
      
      <pre>{JSON.stringify(values, null, 2)}</pre>
    </div>
  );
};

应用场景

实时表单验证

根据字段值变化进行实时验证提示

条件显示/隐藏

根据某个字段的值决定其他字段是否显示

计算衍生值

根据多个字段值计算出新的值进行显示

性能优化

• Form.useWatch 只会在监听的字段发生变化时才触发重新渲染
• 相比监听整个表单值，监听特定字段性能更好
• 可以配合React.memo进一步优化性能

相关概念

• 表单传值
• Vue的watch对比
• React监听机制

father:: antd

指向原始笔记的链接

指向原始笔记的链接

• related::UI组件库