深嵌套的Flexbox布局是否会导致性能问题？ [英] Does deep nesting flexbox layout cause performance issue?

问题描述

我一直在研究一个ReactJS项目，在这个项目中我使用flexbox布局创建了大部分的组件。由于反应，我们可以有深嵌套的组件，所以我的布局是嵌套的柔性箱布局。

现在我的问题是，这对性能有任何问题吗？在单个页面上，有许多组件，每个组件都有3到4层嵌套的柔性版式布局。这会导致性能问题吗？

解决方案

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

Component / index.js

  @CSSModules（styles，{allowMultiple：true}）
导出默认类TheComponent extends Component {
 render {）{
 const {deepNest，flex} = this。道具
 
 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 veloneum。整数非rhoncus purus，eget dignissim ante。，
Lorem ipsum dolor sit amet，consectetur adipiscing elit。，
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Vivamus interdum地瓜lig element草。整数非rhoncus purus，eget dignissim赌注。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Vivamus interdum quis ligula veli elementum。整数non rhoncus purus，eget dignissim ante。

 
 if（deepNest> 0&&flex）{
 return（
< div styleName =containerFlexstyle = {flexProperties [deepNest％3]}> 
< div styleName =contentFlexstyle = {flexProperties [deepNest％3]}> 
 {content [deepNest％3 ]} 
< / div> 
< div styleName =nestedFlexstyle = {flexProperties [deepNest％3]}> 
 {this.renderComp（deepNest  -  1，flex） （deepNest> 0&！flex）} 
< / div> 
< / div> 
）
} 
 
 {
 return（
< div styleName =container> 
< div styleName =content> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。Vivamus整数非rhoncus purus，eget dignissim ante。
< / div> 
< div styleName =嵌套> 
 {this.renderComp（deepNest  -  1，flex）} 
< / div> 
< / div> 
 
 
 
 
 $ c 
 
 $ p $ strong> WithFlex / index.js  
 从../Component中导入TheComponent 
 
 @CSSModules（styles，{allowMultiple：true}）
导出默认类WithFlex extends Component {
构造函数（道具）{
 super（道具）
 
 this .state = {render：false} 
} 
 
 render（）{
 const {render} = this.state 
 
 //组件数量（
< div> 
< div 
 style = {{display：
 const arr = _.range（100） block，padding：30，lineHeight：60px}} 
 onClick = {（）=> this.setState（{render：！render}）}> 
开始渲染
< / div> 
 
 {render& arr.map（（i）=>< TheComponent key = {i} deepNest = {10} flex = {true} /> ;）} 
< / div> 
）
} 
} 
  
  WithoutFlex / index.js  
 从../Component 
 $ b @CSSModules（styles，{allowMultiple：true}）
导出默认类WithoutFlex extends Component {
构造函数（道具）{
 super（道具）
 
 this.state = {render：false} 
} 
 
 render（）{$ b $ const {render} = this.state 
 
 //渲染元素的数量
 const arr = _.range（100）
 
 return（
< div> 
< div 
 style = {{display：block，padding：30，lineHeight：60px}} 
 onClick = {（）=> this.setState（{render：！render}）}> 
开始渲染
< / div> 
 
 {render&& arr.map（（i）=>< TheComponent key = {i} deepNest = {10} flex = {false} />）} 
< / div> 
 
 
 $ b $ / code $ / $ p 
 
 
 Chrome开发工具的结果时间表。
 
 
 
  WithFlex       .stack.imgur.com / 5e42D.pngrel =noreferrer>  $ b 
  WithoutFlex  
 
 $ b    
 
 
总结
 
 
 
差异不大。另外在flexbox中，我把随机的属性选择。所以我觉得这个表现还是可以的。希望它能帮助其他开发者。  
I have been working on a ReactJS project where I create most of the components using flexbox layout. Since with react, we can have deeply nested components, so my layout is having nested flexbox layout. 

Now my question is, does this have any issue with performance? On a single page, there are many components and each component have 3 to 4 level nested flexbox layout. Will that cause a performance issue?
解决方案
Have done a little test. Rendered 100 components, each with 10 nested layout. With and without flexbox. Here are the code snippets:

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


Results from Chrome dev-tool timeline.

WithFlex



WithoutFlex



Summary

The difference is not that much. Also in flexbox, I put random properties to choose from. So I think it's alright with the performance. Hope it will help other devs. 

                        
这篇关于深嵌套的Flexbox布局是否会导致性能问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！