列表和 keys · React中文

# 列表和 keys 首先，我們重溫一下如何在 JavaScript 中轉換列表。對于下面代碼，我們使用 [map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 函數來操作下面數組的數值加倍。我們賦值通過 map() 返回的新數組到變量 doubled 并打印它： ~~~ const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); ~~~ 這段代碼打印 [2, 4, 6, 8, 10] 到控制臺。在 React 中，轉換數組到[元素](https://facebook.github.io/react/docs/rendering-elements.html)列表幾乎是相同的。 ## 渲染多個組件使用花括號，可以以 JSX 的方式構建元素的集合并[包括](https://facebook.github.io/react/docs/introducing-jsx.html#embedding-expressions-in-jsx)它們。下面，我們使用 JavaScript 的 map() 函數遍歷數值數組。對于每個項返回一個 `<li>` 元素。最終，賦值結果數組到 listItems： ~~~ const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ~~~ 把整個 listItems 數組包含到一個 `<ul>` 元素，并[渲染到 DOM](https://facebook.github.io/react/docs/rendering-elements.html#rendering-an-element-into-the-dom)： ~~~ ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') ); ~~~ 在 CodePen 中[打開查看](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)。這段代碼顯示一個從 1 到 5 的數字列表。 ## 基本列表組件一般我們會在一個組件中渲染列表。我們可以重構前面的例子到一個組件，它接受一個數值數組，并輸出一個未排序的元素列表。 ~~~ function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}</li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ~~~ 當你運行這段代碼，將會給出一個警告：a key should be provided for list items 。一個 "key" 是一個特殊的字符串屬性，當創建列表元素的時候需要包含的。我們將在下部分討論為什么這是重要的。我們在 numbers.map() 中賦值一個 key 給我們的列表元素，兵符這個丟失 key 的問題。 ~~~ function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ~~~ 在 CodePen 中[打開查看](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)。 ## keys keys 幫助 React 標識哪個項被修改、添加或者移除了。keys 應該在數組中被分配給元素來給定元素一個穩定的表示： ~~~ const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); ~~~ 拾取 key 最好的方式是使用一個在它的同輩元素中不重復的標識字符串。多數情況你可以使用數據中的 IDs 作為 keys： ~~~ const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> ); ~~~ 當你沒有穩定的 IDs 來渲染元素，你可以使用項的索引作為 key 作為最后的選擇： ~~~ const todoItems = todos.map((todo, index) => // 只有項沒有穩定的 IDs 時候這樣做 <li key={index}> {todo.text} </li> ); ~~~ 如果項可能被重新排序，我們不建議使用索引作為 keys，因為這是很慢的。如果感興趣，你可以閱讀[一個深入的介紹關于為什么 keys 是必須的](https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children)。 ## 使用 keys 提取組件 keys 只使用在數組相關的上下文環境。例如，如果你[提取](https://facebook.github.io/react/docs/components-and-props.html#extracting-components)一個 ListItem 組件，應該在 `<ListItem />` 元素中保存 key，而不是在 ListItem 中的根的 `<li>` 元素。 **例子：錯誤的 key 用法** ~~~ function ListItem(props) { const value = props.value; return ( // 錯誤！不需要在這里指定 key： <li key={value.toString()}> {value} </li> ); } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // 錯誤！key 應該在這里指定： <ListItem value={number} /> ); return ( <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ~~~ **例子：正確的 key 用法** ~~~ function ListItem(props) { // 正確！不需要從這里指定 keyi： return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // 正確！key 應該被從這里指定 <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ~~~ 在 CodePen 中[打開查看](https://codepen.io/rthor/pen/QKzJKG?editors=0010)。在 map() 調用中的元素需要 keys，這是一條不錯的經驗準則。 ## keys 在同輩元素之間必須唯一在數組中使用的 keys 必須在它們的同輩之間唯一。然而它們并不需要全局唯一。我們可以在操作兩個不同數組的時候使用相同的 keys ： ~~~ function Blog(props) { const sidebar = ( <ul> {props.posts.map((post) => <li key={post.id}> {post.title} </li> )} </ul> ); const content = props.posts.map((post) => <div key={post.id}> <h3>{post.title}</h3> <p>{post.content}</p> </div> ); return ( <div> {sidebar} <hr /> {content} </div> ); } const posts = [ {id: 1, title: 'Hello World', content: 'Welcome to learning React!'}, {id: 2, title: 'Installation', content: 'You can install React from npm.'} ]; ReactDOM.render( <Blog posts={posts} />, document.getElementById('root') ); ~~~ 在 CodePen 中[打開查看](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)。 keys 作為 React 的一個提示，但是它們并不會傳遞到你的組件中。如果你在組件中需要相同的值，使用一個不同的名稱明確的傳遞為一個 prop： ~~~ const content = posts.map((post) => <Post key={post.id} id={post.id} title={post.title} /> ); ~~~ 上面的例子中， Post 組件可以讀取 props.id，但是不能讀取 props.key 。 ## 在 JSX 中嵌入 map() 在上面的例子中，我們聲明了一個單獨的 listItems 變量，并在 JSX 中包含了它： ~~~ function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); } ~~~ JSX 可以[嵌入任何表達式到花括號中](https://facebook.github.io/react/docs/introducing-jsx.html#embedding-expressions-in-jsx)，所以我們可以內聯 map() 的結果： ~~~ function NumberList(props) { const numbers = props.numbers; return ( <ul> {numbers.map((number) => <ListItem key={number.toString()} value={number} /> )} </ul> ); } ~~~ 在 CodePen 中[打開查看](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)。有時這可以產生清晰的代碼，但是這個風格也可能被濫用。就在在 JavaScript 中，是否值得為了可讀性提取一個變量這取決于你。但是記住，如果 map() 體有太多嵌套，可能是[提取組件](https://facebook.github.io/react/docs/components-and-props.html#extracting-components)的良好時機。