Does deep nesting flexbox layout cause performance issue? Have done a little test. Rendered 100 components, each with 10 nested layout. With and without flexbox.
Here are the code snippets:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | @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> ) } } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
