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>
  )
};

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

1 个答案: