27-React Lists and Keys
Lists and Keys
React支持以数组的形式来渲染多个组件，它会将你数组中的每个组件以列表的形式渲染开来。
当你使用数组的方式来渲染你的组件时，你需要给每个组件一个Key值,否则会出现一个警告，提示指出应该为列表的每一项提供一个属性key，如下代码所示：
function NumberList(props) {
const numbers = props.numbers;
const listItems = number.map(item => <li>{item}</li>);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
分配key后的代码如下：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(item =>
<li key={item.toString()}>
{item}
</li>
);
return (
<ul>{listItems}</ul>
)
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
Keys值帮助React确定哪些组件已经改变了，增加了或者被移除了。
const numbers =[1, 2, 3, 4, 5];
const listItems = numbers.map(item =>
<li key={item.toString()}>
{item}
</li>
);
数组中的每个组件都需要有一个确定的keys值，即一个确定的身份。
keys值最好是用字符串来做唯一标识符。我们通常用数据的ID来做主键。
Keys只用在有数组的上下文才有意义。
示例：key的错误用法
function ListItem(props) {
const value = props.value;
return (
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(item =>
// 这是错误的，这里应该设置上key
<ListItem value={item} />
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers}> />,
document.getElementById('root')
)
示例：key的正确用法
function ListItem(props) {
// 这才是正确的，在这里不需要设置key
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(item =>
// 这才是正确的，在这里设置key
<ListItem key={item.toString()} value={item} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
不同数组中可以用相同的key，但兄弟姐妹之间的键必须是唯一的。
Forms
表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
交互属性
表单组件支持几个受用户交互影响的属性：
- value：用于 、
