示例场景

浏览器警告如下信息：
Each child in an array or iterator should have a unique "key" prop.

示例方案

 let tasks = this.props.tasks.map((task) => (
        <li className="checklist_task" key={task.id}>
            <input type="checkbox" defaultChecked={task.done}/>
            {task.name}
            <a href="#" className="checklist_task--remove"></a>
        </li>
    ));

每个li元素都赋予一个唯一的标识。

为何这样做

React在处理重复条目时，虚拟DOM难以处理。考虑这样的情况：将一个列表转换为另一个列表的最佳方案是什么？在数量达到一定大小的列表中，有很多种可行的方案，每一种都可能导致副作用。考虑到节点插入、删除、替换和移动等操作会花费大量时间，React引入key用于在进行上述节点操作时能够快速定位到目标节点。