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

做了一点测试。渲染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>    )  }}

没有Flex / 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>    )  }}

差别不大。同样在flexbox中，我放置了随机属性以供选择。所以我认为表演还可以。希望对其他开发者有所帮助。