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) {// 这才是正确的，在这里不需要设置keyreturn <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：用于 、、 组件
• checked：用于类型为 checkbox 或者 radio 的  组件
• selected：用于  组件

注：在React中应当使用中的value值来代替中的selected属性。（虽然你也可以使用selected，但这样做的话你就需要将整个组件都重新渲染一遍）

在 HTML 中， 的值通过子节点设置；在 React 中则应该使用 value 代替。

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：

• 或  的 value 发生变化时。
• 的 checked 状态改变时。

• 的 selected 状态改变时。

  受限组件

  对于设置了value值（或value值为null）的组件，称作受限组件。

受限组件如 , , 和 ，它们渲染出来的 HTML 元素始终保持 value 属性的值，用户在渲染出来的元素里输入任何值都不起作用，如果想响应更新用户输入的值，就得使用 onChange 事件。

  render: function() {return <input type="text" value="Hello!" />;}

这段代码将渲染为一个值总是为“Hello!”的输入框。任何用户输入都不会对该渲染后的元素其作用，因为React已将其值声明为“Hello!”。如果你想响应用户输入来更新该组件的值，你可以使用onChange事件：

getInitialState: function() {return {value: 'Hello!'};},handleChange: function(event) {this.setState({value: event.target.value});},render: function() {var value = this.state.value;return <input type="text" value={value} onChange={this.handleChange} />;}