REACT JS 中的循环和条件
REACT JS 中的循环和条件
如果朝天扔石头，它肯定会击中 Javascript 开发人员，主要是 REACT 开发人员。流行的反应是！！！。它很受欢迎，因为它易于使用和易于理解。大多数开发人员更喜欢 REACT，不仅因为它的性能是由于虚拟 DOM，还因为它易于编码。 React 使开发人员的代码更快，也使开发人员维护一个干净的代码库，其中控制流明显且易于理解。纯 javascript(Vanilla) 很棒，但在条件渲染或渲染数据列表时，与 React 相比，Vanilla 要困难得多。让我们看看 JSX 中的条件语句和循环（主要是渲染元素列表）。
大纲
- 条件语句
- 迭代一个可迭代对象
条件语句
条件语句高度
- 使用 && 运算符
&& 运算符用于检查两个条件是否为真。如果任何一个条件为假，这将返回假。 JSX 中的 && 操作符的工作方式是，在 && 操作中，只有当 && 操作符之前的条件为真时，才会执行或检查 && 之后的条件。如果 && 之前的条件为假，则整个语句将返回假。因此元素不会被渲染。只有当 && 运算符之前的条件为 True 时，才会呈现元素。
使用逻辑运算符
在上面的语句中，我直接使用了布尔值，但布尔变量可以替换为任何返回 true 的语句。例如，返回布尔值或逻辑语句等的函数。在下面的示例中，逻辑条件将始终返回布尔值。
使用三元运算符
If else 条件可以在 JSX 中使用三元运算符实现。三元运算符只是带有显式或隐式返回语句的 if else 条件的快捷方式。在这种情况下，我们使用逻辑条件来检查布尔值，如果布尔值为真，则语句将返回第一个语句，如果为假，则返回冒号前面的第二个语句。
多个逻辑语句
我们还可以使用由一些条件运算符连接的多个逻辑条件。条件 & 运算符和条件 ||运算符可用于连接逻辑条件。可能有任意数量的逻辑条件，但唯一的限制是语句应该只有一行，这意味着您不能有多行语句。
循环
在大多数情况下，我们将渲染一个可迭代对象（一个数组）。要渲染一个可迭代对象，我们已经并且将只使用 map 函数。首先，我们将了解如何使用 map 函数，然后讨论为什么不能使用其他循环方法（for、while、foreach）。
下面给出一个使用 map 函数的例子
有条件的循环
map 函数还可以使用条件来根据某些标准呈现内容。在下面的示例中，我返回 true 而不是 JSX 元素，因为如果条件失败，我无需执行任何操作。
为什么不能使用其他循环？
这可以通过了解不同的循环来轻松理解。查看 这个 了解不同的循环如何在 javascript 中工作。只有 map、filter 和 reduce 方法会返回一个新数组，而其他循环不会返回任何东西。因此它们的返回类型是未定义的，因此不会呈现任何内容。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
