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

【问题标题】：React: How can I make this React Component written better to be more efficient?React：我怎样才能让这个 React 组件写得更好更高效？
【发布时间】：2021-11-06 17:04:08
【问题描述】：

React：我怎样才能让这个 React 组件写得更好更高效？我觉得我在重复 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。如果有实际问题，请澄清并提出更具体的问题。

标签： reactjs typescript react-native components

【解决方案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