React入门教程

列表 & Keys

首先,让我们看下在Javascript中如何转化列表

如下代码,我们使用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中,把数组转化为数列元素的过程是相似的

渲染多样的组件

你可以通过使用{}在JSX内构建一个元素集合

下面,我们使用Javascript中的map()方法循遍历numbers数组。对数组中的每个元素返回li标签,最后我们得到一个数组listItems

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  
  • {number}
  • );

    我们把整个listItems插入到ul元素中,然后渲染进DOM:

    ReactDOM.render(
      
      {listItems}
    , document.getElementById('root') );

    在 CodePen 上试试
    这段代码生成了一个1到5的数字列表

    基础列表组件

    通常你需要渲染一个列表到组件中

    我们可以把前面的例子重构成一个组件。这个组件接收numbers数组作为参数,输出一个无序列表。

    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        
  • {number}
  • ); return (
      {listItems}
    ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

    当我们运行这段代码,将会看到一个警告a key should be provided for list items,意思是当你创建一个元素时,必须包括一个特殊的key属性。我们将在下一节讨论这是为什么?

    让我们来给每个列表元素分配一个key来解决上面的那个警告

    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        
  • {number}
  • ); return (
      {listItems}
    ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

    在 CodePen 上试试

    Keys

    Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
      
  • {number}
  • );

    一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用来自数据的id作为元素的key:

    const todoItems = todos.map((todo) =>
      
  • {todo.text}
  • );

    当元素没有确定的id时,你可以使用他的序列号索引index作为key

    const todoItems = todos.map((todo, index) =>
      // Only do this if items have no stable IDs
      
  • {todo.text}
  • );

    如果列表可以重新排序,我们不建议使用索引来进行排序,因为这会导致渲染变得很慢。如果你想要了解更多,请点击深度解析key的必要性

    用keys提取组件

    元素的key只有在它和它的兄弟节点对比时才有意义。

    比方说,如果你提取出一个ListItem组件,你应该把key保存在数组中的这个ListItem元素上,而不是放在ListItem组件中的li元素上。

    错误的示范

    function ListItem(props) {
      const value = props.value;
      return (
        // 错啦!你不需要在这里明确key:
        
  • {value}
  • ); } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => //错啦!元素的key应该在这里明确: ); return (
      {listItems}
    ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

    key的正确使用方式

    function ListItem(props) {
      // 对啦!这里不需要明确出key:
      return 
  • {props.value}
  • ; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // 又对啦!key应该在数组中被明确出来 ); return (
      {listItems}
    ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

    在 CodePen 上试试

    当你在map()方法内部调用的元素时,你最好随时记得为每一个元素加上一个独一无二的key。

    元素的key在他的兄弟元素之间应该唯一

    数组元素中使用的key在其兄弟之间应该是独一无二的。然而,它们不需要是全局唯一的。当我们生成两个不同的数组时,我们可以使用相同的键

    function Blog(props) {
      const sidebar = (
        
      {props.posts.map((post) =>
    • {post.title}
    • )}
    ); const content = props.posts.map((post) =>

    {post.title}

    {post.content}

    ); return (
    {sidebar}
    {content}
    ); } 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( , document.getElementById('root') );

    在 CodePen 上试试

    key会作为给React的提示,但不会传递给你的组件。如果您的组件中需要使用和key相同的值,请将其作为属性传递:

    const content = posts.map((post) =>
      
    );
    

    上面例子中,Post组件可以读出props.id,但是不能读出props.key

    在jsx中嵌入map()

    在上面的例子中,我们声明了一个单独的listItems变量并将其包含在JSX中

    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        
      );
      return (
        
      {listItems}
    ); }

    JSX允许在大括号中嵌入任何表达式,所以我们可以在map()中这样使用:

    function NumberList(props) {
      const numbers = props.numbers;
      return (
        
      {numbers.map((number) => )}
    ); }

    在 CodePen 上试试

    这么做有时可以使你的代码更清晰,但有时这种风格也会被滥用。就像在JavaScript中一样,何时需要为了可读性提取出一个变量,这完全取决于你。但请记住,如果一个map()嵌套了太多层级,那可能就是你提取出组件的一个好时机。

    上一篇: 下一篇: