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

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 中，它被称为[Inline If with Logical && Operator]

之所以有效，是因为在 JavaScript 中， true && expression 的计算结果始终为 expression ，而 false && expression 的计算结果始终为 false。

因此，如果条件为真，output中会出现“ && ”后面的元素，如果为假， React会忽略并跳过它。

Answer 3

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

    <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 4

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

如果您怀疑您的条件可能会计算出一个虚假的值——例如array.length （因此 React 将呈现一个长度为零的数组）或者呈现的字符串可能是一个空字符串——使用三元！

否则，您可以自由而自信地使用&&运算符。 一个例子是这样的

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 5

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

肯特博客关于这个

Answer 6

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

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

 const [shouldDoSomething, setShouldDoSomething] = useState(false)

如果我只是切换它，我的 state 将永远是 boolean 然后：

<>

    shouldDoSomething && <Something/>

<>

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