react入坑之列表和key(索引)
来源:互联网 发布:烟台青少年编程培训 编辑:程序博客网 时间:2024/06/07 12:36
1 渲染列表
可以像下面这样渲染一个列表:
class List extends React.Component { constructor (props) { super(props) } render () { let list = this.props.number.map(number => ( // 拼装li <li>{number}</li> )) return ( <ul>{list}</ul> ) }}ReactDOM.render( <List number={[1, 2, 3, 4, 5]} />, document.getElementById('root'))
也可以将
map()
调用通过{}
内联到JSX中:class List extends React.Component { constructor (props) { super(props) } render () { return ( <ul>{ this.props.number.map(number => ( // 内联map()方法 <li key={number}>{number}</li> )) }</ul> ) }}通常会使用数组的
map()
方法来从数组拼装列表,这与使用JavaScript拼装HTML类似。但上面的代码运行时会出现警告:2
key
在渲染列表时,React的差异比较算法需要一个在列表范围内的唯一
key
来提高性能(通常用于获知哪个列表项改变了)。这个唯一的key
需要我们手动提供。React官方建议使用列表数据中可用于唯一性标识的字段来作为列表项渲染时的key
。如果实在没有,则可使用数组的index
勉为其难,性能上可能会打折扣。let list = this.props.number.map(number => ( // 拼装li <li key={number.toString()}>{number}</li> ))
key
的使用需要注意一下几点:
- 只能在数组内指定
key
:准确地说,只能在map()
的回调函数中使用key
key
需要在列表范围内保证唯一性:同一个数组中的key
需要保证唯一性,但不同数组中的key
无所谓key
不会作为props
传入组件:可以认为key
是React在JSX中的保留字,你不能用它来向组件传递数据而应该改用其他词
阅读全文
0 0
- react入坑之列表和key(索引)
- react入坑之生命周期
- react入坑之事件
- react入坑之表单
- react入坑之项目初始化
- react入坑之脚手架配置sass
- react入坑之可复用组件
- react入坑之ref的使用
- react入坑之高阶组件
- react入坑之setState注意事项
- react入坑之共享状态提升
- react入坑之内联样式
- React之key详解
- 8.React中文之列表和键
- React学习之列表运用(七)
- react入坑之父子组件之间的传值
- RN(react native)入坑指南-12,打正式签名包和发布
- react列表和keys
- 一些关于bootstrap,bagging,Adaboost,random forest, gradient boost的基本理解
- python自学笔记(7)--Python类
- 把GIT导出的项目转换成Maven项目
- Excel在统计分析中的应用—第八章—假设检验-单个正态总体方差的假设检验
- TCP 三次握手vsTCP 四次握手
- react入坑之列表和key(索引)
- React Native入门(十三)之组件的生命周期
- IntelliJ IDEA 学习笔记
- spring配置中<context:annotation-config> 和 <context:component-scan>区别
- dataGrid 删除行
- IndentationError: unindent does not match any outer indentation level
- 滑动变阻器改进AD输入电压(STM32)
- POJ 3292.Semi-prime H-numbers
- POJ1741 tree 【点分治】