21 列表与key之使用map方法

在React中，处理动态数据往往需要将数据渲染为列表。当你想要将一个数组中的项目渲染成多个<li>或其他组件时，使用map方法是最常见的做法。同时，当你渲染列表时，使用key属性可以帮助React优化渲染性能。接下来，我们将通过实际案例来深入了解这两个概念。

使用map方法渲染列表

基础示例

假设我们有一个简单的待办事项列表应用，上面列出了用户的待办事项。我们会将待办事项的数据存储在状态中，并通过map方法渲染这个列表。

import React, { useState } from 'react';

const TodoList = () => {
    const [todos, setTodos] = useState([
        '学习React',
        '完成作业',
        '锻炼身体'
    ]);

    return (
        <ul>
            {todos.map((todo, index) => (
                <li key={index}>{todo}</li>
            ))}
        </ul>
    );
};

export default TodoList;

在上面的代码中，我们使用map方法遍历todos数组，并为每个待办事项生成一个<li>元素。请注意，我们为每个<li>元素提供了一个key属性。虽然我们在这里使用了数组的索引作为key，但在实际应用中，使用唯一且稳定的ID作为key更为推荐。

使用key提升性能

当React渲染列表的时候，它会保持一份内部的虚拟DOM树，以便在数据更新时更高效地进行比对和更新。如果没有正确地使用key属性，React将无法准确识别哪些项在更新、删除或添加。因此，使用合适的key可以显著提升性能，尤其是在大型列表中。

更优的key示例

为了更好地理解如何使用key，我们来看一个修改过的示例。在下面的代码中，我们使用待办事项的唯一ID作为key：

import React, { useState } from 'react';

const TodoList = () => {
    const [todos, setTodos] = useState([
        { id: 1, task: '学习React' },
        { id: 2, task: '完成作业' },
        { id: 3, task: '锻炼身体' }
    ]);

    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>{todo.task}</li>
            ))}
        </ul>
    );
};

export default TodoList;

在这个示例中，待办事项不仅保存了task，还附带了一个唯一的id。这样的设计使得我们可以在map方法中为每个<li>使用唯一的todo.id作为key。这样，React能够更高效地跟踪哪些项被修改、添加或删除。

注意事项

1. key的唯一性：确保在同一层级下key的唯一性。
2. 不使用数组索引作为key：除非在静态列表中，使用索引容易引发性能问题，尤其是在添加或删除列表项后。
3. 关键性质：key的作用是帮助React识别哪些元素发生了变化，并不是直接传递给组件的props。

总结

使用map方法渲染列表是React中非常常见的操作，而为每个项目提供稳定、唯一的key则是提升性能的重要手段。在我们的下一章中，我们将探索表单处理以及如何构建受控组件和非控制组件，了解更加复杂的状态管理技巧。