javascript - React - 三元运算符的使用是否导致React渲染缓慢

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 库，则可以非常轻松地根据传递到组件中的 props 动态管理您的类。然后该类可以管理 display: block|none CSS 值，或者作为内联样式的一个非常简单的示例:

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

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