web前端高级React - React从入门到进阶之列表元素及元素中key的作用

你的名字 2023-01-03 14:18 160阅读 0赞

### 系列文章目录 ###

[第一章：React从入门到进阶之初识React][React_React]  
[第一章：React从入门到进阶之JSX简介][React_JSX]  
[第三章：React从入门到进阶之元素渲染][React]  
[第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤][React_JSX_DOM_DOM]  
[第五章：React从入门到进阶之组件化开发及Props属性传值][React_Props]  
[第六章：React从入门到进阶之state及组件的生命周期][React_state]  
[第七章：React从入门到进阶之React事件处理][React_state]  
[第八章：React从入门到进阶之React条件渲染][React_React 1]  
[第九章：React从入门到进阶之React中的列表与key][React_React_key]

### 文章目录 ###

*   *   *  系列文章目录
         *  一、列表元素的渲染
         *  二、列表组件的封装
         *  三、元素的key属性
         *  四、设置key属性的一般原则
         *  五、key 只是在兄弟节点之间必须唯一
         *  六、在JSX中使用map()

### 一、列表元素的渲染 ###

>  *  在日常开发中，难免会遇到页面需要展示列表的需求，不管是只有一列还是多列数据，都是一堆结构相同内容不同的数据。在传统的html中有table元素可以显示多列表格，有ul>li可以显示多行单列的列表数据。
>  *  在真实项目中，我们前端页面上所展示的数据都是来key源于我们的后端，后端会为我们提供一些API，然后这些API返回的结果通常就是存有多条业务数据的数组，然后我们再利用JavaScript代码通过循环将数组中的数据处理后与html元素结合，渲染到页面上最终呈现给用户
>  *  那么在React中，把数组转换为元素列表的过程与JavaScript是一样的，我们也可以通过JavaScript代码与JSX标签相结合来渲染数据列表
>  *  在React中我们可以通过使用\{\}在JSX内构建一个元素集合
>  *  我们可以利用JavaScript中数组的map方法来遍历数组，并将数组中的每个元素与JSX的li标签结合，最后渲染到页面上
> 
> 假如后端给我们返回来一个人员名单数组，要求我们把数组中的人名全部以列表的形式展示在页面上，下面我们就来实现一下这个需求

//我们定义一个userList来模拟后台返回的数据
    const userList = ["Alvin","Yinnes","Shenhuinan","Louyaqian","Yaolu","Yuyueping"];
    const listItems = userList.map(user => { 
    	return <li>{ user}</li>
    });
    	
    ReactDOM.render(
    	<ul>{  listItems }<ul/>,
    	document.getElementById('root')
    );

### 二、列表组件的封装 ###

> 上述代码运行完后，就会在页面上展示出所有人的名字了  
> 但是在真实项目开发中，我们不可能直接把代码随意写成这样，一般我们都会把不同的业务逻辑封装成组件，这样既便于维护也方便复用  
> 接下来我们就把上面的代码封装成一个独立的组件UserList

> 这样我们就简单的实现了一个列表组件了  
> 但是当我们运行这段代码时，会发现控制台中会弹出一堆的警告信息：a key should be provided for list items，意思就是：我们应该为每个列表项提供一个key，也就是说当我们创建一个元素时，必须要包括一个特殊的key属性，关于key的更多信息，我们将会在详细介绍。  
> 我们先把当前这个例子中的每个li加上这个特殊的key属性解决warning问题

> 这样就不会再报warning了  
> 接下来我们再来看一下这个key是干嘛用的，为什么要加上一个key属性呢？

### 三、元素的key属性 ###

> 那么key是什么，为什么要使用key呢
> 
>  *  当页面元素发生变化时，key可以帮助React识别哪些元素改变了，比如添加或者删除。
>  *  另外，当React在进行新旧DOM元素对比时，也会利用元素的key属性来进行匹配对比，这样会大大提高渲染效率
>  *  因此我们应该给列表中的每个元素赋予一个确定的标识
>     
>      *  一个元素的key最好是这个元素在列表中独一无二的字符，也就是说key的值应该是唯一的。一般情况下，我们使用数据的id来作为元素的key值
>      *  当元素没有确定的id的时候，万不得已的情况下可以使用元素的索引来作为key（墙裂不推荐），因为这样做可能会导致性能变差，甚至还会引起组件的状态问题
> 
> 下面来看两段设置key的代码示例

*  利用数据的id作为属性key值

const userList = [{ id:1, name:"Alvin"},{ id:2, name:"Yinnes"},{ id:3, name:"Shenhuinan"},{ id:4, name:"Louyaqian"},{ id:5, name:"Yaolu"},{ id:6, name:"Yuyueping"}];
    const listItems = userList.map(user => { 
    	return <li key={ user.id}>{ user.name}</li>
    });

*  利用索引作为key属性

const userList = ["Alvin","Yinnes","Shenhuinan","Louyaqian","Yaolu","Yuyueping"];
    const listItems = userList.map((user,index) => { 
    	return <li key={ index}>{ user}</li>
    });

### 四、设置key属性的一般原则 ###

> 元素的 key 只有放在就近的数组上下文中才有意义。比如说，如果你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个 < ListItem /> 元素上，而不是放在 ListItem 组件中的 < li> 元素上。

*  例子：不正确的使用 key 的方式

*  例子：正确的使用 key 的方式

> 总结：一般情况，一个好的经验法则是：需要循环输出的元素需要设置key属性，也就是说应该给循环中的元素添加key属性，比如在上面的例子中，我们应该给map方法中的元素设置key属性

### 五、key 只是在兄弟节点之间必须唯一 ###

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

> key 会传递信息给 React ，但不会传递给我们的组件。如果我们想要在组件中使用 key 属性的值，那么需要用其他属性名（非key）显式传递这个值。比如在下面的代码中，我们可以通过props获取到Post组件的id和title属性，但是无法获取到key属性。

const content = posts.map((post) =>
      <Post
        key={ post.id}//无法通过props获取
        id={ post.id}//可以通过props获取
        title={ post.title} />//可以通过props获取
    );

### 六、在JSX中使用map() ###

> 上面的例子中我们都是把map和JSX元素单独分开写的，实际上还可以在\{\}中使用map函数，因为JSX允许在大括号中嵌入任何表达式，如下代码：

function NumberList(props) { 
      const numbers = props.numbers;
      return (
        <ul>
          { numbers.map((number) =>
            <ListItem key={ number.toString()}
                      value={ number} />
          )}
        </ul>
      );
    }

> 关于列表元素和key的使用就介绍到这里  
> [下一章节][Link 1]我们将介绍一下React中的表单以及受控组件和非受控组件

[React_React]: https://blog.csdn.net/lixiaosenlin/article/details/112238757
[React_JSX]: https://blog.csdn.net/lixiaosenlin/article/details/112250656
[React]: https://blog.csdn.net/lixiaosenlin/article/details/112252554
[React_JSX_DOM_DOM]: https://blog.csdn.net/lixiaosenlin/article/details/111993181
[React_Props]: https://blog.csdn.net/lixiaosenlin/article/details/112260171
[React_state]: https://blog.csdn.net/lixiaosenlin/article/details/112314897
[React_React 1]: https://blog.csdn.net/lixiaosenlin/article/details/112361974
[React_React_key]: https://blog.csdn.net/lixiaosenlin/article/details/112369657
[Link 1]: https://blog.csdn.net/lixiaosenlin/article/details/112443722