使用useRef获取输入值时添加掩码并避免重复渲染的方案咨询

嘿，这个需求完全可以实现！核心就是绕开React的state更新机制，直接用useRef操作DOM来处理掩码，这样输入时就不会触发组件重渲染，完美兼顾性能和用户体验。

先修正原代码的小问题 #

你原来的inputIcon.js里出现了递归引用（返回<InputIcon />），这会导致报错，应该替换成实际的<input />元素，我会在下面的示例里修正这个问题。

核心实现思路 #

1. 用useRef保存输入框的DOM节点，直接操作它的value属性，避免通过setState触发重渲染
2. 在输入事件（推荐用onInput，比onChange更实时）中处理掩码逻辑，同步更新DOM值
3. 保留回调函数同步处理后的值到父组件（如果需要后续业务逻辑，比如表单提交）

完整代码示例 #

父组件 Login.js

import React, { useRef, useCallback } from 'react';
import InputIcon from './inputIcon';

export default function Login() {
  const inputUserRef = useRef(null);
  
  // 这里处理掩码后的业务逻辑，不会触发组件重渲染
  const functionUpdateValueInputUser = useCallback((maskedValue) => {
    console.log('处理后的掩码值:', maskedValue);
    // 可以在这里做验证、保存到全局状态（比如Redux）等操作
  }, []);

  return ( 
    <InputIcon 
      inputRef={inputUserRef} 
      functionUpdatedValueRef={functionUpdateValueInputUser}
      // 传入手机号的验证规则（只允许输入11位数字，开头为1[3-9]）
      maskPattern={/^1[3-9]\d{0,9}$/}
      // 自定义掩码格式化：中间四位替换为****
      maskFormat={(rawValue) => {
        if (rawValue.length <= 3) return rawValue;
        if (rawValue.length <= 7) return `${rawValue.slice(0,3)}****${rawValue.slice(7)}`;
        return `${rawValue.slice(0,3)}****${rawValue.slice(7,11)}`;
      }}
    /> 
  )
}

子组件 inputIcon.js

import React from 'react';

export default function InputIcon({ 
  inputRef, 
  functionUpdatedValueRef,
  maskPattern,
  maskFormat
}){
  const handleInput = (e) => {
    // 1. 获取原始输入值，先过滤非数字字符（根据需求调整）
    let rawValue = e.target.value.replace(/[^\d]/g, '');
    
    // 2. 验证输入是否符合规则，截断不符合的部分
    if (maskPattern) {
      // 匹配规则允许的最大长度
      const maxLength = maskPattern.source.match(/\d{0,(\d+)}/)?.[1] || 11;
      rawValue = rawValue.slice(0, maxLength);
      // 如果不符合开头规则，清空最后一位（可选）
      if (!maskPattern.test(rawValue)) {
        rawValue = rawValue.slice(0, rawValue.length - 1);
      }
    }
    
    // 3. 应用掩码格式化
    const maskedValue = maskFormat ? maskFormat(rawValue) : rawValue;
    
    // 4. 直接更新DOM值，不触发React重渲染
    if (inputRef.current) {
      inputRef.current.value = maskedValue;
    }
    
    // 5. 同步处理后的值到父组件
    if (functionUpdatedValueRef) {
      functionUpdatedValueRef(maskedValue);
    }
  };

  return ( 
    <input 
      ref={inputRef}
      onInput={handleInput}
      type="text"
      placeholder="请输入手机号"
    /> 
  )
}

为什么这样能优化性能？ #

• 全程没有使用useState保存输入值，输入操作不会触发任何组件的重渲染（包括父组件和子组件）
• 直接操作DOM的value属性是原生浏览器操作，性能开销极低
• 掩码处理在输入事件中同步完成，用户体验和普通输入框完全一致

额外优化建议 #

• 如果需要设置默认值，直接在组件挂载后通过inputRef.current.value = defaultValue赋值，不要用state
• 对于复杂掩码（比如银行卡号每4位加空格），可以调整maskFormat函数：

  const maskFormat = (rawValue) => {
    return rawValue.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
  }
  

• 如果需要支持退格、删除等操作，当前逻辑已经兼容，因为onInput会捕获所有输入变化

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