Блог

Главная - Вопросы по программированию - Как я могу это улучшить? использование машинописного текста

Как я могу это улучшить? использование машинописного текста

#typescript #react-native

Вопрос:

 const ProgressBarVertical: React.FC<ProgressProps> = ({
  Levelorder,
  currentLevel,
 }) => {
  if (Levelorder === 0) {
       switch (currentLevel) {
         case 0:
           return <View style={styles.progressIncompleteFirst} />
         default:
           return <View style={styles.progressCompleteFirst} />
       }
  } else if (Levelorder > currentLevel) {
     return <View style={styles.progressIncomplete} />
  } else if (Levelorder < currentLevel) {
     return <View style={styles.progressComplete} />
  } else {
     return <View style={styles.progressIncomplete} />
  }

Я был в спешке и выполнил свои условия таким образом, но я чувствую, что все еще могу это улучшить. Может кто-нибудь показать мне, как это сделать?

Комментарии:

1. Репост на CodeReview.SE

2. Вам не нужно так много else if's — просто if() return; достаточно.

Ответ №1:

Как и при любом рефакторинге, ищите вещи, которые повторяются, и старайтесь, чтобы они не повторялись. Первое, что я замечаю, это то, что вы визуализируете <View /> много раз, просто с другой style опорой. Так что, если бы вы сделали это один раз вместо этого?

 const ProgressBarVertical: React.FC<ProgressProps> = ({
  Levelorder,
  currentLevel,
}) => {
    return <View style={getStyle(Levelorder, currentLevel)} />
}

Теперь вы можете реализовать getStyle . Обратите внимание, что с помощью раннего возврата вы можете немного уменьшить количество условных фигурных скобок.

 function getStyle(Levelorder: number, currentLevel: number): ViewStyle {
    if (Levelorder === 0) {
        return currentLevel === 0 ?
            styles.progressIncompleteFirst :
            styles.progressCompleteFirst
    }

    if (Levelorder < currentLevel) return styles.progressComplete
    
    return styles.progressIncomplete
}

Первый if обрабатывает особый случай, когда Levelorder он равен нулю. Второй if обрабатывает завершенное дело, а затем последний просто возвращает единственный другой вариант (равный или больший, чем), если ни один из двух предыдущих возвратов не был выполнен.

Метки: