antd 的 usePropsValue 的使用场景和源码解析

原创

已于 2025-05-26 14:33:26 修改 · 440 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

于 2025-03-27 15:31:54 首次发布

`usePropsValue` 是 Ant Design 提供的一个自定义 Hook，用于处理受控和非受控组件的值管理。它可以帮助开发者轻松地在受控模式和非受控模式之间切换，同时简化组件的状态管理逻辑。

功能

usePropsValue 的主要功能是：

支持受控模式：
- 如果传入了 value 和 onChange 属性，usePropsValue 会将组件视为受控组件，value 的值完全由外部控制，组件内部不会维护状态。
支持非受控模式：
- 如果没有传入 value，但传入了 defaultValue，usePropsValue 会将组件视为非受控组件，内部会维护状态。
简化逻辑：
- 自动处理受控和非受控模式的切换，避免开发者手动编写复杂的逻辑。

使用场景

usePropsValue 通常用于开发需要支持受控和非受控模式的组件，例如表单组件（Input、Select 等）。

示例代码

以下是一个使用 usePropsValue 的示例，展示如何在自定义组件中使用它：

示例：自定义输入框组件

import React from 'react';
import {
   
    usePropsValue } from 'ahooks';

interface CustomInputProps {
   
   
  value?: string; // 受控模式的值
  defaultValue?: string; // 非受控模式的默认值
  onChange?: (value: string) => void; // 值变化时的回调
}

const CustomInput: React.FC<CustomInputProps> = (props) => {
   
   
  // 使用 usePropsValue 管理受控和非受控模式
  const [value, setValue] = usePropsValue({
   
   
    value: props.value,
    defaultValue: props.defaultValue,
    onChange: props.onChange,
  });

  return (
    <input
      value={
   
   value}
      onChange={
   
   (e) => setValue(e.target.value)}
      placeholder