React学习-列表循环中的特殊属性key
2017-06-25 19:41
435 查看
一、key的作用
1. key 帮助react确定list中哪些item已更改,添加或删除。
2. 便于在dom变化后,对比新旧DOM具体哪些item已变化,加快虚拟dom渲染和性能提升
二、key的使用注意事项
1. 使用数组下标做key是不被推荐的,如果遇到数组排序的情况下,将降低渲染性能。
2.数组中的key在其兄弟是独一无二的,但在全局并不一定是唯一的。
3.key的值无法传递到子组件中,若要实现相同数据的传递,可使用其他名称作为属性名。访问key的值会返回undefined
1. key 帮助react确定list中哪些item已更改,添加或删除。
2. 便于在dom变化后,对比新旧DOM具体哪些item已变化,加快虚拟dom渲染和性能提升
二、key的使用注意事项
1. 使用数组下标做key是不被推荐的,如果遇到数组排序的情况下,将降低渲染性能。
const todoItems = todos.map((todo, index) => // 只有在没有id的情况下,才考虑使用数组下标 <li key={index}> {todo.text} </li> );
2.数组中的key在其兄弟是独一无二的,但在全局并不一定是唯一的。
function Blog(props) { const sidebar = ( <ul> {props.posts.map((post) => <li key={post.id}> {post.title} </li> )} </ul> ); const content = props.posts.map((post) => <div key={post.id}> <h3>{post.title}</h3> <p>{post.content}</p> </div> ); return ( <div> {sidebar} <hr /> {content} </div> ); } const posts = [ {id: 1, title: 'Hello World', content: 'Welcome to learning React!'}, {id: 2, title: 'Installation', content: 'You can install React from npm.'} ]; ReactDOM.render( <Blog posts={posts} />, document.getElementById('root') );
3.key的值无法传递到子组件中,若要实现相同数据的传递,可使用其他名称作为属性名。访问key的值会返回undefined
const content = posts.map((post) => <Post key={post.id} id={post.id} title={post.title} /> );
相关文章推荐
- ReactJs之循环时的key属性
- linux学习入门 基础部分(6)【文件属性,目录属性,更改组,权限识别,默认权限,特殊权限,权限列表】
- shell脚本学习:特殊变量和C语言格式循环
- jquery手册学习--属性--attr(name|pro|key,val|fn) --removeAttr(name)
- html5 iphone 特殊meta属性学习
- swift学习笔记之数据持久化(属性列表)
- react 属性与状态 学习笔记
- CSS学习(13)--列表项目属性
- 学习React过程中html5新属性笔记
- ios学习笔记——属性列表
- Android学习记录之ListView特殊属性介绍
- linux基础命令学习(六)文件的特殊属性
- Learn Python The Hard Way学习(32) - 循环和列表
- Erlang 学习笔记 (2) -- 列表, 尾递归(循环语言的代替)
- ios学习(五):数据持久化之属性列表(.plist)
- React-非dom属性-key
- jQuery学习笔记--jqGrid的属性列表
- IOS深入学习(28)之Property list(属性列表文件)
- linux学习(8)文件的隐藏属性,隐藏属性设置,特殊权限,特殊权限设置,观察文件类型
- IOS学习 info.plist属性列表讲解(IOS)