css - 深度嵌套 flexbox 布局会导致性能问题吗？

Question

我一直致力于 ReactJS 元素，我在其中使用 flexbox 布局创建大部分组件。由于使用 React，我们可以拥有深度嵌套的组件，所以我的布局具有嵌套的 Flexbox 布局。

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

Answer 1

做了一点测试。渲染了 100 个组件，每个组件有 10 个嵌套布局。有和没有 flexbox。以下是代码片段:

组件/index.js

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

WithFlex/index.js

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

WithoutFlex/index.js

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

Chrome 开发工具时间线的结果。

WithFlex

WithoutFlex

总结

区别不大。同样在 flexbox 中，我放置了随机属性以供选择。所以我认为表演没问题。希望它能帮助其他开发者。