示例场景
浏览器警告如下信息：
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用于在进行上述节点操作时能够快速定位到目标节点。
网友评论