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

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

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

没有显著的性能差异，但由于0和空字符串""是"falsy"；在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>
);

是否有任何性能增益

答案是否定的。

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

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

因此，如果条件为真；CCD_ 4"；将出现在输出中如果为false，React将忽略并跳过它。

好问题。这是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>
)

如果有疑问，请更具体地进行检查，并确保在处理条件呈现时您的想法是虚假/真实的这是一个陷阱，但一旦你明白了背后的想法，一切都会更有意义。

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

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

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

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

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

Kent博客关于这个

没有性能优势。因此，由开发人员来了解可能发生的不同规则和异常。

简单地说，我的规则是：对每种情况都使用三元运算符，但当我确信我的变量总是布尔时

const [shouldDoSomething, setShouldDoSomething] = useState(false)

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

<>
shouldDoSomething && <Something/>
<>

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

相关内容

最新更新

热门标签：