Что это за условный рендеринг для JSX?

Question

Как называется эта концепция и как ее читать?

        {!auth.loading && user === auth.user._id && (
          <button type="button" className="btn btn-danger">
            <i className="fas fa-times"></i>
          </button>
        )}

Я предполагаю, что «если auth не загружается, а пользователь равен auth.user, то показывать кнопку», но почему? Что означает двойной амперсанд?

Answer 1

В случае оператора AND выражение вычисляется до тех пор, пока одно из условий не станет ложным, потому что результат всегда будет ложным, независимо от дальнейших условий.

выражение будет оцениваться слева направо и закоротит , т.е. вычисление выражения прекратится, как только любое из подвыражений окажется ложным.

JSX будет отображаться, если:

1. auth.loading ложно

AND

user === auth.user._id истинно

Условный рендеринг можно понять как:

(first expression) && (second expression) && JSX

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

Аналогично, если первое выражение имеет значение true, а второе выражение - false, JSX не будет отображаться.

Если первое выражение оценивается как true и второе выражение также оценивается как true, тогда true && true && JSX будет оцениваться как JSX

Подробности можно найти в разделе условного рендеринга документации React.

Answer 2

Двойной амперсанд (&&) означает оператор логического И .

В предоставленном вами коде используется оценка короткого замыкания, чтобы определить, отображать ли button или не. Для упрощения кода, если auth.loading ложно, а user === auth.user._id истинно, тогда будет отображаться button.

Подробнее об оценке короткого замыкания с помощью логического оператора И

expression 1 && expression 2

В приведенном выше случае, если expression 1 является ложным, expression 2 не будет оцениваться, потому что, оценивается ли expression 2 как истинное или ложное, результат объединенного выражения будет false, потому что оба выражения должны быть истинными, чтобы объединенное выражение оценивалось как истинное.

Пример,

const funcOne = () => { console.log('called funcOne'); return false; }
const funcTwo = () => { console.log('called funcTwo'); return true; }

console.log( funcOne() && funcTwo() );

// in the case above funcTwo will not be called because 
// the firstpart of the expression funcOne() && funcTwo()
// evaluates to false (the return value of funcOne is false)

Использование оценки короткого замыкания с React

Имейте в виду, JSX - это просто синтаксис c сахар для вызов функции, <button>Hello</button> будет преобразован в вызов функции React.createElement за сценой. Вот почему визуализация JSX с оценкой короткого замыкания ничем не отличается от использования оценки короткого замыкания с обычными вызовами функций.

expr1 && expr2 && <button>Hello</button>

// will be converted to
expr1 && expr2 && React.createElement("button", null, "Hello");

// so if expr1 or expr2 evaluate to false React.createElement will not be -
// called, both expr1 and expr2 have to evaluate to true for the- 
// React.createElement function to be called