从零开始学习React——(七)：React列表循环数据以及事件绑定

本节主要介绍React中列表循环展示数据以及事件的绑定。

1. 列表循环数据化

目前Child.js组件中的<li>标签内的数据是静态的，也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript代码循环在页面上。

首先，在上一节中。定义过了一个空的list数组。这节课先把list数组添加两个数组元素。代码如下：

	// 省略上面部分无关代码
	constructor(props) {
		super(props)
		this.state = {
			inputValue: 'test',
			// --- 主要代码 start ---
			list: ['测试文字1', '测试文字2']
			// --- 主要代码 end ---
		}
	}

有了数据之后，可以在利用JSX部分进行循环输出，代码如下：

	// 省略上面部分无关代码
	render() {
		return (
			// 根部文件包裹起来
			<Fragment>
				<div>
					<input value = {this.state.inputValue} onChange = {this.inputChange.bind(this)} />
					<button>增加</button>
				</div>
				<ul>
					{
						this.state.list.map((item, index) => {
							return <li>{item}</li>
						})
					}
				</ul>
			</Fragment>
		)
	}

通过上述代码，返回浏览器页面之后发现数据就不再是固定的了。

2. 增加数据选项

要增加项目，需要在增加按钮上绑定一个方法this.addItem(这个方法目前还没有，需要自己建立)

	<button onClick = {this.addItem.bind(this)}> 增加 </button>

接下来就是定义增加的方法函数，注意: 写在render()之外。

	addItem() {
		this.setState({
			list: [...this.state.list, this.state.inputValue],
			// 这段代码用于将输入项新增到项目之后情况输入框
			inputValue: ''
		})
	}

上述代码要说的是...这个属于es6的扩展运算符，意思就是将list数组进行分解，和后面的this.state.inputValue变量组合形成一个新的数组。这种写法更简单和直观。因此比较推荐这样。

另外：之所以不用push方法是因为：

• this.state里面定义的数据必须通过this.setState来改变。这个涉及到单向数据流。
• push方法返回的是新数组的长度，是数字，而不是新的数组。

3. 解决key值错误

此时，再返回浏览器打开F12控制台就会发现有报错。根据报错可以简单看出是Key值没有设置。Key的作用涉及到在虚拟DOM中因为比对而导致的性能问题。因此建议在写循环的时候都加上Key值。这个现在也是React的硬性要求。同时，Key值在该循环中必须是独一无二的。
解决方式如下：

	<ul>
		{
			this.state.list.map((item, index) => {
				return <li key = {index + item}>{item}</li> 
			})
		}
	</ul>

注：一般开发人员在写Key值的时候喜欢用index。这在长久来看对性能是有影响的。很多公司后端接口中会返回一个字段，里面包含的是一个独一无二的值。如果后端没有返回这个字段的话，可以尝试使用上面的方式。index + item，这样就能尽可能的防止重复。