React 第八章列表渲染以及key的使用

在页面中list是较为常见的一种页面展示方式，在React中我们可以通过数组map函数以及其他循环语句实现jsx数组在页面组件的大括号{}中进行展示。

1，将数组进行循环展示

如下，使用Array.map函数对原始数据进行遍历改装后返回一个jsx语法的数组，并在页面元素ul中展示

import React from 'react';
import ReactDOM from 'react-dom';const arrays = [10,20,30,40,50];
//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
//map() 方法按照原始数组元素顺序依次处理元素。
//通过array.map函数返回jsx元素数组
const lis = arrays.map((item)=>{return <li>{item}</li>;
});ReactDOM.render(<ul>{lis}</ul>,document.getElementById('root'));

2,key的使用（同级唯一性）

但是上面的代码我们在控制台上面可以看到存在警告：Each child in a list should have a unique "key" prop.

React提示我们需要给每一个循环体添加一个唯一值的key 属性。

我们将上面代码进行改造一下：

import React from 'react';
import ReactDOM from 'react-dom';const arrays = [10,20,30,40,50];// 关于item中 key的使用
function ListItem(props){return <li>{props.value}</li>
}function ListComponent(props){const listData = props.listData;const jsxList = listData.map((item)=>{return <ListItem key={item} value={item} />;});console.log(jsxList);return(<ul>{jsxList}</ul>);
}
//一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性，即在循环体的标签上使用key.
ReactDOM.render(<ListComponent listData={arrays} />,document.getElementById('root'));

在上面代码中，我们没有在ListItem函数中的li上面进行添加 key 而是在遍历数组的匿名遍历函数中返回item组件的地方添加了key.否则React仍会进行上面提示 Each child in a list should have a unique "key" prop.

列表中的key 只是给React使用，假如一个组件标签上写了key属性，我们在组件内部从props中无法获取。如果需要我们则需要在另传递一个属性，如：

const content = posts.map((post) =><Postkey={post.id}id={post.id}title={post.title} />
);

同一节点下的循环兄弟节点key不可以一样。但是同一页面内可以允许可以有重复的key值。

3，直接在{}中返回数组

同样在{}中我们也可以使用Array.map()函数进行直接循环展示列表：

import React from 'react';
import ReactDOM from 'react-dom';const arrays = [10,20,30,40,50];
//使用大括号中进行遍历
ReactDOM.render(<ul>{arrays.map((item)=>{return <li key={item} id={item}>{item}</li>;
})}</ul>,document.getElementById('root'));

React 第八章列表渲染以及key的使用相关推荐

[react] react怎么提高列表渲染的性能？
[react] react怎么提高列表渲染的性能? 使用webpack 做代码分割. 使用hooks. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
vue列表渲染中key的作用_vue中：key的作用
因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚. 其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的 ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的<微信小程序>专栏. 前言开发微信小程序离不开"页面渲染",对于初学者来说很难理解 ...
vue列表渲染中key的作用_列表渲染和Vue的v-for指令
Web渲染是Web开发中最常用的实战之一.动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息.在我们使用的每个Web应用程序中,都可以看到很多内容列表被用于Web应用程序当中. 在这篇文 ...
【Vue】基础系列（五）列表渲染v-for | key的原理 | 数组 | 对象 | 删除替换 | 过滤与排序
1. 列表显示 v-for指令用于展示列表数据语法:v-for="(item, index) in xxx" :key="yyy" 可遍历:数组.对象.字符 ...
React的列表渲染
//9. 列表渲染class List extends React.Component{state = {list:[1,2,3,4,5],list2:[{id:1,text:'java'},{id: ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...

React 第八章列表渲染以及key的使用

React 第八章列表渲染以及key的使用相关推荐

最新文章

热门文章

React 第八章 列表渲染以及key的使用

React 第八章 列表渲染以及key的使用相关推荐

最新文章

热门文章

React 第八章列表渲染以及key的使用

React 第八章列表渲染以及key的使用相关推荐