React 中的列表与键

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
function App() {    return (        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>        </ul>    );} ReactDOM.render(    <App />,    document.getElementById('root'));

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
const numbers = [1, 2, 3, 4, 5]; function App() {    return (        <ul>            {numbers.map((number) => <li>{number}</li>);}        </ul>    );} ReactDOM.render(    <App />,    document.getElementById('root'));

Warning: Each child in a list should have a unique "key" prop.

What's key?

Keys 可以帮助 React 定位需要修改的 item。一般使用 uniquely identifies，比如使用 ID。

如果我们忘记给 list item 添加 key 的话，React 默认会用 index 来作为 key。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 
const numbers = [1, 2, 3, 5, 5]; function App() {    return (        <ul>            {numbers.map((number, index) => <li key={index}>{number}</li>);}        </ul>    );} ReactDOM.render(    <App />,    document.getElementById('root'));