React计算器：处理连续操作符替换，该用useEffect还是useRef？

问题描述 #

我开发了一个具备计算功能的React组件，使用<textarea>渲染用户输入。当前需求未实现：当用户输入类似45+/的内容时，需要将前一个操作符+替换为新输入的/，避免连续出现操作符。

按钮输入场景已实现该逻辑，代码如下：

const handleDrawNumber = (input) => {
    const operators = ["/", "*", "+", "-", "%", "."];

    if (operators.includes(input)) {
      if (operators.includes(result[result.length - 1])) {
        setResult(result.slice(0, result.length - 1) + input);
      } else {
        setResult(result + input);
      }
    } else {
      setResult(result + input);
    }
  };

但处理键盘输入时，尝试以下代码未解决问题，询问是否应该使用useEffect或useRef实现该需求：

useEffect(() => {
    console.log("RESULT: " + result);
    console.log("RESULT LENGHT: " + result.length);
    const operators = ["/", "*", "+", "-", "%", "."];
    const handleInput = (input) => {
      if (operators.includes(result[result.length - 1])) {
        const array = result;
        console.log("YES");
        setResult(array.slice(0, array.length - 1) + input);
      } 
    };

    handleInput();
  }, [result]);
////////////////////////////////////////
const handleFromKeyBoard = (input) => {
    setResult(input.target.value);
  };

解决方案：无需useEffect或useRef，直接在键盘输入处理函数中复用校验逻辑 #

你的核心问题是键盘输入时直接将textarea的原始值同步到state，未执行操作符重复校验，完全不需要依赖useEffect或useRef——前者会触发额外渲染循环，后者属于不必要的复杂度，直接在输入事件处理阶段完成校验即可。

修正后的键盘输入处理函数 #

复用按钮输入的校验逻辑，直接修改handleFromKeyBoard：

// 把操作符数组提取为全局常量，避免重复定义
const OPERATORS = ["/", "*", "+", "-", "%", "."];

const handleFromKeyBoard = (e) => {
  const newValue = e.target.value;
  
  // 仅当新输入的最后两个字符都是操作符时，执行替换
  if (newValue.length >= 2) {
    const lastChar = newValue.at(-1);
    const secondLastChar = newValue.at(-2);
    
    if (OPERATORS.includes(lastChar) && OPERATORS.includes(secondLastChar)) {
      // 移除倒数第二个操作符，保留最新输入的那个
      setResult(newValue.slice(0, -2) + lastChar);
      return;
    }
  }
  
  // 其他情况直接同步输入内容
  setResult(newValue);
};

为什么不推荐useEffect？ #

你之前的useEffect写法存在明显问题：handleInput未传入有效参数，且每次result更新都会触发回调，会导致重复修改state，引发不必要的渲染循环，甚至出现输入闪烁的异常。

为什么不需要useRef？ #

useRef多用于保存无需触发组件渲染的变量（如DOM引用、临时状态），但此处我们的逻辑是处理用户输入并更新响应式state，完全可以在输入事件处理函数中直接完成，不需要额外的引用变量。

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