React 中的 for 循环
处理复杂的后端数据是前端开发人员工作的一部分。通常，数据包括代表 UI 的组件或其他构建块的对象列表。
例如，在创建在线商店时，数据可能包含需要出现在网站上的产品列表。由于多种原因，手动查看列表并一个一个地创建组件是低效的。例如，如果某个产品被删除或添加到列表中，你会怎么做？你不能每次都回去更新你的 JSX 文件。
有多种方法可以遍历列表并自动呈现组件或 HTML 元素。
在 React 中使用 .map() 方法实现 for Map
ES6 中引入的 .map() 方法是循环数组并返回一个有效的 JSX 元素的默认方法，该元素包含来自数组中每个项目的数据。开发人员通常使用此方法来创建自定义组件以及常规 HTML 元素。
尽管还有其他方法来执行循环，但大多数 React 开发人员使用 .map() 方法，因为它易于阅读、编写和维护。以下是如何遍历对象数组并将用户数据呈现到屏幕上：
class App extends Component {
render() {
const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
console.log('App started');
return <div>
{data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
</div>
}
}
输出：
John Doe, 44 years old
Jane Doe, 45 years old
请记住，map() 方法在本示例中将运行两次，每次都返回一个段落元素。这就是为什么必须用 <div></div> 包装其结果的原因。每个组件都必须返回一个父容器，拥有任意数量的子元素。
key 属性
请记住，使用 .map() 方法创建的每个元素都必须有一个 key 标识符，并设置为唯一值。
<p key={person.name}>{}</p>)
React 不建议使用 index 值来为 key 属性生成唯一值。
传递 props
如果你打算使用 .map() 方法来渲染多个组件，你也可以传递 props。
假设我们正在尝试渲染多个 Product 组件。以下是我们如何传递 props：
return <div>
{data.map(product => <Product price={product.price} name={product.name}></Product>)}
</div>
JavaScript for 循环
循环数组的另一种方法是使用 for 循环。如果你选择这种方法，你必须在 return 块上方执行循环。
代码如下所示：
class App extends Component {
render() {
const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
let persons = [];
for (let i = 0; i<data.length; i++){
persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
}
return <div>
{persons}
</div>
}
}
与 .map() 相比，这种方法更加冗长且难以理解。但是，结果将是相同的。
立即调用的函数
在 return 语句中使用 for 循环在技术上是可行的，但是你必须创建一个函数并使用 for 循环作为主体。一旦你写完函数，你应该在它后面加上括号 () 以立即调用它。这是它的工作原理：
class App extends Component {
render() {
const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
return
<div>
{function() {
let persons = []
for (let i = 0; i<data.length; i++){
persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
}
return persons
}()
}</div>
}
}
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn