如何优化React ButtonStepper组件 重构onIncrement减少重复代码提升效率

原有问题梳理 #

• onIncrement 方法存在完全重复的赋值逻辑，冗余度高
• 原有逻辑存在bug：当当前值已经大于等于maxValue时仍然执行递增操作，不符合步进器的常规交互逻辑
• 多处对可选参数的判空逻辑可以简化，提升可读性

优化后完整代码 #

// TypeScript Type: Props
interface IProps {
  onChange: (value: number) => void;
  minValue?: number;
  maxValue?: number;
  stepValue?: number;
}

// Component: Button (Stepper)
const ButtonStepper = ({ 
  onChange, 
  minValue = 0, 
  maxValue = Infinity, 
  stepValue = 1 
}: IProps): JSX.Element => {
  // React Hooks: State
  const [value, setValue] = useState<number>(minValue);

  // React Hooks: Lifecycle Methods
  useEffect(() => {
    onChange(value);
  }, [onChange, value]);

  // On Increment
  const onIncrement = (): void => {
    setValue(prev => {
      const nextValue = prev + stepValue;
      // 超过最大值时不更新
      return nextValue > maxValue ? prev : nextValue;
    });
  };
};

核心优化点 #

• 给可选参数设置默认值：minValue默认0、stepValue默认1、maxValue默认无穷大，省去所有判空逻辑，代码更简洁
• 合并onIncrement的重复逻辑：所有计算都放在setValue的回调函数中处理，单次判断即可完成值的合法性校验，没有任何重复代码
• 修复原有逻辑bug：新增最大值拦截逻辑，当递增后的值超过maxValue时直接返回原有值，符合步进器的正常交互
• 性能提升：减少了多次条件判断，单次遍历即可完成计算，同时setValue只调用一次，减少重渲染触发概率

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