react 渲染逻辑 && 与三元运算符

Question

在react

render()

中，当x的值等于1时，逻辑&&和三元运算符都将显示Hello，并且两者在语法上都是正确的。当我不想显示条件的其他部分时，我总是使用 && ，但我遇到了一个代码库，其中大多数地方都使用三元运算符与 null 而不是 && 。使用一种方法相对于另一种方法是否有任何性能提升或任何其他优势？

return (
    <div>
        <div>{x === 1 && <div>Hello</div>}</div>
        <div>{x === 1 ? <div>Hello</div> : null}</div>
    </div>
);

Answer 1

没有显着的性能差异，但因为

0

和空字符串

""

在 JavaScript 中是 “假” 我总是选择三元运算符，这样下一个编辑我的代码的人就知道我的确切意图。

示例：

const count: number | null = 0;
const firstName: number | null = "";

return (
    <div>
        {/* Was this a bug or is `0` really not supposed to render??
          * This will just render "0". */}
        <div>{count && <>The count is {count}</>}</div>

        {/* Okay got it, there's a difference between `null` and `number` */}
        <div>
          {count == null ? <>No count at all</> : <>Count of {count}</>}
        </div>

        {/* Was this a bug too or is `""` supposed to render nothing?
          * This will just render an empty string. */}
        <div>{firstName && <>My name is {firstName}</>}</div>

        {/* Okay now I see `null` / `undefined` vs. a string */}
        <div>
          {firstName == null ? <>No name</> : <>This *will* render {firstName}</>}
        </div>
    </div>
);

Answer 2

有任何性能提升吗

答案是否定的。

在 React Js 中，称为 [带有逻辑 && 运算符的内联 If]

它之所以有效，是因为在 JavaScript 中，true && 表达式始终计算为 表达式，并且 false && 表达式的计算结果始终为 false。

因此，如果条件为真，“

&&

”之后的元素将 出现在输出中。 如果为 false， React 将忽略并跳过它。

Answer 3

好问题。这是一个 React 陷阱，不仅仅是一个性能问题。在我看来，React 文档还不够清楚，罗斯艾伦的答案是正确的并暗示了这一点，但让我尝试进一步澄清。

如果您有任何怀疑您的条件可能会计算为假值 - 例如

array.length

（因此反应将渲染为零的数组长度）或渲染的字符串可能是空字符串 - 使用三元！

否则，您可以自由且自信地使用

&&

运算符。 一个示例如下

count && count > 3 && (
  <div>In stock</div>
)

上述检查要么为真，要么为假。所以你很安全。请注意，我们还首先检查以确保

count

为真 然后 我们检查了我们专门寻找的条件。这样我们就消除了无意中呈现虚假值的可能性。

另一个例子：

data?.order_type && data.order_type === 'patient' && (
  <div>For patients</div>
)

这也只能是真或假。请注意，我还包含了

?

作为 可选链。这是 JavaScript 中的简写，允许您压缩一些真实性检查。

data?.order_type

首先检查

data

是否为真，如果是，则继续评估，否则将退出评估。

何时使用三元： 如果您的条件可以评估为虚假值。例如：

items.length ? ( // length could be 0
  <div>available</div>
  : null
)

但是，如果您将上面的内容更改为

items.length > 0

，那么您就可以使用

&&

运算符。

items.length > 0 && ( // length could not be 0
  <div>available</div>
)

当有疑问时，让你的检查更具体，并确保你在处理条件渲染时考虑的是假/真。这是一个陷阱，但一旦你明白了它背后的想法，一切就更有意义了.

Answer 4

没有性能提升，只是易于格式化。

    <div>
        <div>
            {x === 1 ? (
               <div>Hello</div>
            ): null}
        </div>
    </div>

如果你想稍后处理其他部分，请稍微修改一下

    <div>
        <div>
            {x === 1 ? (
               <div>Hello</div>
            ): (
               <div>just change here.</div>
            )}
        </div>
    </div>

Answer 5

建议使用

ternary operator

代替逻辑

&&

、

||

。如果不考虑的话，会有很大的区别。您可以阅读以下文章中的详细信息。

肯特博客关于此

Answer 6

没有性能优势。因此，开发人员需要了解不同的规则和可能发生的例外情况。

为了简单起见，我的规则是： 对于每种情况都使用三元运算符，但当我确定我的变量始终是布尔值时

 const [shouldDoSomething, setShouldDoSomething] = useState(false)

如果我只是切换它，我的状态将始终是布尔值 然后：

<>

    {shouldDoSomething && <Something/>}

<>

对于任何其他情况，三元都可以。