时间戳

首页 > 解决方案 > React 是否会跳过具有虚假三元值的渲染中的组件？

reactjs - React 是否会跳过具有虚假三元值的渲染中的组件？

问题描述

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

我有一个名为的组件HomeComponent，它是应用程序启动时要呈现的第一个组件。在这个组件中，我还有其他较小的组件，它们state根据HomeComponent.

我知道这不是最漂亮的代码，但这里是HomeComponent render().

    {
      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

我正在使用反应本机 RAM 模块和内联要求。这意味着当 HomeComponent 首次渲染时，还不需要上面列出的所有组件。只有当用户在HomeComponent.

但是，我不确定这些组件是否仍然会因为render()HomeComponent 的render()方法而减慢它的速度。

他们放慢速度吗？HomeComponent 是否跳过了这些组件？

标签： reactjsreact-native

解决方案

如果你转译你的代码（通过 Babel 或类似的东西），你可以看到，

<PinlockComponent
        onPinCorrect={this.onHidePinlock}
      />

被转译为

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

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

缩写也是如此&&：

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

所以不，它不会降低执行性能。

推荐阅读