Does deep nesting flexbox layout cause performance issue?

前端 未结 2 1262
清歌不尽
清歌不尽 2021-02-12 20:17

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 havi

2条回答
  •  栀梦
    栀梦 (楼主)
    2021-02-12 21:06

    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 (
          
    { this.renderComp(deepNest, flex) }
    ) } 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 (
    { content[deepNest % 3] }
    { this.renderComp(deepNest - 1, flex) }
    ) } if (deepNest > 0 && !flex) { return (
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante.
    { this.renderComp(deepNest - 1, flex) }
    ) } } }

    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 (
          
    this.setState({render: !render})}> Start Render
    { render && arr.map((i) => ) }
    ) } }

    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 (
          
    this.setState({render: !render})}> Start Render
    { render && arr.map((i) => ) }
    ) } }

    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.

提交回复
热议问题