Реакция - вызвало ли использование троичного оператора медленный рендеринг в реакции

Question

Я только что прочитал блог, может кто-нибудь посмотреть и сказать, что это правильно, что использование троичного оператора вызывает медленный рендеринг

Избегайте частого монтирования / размонтирования

Много раз мы привыкли к тому, что компоненты исчезают с помощью троичного выражения (или чего-то подобного):

import React, { Component } from 'react';
import DropdownItems from './DropdownItems';

class Dropdown extends Component {
  state = {
    isOpen: false
  }
  render() {
    <a onClick={this.toggleDropdown}>
      Our Products
      {
        this.state.isOpen
          ? <DropdownItems>
          : null
      }
    </a>
  }
  toggleDropdown = () => {
    this.setState({isOpen: !this.state.isOpen})
  }
}

Так как удаление из DOM может вызвать перерисовку / переформатирование в браузере. Они могут быть дорогими, особенно если это вызывает смещение других элементов HTML.

Чтобы смягчить это, рекомендуется избегать полностью размонтирования компонентов. Вместо этого вы можете использовать определенные стратегии, например, установить непрозрачность CSS на ноль или установить видимость CSS на «нет». Это сохранит компонент в DOM, при этом он фактически исчезнет без каких-либо затрат на производительность.

Правильно ли приведенное выше утверждение, и вы согласились?

Answer 1

Для того, что вы делаете, это не должно вызывать какого-либо значительного замедления. Однако, если вы не хотите вызывать / отключать монтирование, вам следует подумать о добавлении в ваш компонент DropDownItems свойства, например, visible, которое затем можно использовать для применения стилей к вашему дочернему компоненту:

<DropDownItems visible={this.state.isOpen} />

Если вы используете библиотеку ClassNames, это позволяет довольно легко динамически управлять вашими классами на основе реквизитов, передаваемых в ваш компонент. Тогда класс может управлять значениями display: block|none CSS, или как очень быстрый пример со встроенными стилями:

export const DropDownItems = ({visible}) => {
  const displayStyle = visible ? 'block' : 'hidden';

  return (
    <div style={{display: displayStyle}}>
      ... your items in here
    </div>
  )
};