反应渲染逻辑 && 与三元运算符

Question

在反应render()中，当x的值等于1时，逻辑&&和三元运算符都会显示Hello并且两者在语法上都是正确的。当我不想显示条件的 else 部分时，我总是使用 &&，但我遇到了一个代码库，其中大部分地方使用了带有 null[ 的三元运算符=18=] 而不是 &&。使用一种方法比另一种方法有任何性能提升或任何其他优势吗？

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

Answer 1

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

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

如果后面要处理else部分，稍微修改一下

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

Answer 2

Is there any performance gain

答案是否定的

在 React Js 中，它被称为 [Inline If with Logical && Operator]

It works because, in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after "&&" will appear in the output. If it is false, React will ignore and skip it.

Answer 3

没有显着的性能差异，但是因为 0 和空字符串 "" 是 "falsy" in 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 4

好问题。这是一个 React 陷阱，不仅仅是一个性能问题。 React docs，在我看来，只是不够清楚，Ross Allen 的回答是正确的并暗示了这一点，但让我试着澄清更多。

如果您任何怀疑您的条件是否可以计算为falsy value—such as array.length (and thus react will render an array length of zero) or the string rendered could be an empty string—use the ternary!

否则你可以放心地使用 && 运算符。 例如

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

以上检查要么为真，要么为假。所以你很安全。请注意，我们还检查以确保 count 首先是真实的然后我们检查了我们正在寻找的条件。这样我们就消除了无意中呈现虚假值的可能性。

另一个例子：

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

这也只会是真或假。请注意，我还将 ? 作为 optional chain 包括在内。这是 JavaScript 中的 shorthand，可让您压缩一些真实的检查。 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>
)

如有疑问，请更具体地进行检查，并确保在处理条件渲染时考虑 falsy/truthy。 这是一个陷阱，但是一旦你理解了它背后的想法，一切就更有意义了。

Answer 5

建议使用ternary operator代替逻辑&&、||。如果你不考虑它，就会有很大的不同。您可以在下面的文章中阅读详细信息。

Kent Blog About this

反应渲染逻辑 && 与三元运算符

react render Logical && vs Ternary operator

javascript

conditional-operator

jsx

reactjs