Пишите чистые компоненты React с помощью Guard Clauses

Убейте ад отступов в своем коде

Очень вероятно, что вы столкнулись с кодом, который трудно читать из-за вложенных операторов if/else. В этой статье представлена ​​общая техника программирования, которая поможет вам избежать этого и писать более чистый код без адских отступов.

Этот метод называется защитные оговорки и не ограничивается только React, JavaScript или любым другим языком программирования.

⛔ Без защитных оговорок

Лучший способ понять защитные предложения — это использовать код — в качестве примера я использую компонент React, но он применим к любой функции.

В приведенном ниже коде вы можете увидеть функцию, которая использует несколько вложенных операторов if/else. Уже на первый взгляд функция излишне тяжело читается из-за вложенных условий и отступов. Это может стать еще хуже, если позже функцию нужно будет расширить дополнительными условиями.

function User({ isLoading, error, user }) {
  if (isLoading) {
    return 'Loading...';
  } else {
    if (error) {
      return `Something went wrong: ${error.message}`;
    } else {
      if (!user) {
        return 'User not found.';
      } else {
        return (
          <div>
            <h2>{user.name}</h2>
            <h3>{user.bio}</h3>
            <img src={user.image} />
          </div>
        );
      }
    }
  }
}

✅ С охранными оговорками

К счастью, есть лучший способ написать ту же функцию с простым рефакторингом с помощью защитных предложений. Проверьте рефакторинг функции ниже:

function User({ isLoading, error, user }) {
  if (isLoading) {
    return 'Loading...';
  }

  if (error) {
    return `Something went wrong: ${error.message}`;
  }

  if (!user) {
    return 'User not found.';
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <h3>{user.bio}</h3>
      <img src={user.image} />
    </div>
  );
}

Какая разница?

Защитные оговорки проверяют все предварительные условия, которые должны быть выполнены, прежде чем будет запущен счастливый путь. Чтобы избежать многоуровневых вложенных операторов if/else, вы выходите из функции раньше — как только предварительное условие не выполняется. Это означает, что вы делаете код более плоским, и как только вы достигаете «сценария успеха», , вам не нужно помнить обо всех условиях. Вместо этого вы можете сосредоточиться только на основной логике.

Если вам понравилась эта статья, подпишитесь на меня, чтобы получать новые советы по разработке с помощью React, JavaScript, TypeScript и т. д.!

Становиться участником

Если вам нравится читать такие истории и вы хотите поддержать меня как автора, подумайте о том, чтобы зарегистрироваться, чтобы стать участником Medium. Это $5 в месяц, что дает вам неограниченный доступ к историям на Medium. Если вы зарегистрируетесь по моей ссылке, я получу небольшую комиссию🙌