深层嵌套的flexbox布局会导致性能问题吗？

Z时代
2024-01-10
分类：问答

我一直在从事ReactJS项目，在其中我使用flexbox布局创建了大多数组件。由于有了react，我们可以拥有深度嵌套的组件，所以我的布局是嵌套的flexbox布局。

现在我的问题是，这对性能有影响吗？在单个页面上，有许多组件，每个组件具有3到4级嵌套的flexbox布局。这会导致性能问题吗？

回答：

做了一点测试。渲染100个组件，每个组件具有10个嵌套布局。有无Flexbox。以下是代码片段：

@CSSModules(styles, { allowMultiple: true })
export default class TheComponent extends Component {
  render() {
    const { deepNest, flex } = this.props
    return (
      <div>{ this.renderComp(deepNest, flex) }</div>
    )
  }
  renderComp(deepNest, flex) {
    const flexProperties = [
      { justifyContent: "center", alignItems: "center" },
      { justifyContent: "flex-start", alignItems: "flex-end" },
      { flexDirection: "row" }
    ]
    const content = [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante."
    ]
    if (deepNest > 0 && flex) {
      return (
        <div styleName="containerFlex" style={flexProperties[deepNest % 3]}>
          <div styleName="contentFlex" style={flexProperties[deepNest % 3]}>
            { content[deepNest % 3] }
          </div>
          <div styleName="nestedFlex" style={flexProperties[deepNest % 3]}>
            { this.renderComp(deepNest - 1, flex) }
          </div>
        </div>
      )
    }
    if (deepNest > 0 && !flex) {
      return (
        <div styleName="container">
          <div styleName="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante.
          </div>
          <div styleName="nested">
            { this.renderComp(deepNest - 1, flex) }
          </div>
        </div>
      )
    }
  }
}

import TheComponent from "../Component"
@CSSModules(styles, { allowMultiple: true })
export default class WithFlex extends Component {
  constructor(props) {
    super(props)
    this.state = { render: false }
  }
  render() {
    const {render} = this.state
    // number of components to render
    const arr = _.range(100)
    return (
      <div>
        <div
        style={{ display: "block", padding: 30, lineHeight: "60px" }}
        onClick={() => this.setState({render: !render})}>
            Start Render
        </div>
        { render && arr.map((i) => <TheComponent key={i} deepNest={10} flex={true}/> ) }
      </div>
    )
  }
}

import TheComponent from "../Component"
@CSSModules(styles, { allowMultiple: true })
export default class WithoutFlex extends Component {
  constructor(props) {
    super(props)
    this.state = { render: false }
  }
  render() {
    const {render} = this.state
    // number of components to renders
    const arr = _.range(100)
    return (
      <div>
        <div
        style={{ display: "block", padding: 30, lineHeight: "60px" }}
        onClick={() => this.setState({render: !render})}>
            Start Render
        </div>
        { render && arr.map((i) => <TheComponent key={i} deepNest={10} flex={false}/> ) }
      </div>
    )
  }
}