react: вопрос проектирования компонента, который будет отображаться (использоваться) лишь при соблюдении некоторых условий

Question

создал компонент ComponentBottom, который используется внутри компонента ComponentTop:

// компонент ComponentTop
render() {
    return (
        <div>
            <какие-то элементы />
            {this.state.flag ? <ComponentBottom /> : <></> }
        </div>
    );
}

у меня такой вопрос новичка - в таких ситуациях лучше добавлять возможность отображения компонента в сам компонент:

// компонент ComponentTop
render() {
    return (
        <div>
            <какие-то элементы />
            <ComponentBottom show = {this.state.flag} />
        </div>
    );
}

// компонент ComponentBottom
render() {
    if (!this.props.show)
        return <></>

    return (/*отрисовка компонента*/);
}

или оставлять всю логику отрисовки в родительском компоненте как это было указано выше?

какой подход лучше?

Answer 1

Тут нет объективного ответа. И все зависит от нескольких факторов.

Какой объем у дочернего компонента.
Есть ли у него состояние.
Как часто условие будет меняться.

Если компонент большой и содержит также огромное количество компонентов и/или стейта, то конечно делать условный рендеринг через родителя это не лучшее решение даже несмотря на то, что Реакт сейчас быстрый. Учтите что в таком коде каждый раз компонент будет создаваться с нуля.

{this.state.flag ? <ComponentBottom /> : <></> }

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

render() {
    if (!this.props.show)
        return <></>

    return (/*отрисовка компонента*/);
}

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

Если это небольшой JSX компонент без стейта, то можно смело писать через тернарный оператор или через оператор &&. Кстати, осторожно с оператором &&.

БЛОГ НА HUSL

react: вопрос проектирования компонента, который будет отображаться (использоваться) лишь при соблюдении некоторых условий

Ответы (1 шт):