Question

这个问题可能有点奇怪，但请耐心等待。

我有一个名为HomeComponent的组件，这是应用启动时第一个呈现的组件。在此组件中，我还有其他较小的组件，它们根据state的{{1}}进行渲染。

我知道这不是最漂亮的代码，但这是HomeComponent的摘要。

HomeComponent render()

我正在使用React Native RAM模块和inline-requires。这意味着当HomeComponent首次呈现时，还不需要上面列出的所有组件。仅当用户按下{ this.state.isInPinlockMode ? <PinlockComponent onPinCorrect={this.onHidePinlock} /> : this.state.isInPastYearsMode ? <PastYearsComponent onClosePastYears={this.onClosePastYears} /> : this.state.isInDashboardMode ? <DashboardComponent onCloseDashboardMode={this.onCloseDashboardMode} /> : this.state.isInJournalMode ? <JournalComponent onCloseJournalMode={this.onCloseJournalMode} /> : ...another component中的某个按钮时，才需要使用它们。

但是，我不确定这些组件是否只是通过其HomeComponent方法而仍在降低HomeComponent的render()。

他们放慢脚步了吗？ HomeComponent是跳过这些组件吗？

Answer 1

如果您通过Babel或类似方法来转译代码，您会看到

<PinlockComponent
        onPinCorrect={this.onHidePinlock}
      />

被移植到

 React.createElement(PinlockComponent, {
  onPinCorrect: onHidePinlock
})

这意味着，这只是一个函数调用（永远不要忘记将JSX转换为JS）。如果在三元运算符中使用该函数调用，则在条件返回true时才执行该函数调用。

&&缩写也是如此：

condition && <PinlockComponent
        onPinCorrect={this.onHidePinlock}
      />;

因此，不会降低执行性能。

Answer 2

只需使用&&操作者：

const PinlockComponent = () => 'PinlockComponent ';
const PastYearsComponent = () => 'PastYearsComponent ';
const DashboardComponent = () => 'DashboardComponent ';

class App extends React.Component {
  state = {
    isInPinlockMode: false,
    isInPastYearsMode: true,
    isInDashboardMode: true
  }
  
  render(){
    return (
      <React.Fragment>
        {this.state.isInPinlockMode && <PinlockComponent />}
        {this.state.isInPastYearsMode && <PastYearsComponent />}
        {this.state.isInDashboardMode && <DashboardComponent />}
      </React.Fragment>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

React是否使用伪造的三元值跳过渲染中的组件？

2 个答案: