Избегайте «&&» в условном рендеринге React

При создании приложения React обычно условно отображают компоненты на основе определенных критериев. Один из способов сделать это — использовать оператор «&&» в JSX для условного рендеринга компонента. Хотя на первый взгляд этот подход может показаться удобным, есть несколько причин, по которым его следует избегать.

Прежде чем углубляться в причины, по которым следует избегать «&&» при условном рендеринге в React, давайте сначала посмотрим, как это работает. Оператор «&&» в JavaScript обычно используется для оценки двух выражений и возвращения результата второго выражения если первое выражение истинно. В контексте React это можно использовать для условного рендеринга компонента, если выполняется определенное условие. Вот пример:

function MyComponent(props) {
  const isLoggedIn = props.isLoggedIn;
  
  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
}

В этом примере тег <p> будет отображаться только в том случае, если реквизит isLoggedIn верен. Если isLoggedIn является ложным, тег <p> не будет отображаться. Поскольку isLoggedIn будет логическим значением, значение false также не будет отображаться.

Хотя этот подход может показаться удобным, есть несколько причин, по которым его следует избегать.

Это может привести к коду, который трудно читать и понимать.

Использование «&&» для условного рендеринга компонентов может затруднить чтение и понимание кода, особенно для разработчиков, которые плохо знакомы с React. В некоторых случаях может быть более понятно использовать оператор if или тернарный оператор для условной визуализации компонента.

Это может привести к неожиданному поведению

Использование «&&» для условного рендеринга компонентов может привести к неожиданному поведению, если условие не определено должным образом. Например, если условие представляет собой сложное выражение, его результат может не всегда соответствовать ожидаемому значению.

Например, в JavaScript число 0 считается ложным, что означает, что оно будет отображаться при использовании с оператором «&&». Это может привести к неожиданному поведению, если мы не хотим, чтобы отображался 0.

Рассмотрим следующий пример:

function MyComponent(props) {
  const count = props.count;
  
  return (
    <div>
      {count && <p>Count: {count}</p>}
    </div>
  );
}

В этом примере, если реквизит count равен 0, тег <p> не будет отображаться, но переменная {count} будет. Такое поведение может быть нежелательным, если 0 является допустимым значением для count.

Это может затруднить отладку

Использование «&&» для условного рендеринга компонентов может усложнить отладку, особенно если необходимо оценить несколько условий. Если есть ошибки или проблемы с кодом, может быть сложнее определить точное местонахождение проблемы.

Это может ограничить гибкость кода

Использование «&&» для условного рендеринга компонентов может ограничить гибкость кода. Если в будущем потребуется более сложная логика, возможно, этого не удастся достичь с помощью этого подхода.

Итак, каков рекомендуемый подход для условного рендеринга компонентов в React? Одним из распространенных подходов является использование оператора if или тернарного оператора. Вот пример использования тернарного оператора:

function MyComponent(props) {
  const { count } = props;
  
  return (
    <div>
      {count >= 0 ? <p>Count: {count}</p> : false}
    </div>
  );
}

В этом примере тег <p> будет отображаться, если свойство count равно 0 или больше, и false в противном случае будет возвращено. Этот подход более явный и может упростить чтение и понимание кода.

В заключение, хотя использование «&&» для условного рендеринга компонентов поначалу может показаться удобным, его следует избегать в пользу более явных подходов, таких как операторы if или тернарные операторы, которые могут упростить код для анализа. и отлаживать. Избегая «&&», вы можете сделать свой код более читабельным, снизить вероятность неожиданного поведения и упростить отладку.