React：我怎样才能让这个 React 组件写得更好更高效？

Posted 2023-02-23

【中文标题】React：我怎样才能让这个 React 组件写得更好更高效？

【英文标题】：React: How can I make this React Component written better to be more efficient?

【发布时间】：2021-11-06 17:04:08

【问题描述】：

我觉得我在重复 onIncrement 中的代码，并且可以更好地重构它。 maxValue 属性是可选的

ButtonStepper.tsx：

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


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

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

  // On Increment
  const onIncrement = (): void => 
    if (maxValue && maxValue <= value) 
      if (stepValue) 
        setValue((prevState) => prevState + stepValue);
      
      else 
        setValue((prevState) => prevState + 1);
      
    
    else 
      if (stepValue) 
        setValue((prevState) => prevState + stepValue);
      
      else 
        setValue((prevState) => prevState + 1);
      
    
  ;

【问题讨论】：

好吧，如果我没记错的话，你的外部 if... else... 块正在做同样的事情。有条件maxValue && maxValue <= value 有什么意义？

以想要“更好”或“更高效”开头的问题往往会得到固执己见的回应，因此被认为是偏离主题的 SO。如果这段代码正在运行并且可以工作，那么它可能更适合codereview。如果有实际问题，请澄清并提出更具体的问题。

【参考方案1】：

确保在你的 props 解构中添加默认值。

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

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

  // On Increment
  const onIncrement = (): void => 
    if (maxValue > value + stepValue) 
       setValue(value + stepValue);
    
  ;

【讨论】：

写setValue(value + stepValue);到setValue((prevState) => prevState + stepValue);有什么区别吗？

也感谢您向我介绍Number.MAX_VALUE 和Number.MIN_VALUE。我不知道它存在。

编辑：Number.MIN_VALUE 应替换为 Number.NEGATIVE_INFINITY。 console.log(Number.NEGATIVE_INFINITY < -10) // true 而console.log(Number.MIN_VALUE < -10) // false