5 способов реализовать условный рендеринг в React

Плюсы и минусы различных реализаций условного рендеринга в React.

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

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

Попробуйте использовать концентраторы компонентов, такие как Bit.dev, для публикации, документирования и организации ваших компонентов. Таким образом, все ваши компоненты будут доступны для повторного использования во всех ваших проектах.

1. if-else

Мы можем применить условную логику if-else к JSX в React. Помните, что JSX компилируется в JS перед выполнением, поэтому мы буквально пишем код JS.

Пример

var globalVar = true
function App() {
    if(globalVar) {
        return <div>If Rendering</div>
    } else {
        return <div>Else Rendering</div>
    }
}

Представление

Операторы if-else могут вызвать бесполезные повторные отрисовки в React. Это может не ощущаться в малых и средних приложениях, но снижение производительности будет весьма заметным в больших приложениях с сотнями или тысячами компонентов.

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

render() {
    if(props.showA) {
        return (
            <A />
            <B />
            <C />
        )
    }
    return (
        <B />
        <C />
    )
}

Компоненты A, B, C устанавливаются в зависимости от условий.

Если свойство showA правдиво - визуализируются A, B, C. Если свойство showA ложно, то A пропускается, и отображаются только B и C.

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

Если исходное значение showA истинно, компоненты отображаются в соответствии с их структурой A - ›B -› C. Пока showA имеет значение true и их свойства не меняются, React не будет повторно отображать.

Но структура рендеринга изменится, когда showA станет ложным. Структура будет B - ›C. Теперь React увидит структуру, отличную от предыдущей, и повторно отрендерит (отключит и снова смонтирует) компоненты B и C, даже если их свойства / состояние остались прежними. и не требовал повторного рендеринга. Это бесполезный повторный рендеринг.

2. Тернарный оператор

Тернарный оператор - это более короткая форма условия «if-else». В первой части указывается условие, вторая часть - это возвращаемое значение, если истинно, а последняя часть - это возвращаемое значение, если ложь.

condition ? true_cond : false_cond

Пример

let cond = true
function App() {
    return (
        {cond ? 
            <div>If Rendering</div>
            :
            <div>Else Rendering</div>
        }
    )
}

3. Элементные переменные

Переменные элемента содержат элементы JSX, поэтому его можно использовать в любом месте компонента React. Переменные элемента упрощают чтение и понимание вашего кода, поскольку они устраняют необходимость в нескольких операторах возврата в вашем компоненте.

Стандартный способ реализации этого:

function App(props) {
    if(props.loggedIn) {
        return <div>Logged In</div>
    } else {
        return <div>Not Logged In</div>
    }
}

У нас есть несколько операторов возврата в вышеуказанном компоненте. Мы используем if-else в JSX для условного рендеринга части пользовательского интерфейса.

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

Пример

function App(props) {
    let element
    if(props.loggedIn) {
        element = <div>Logged In</div>
    } else {
        element = <div>Not Logged In</div>
    }
    return element
}

Мы используем переменную element для хранения последнего элемента, который будет отображаться на основе оценки оператора if-else.

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

Представление

Проблемы здесь те же, что и упомянутые в пункте if-else выше.

4. Оператор И (&&)

Оператор AND используется для проверки правильности его левого и правого выражений.

left_expr && right_expr

Если выражение принимает значение ИСТИНА, оператор И возвращает оценку правильного выражения.

Пример:

(true && "nnamdi")
// "nnamdi"
(true && 1234)
// 1234

С другой стороны, если выражение принимает значение FALSE, оператор AND возвращает FALSE:

(false && "nnamdi")
// false
(false && 1234)
// false

Если это так, мы можем использовать этот оператор AND для условного рендеринга JSX в React.

Пример

function App(props) {
    return (
        <div>
            {
                props.loggedIn && 
                <h3>You're logged in as {props.data.username}</h3>
            }
        </div>
    )
}

Мы используем оператор AND в JSX. Фигурные скобки позволяют нам добавлять и оценивать выражения JS в JSX.

Представление

Хотя по сути он не отличается от двух предыдущих способов условного рендеринга, выражение JSX с оператором AND (&&) считается лучшим вариантом, поскольку оно заставляет вас возвращать ту же структуру при условном возврате и рендеринге элементов.

5. Вернуть ноль

Мы можем настроить компонент так, чтобы он возвращал значение null вместо выражения JSX, чтобы он оценивался, но ничего не отображал.

Когда компонент возвращает null, это не позволяет React монтировать компонент.

function App(props) {
    if(props.noRender)
        return null
    
    return (
        <div>App Component</div>
    )
}

Этот компонент возвращает ноль, если установлено свойство noRender. Поэтому, если мы не хотим, чтобы компонент приложения отображался, мы установим свойства noRender <App noRender=true />.

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

Представление

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

Учить больше

Ресурсы