Lesson 13 渲染列表数据
发布日期:2022-09-10 02:52:58 浏览次数:2 分类:技术文章

本文共 4414 字,大约阅读时间需要 14 分钟。

Lesson 13 渲染列表数据

列表数据在前端非常常见,我们经常要处理这种类型的数据,例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。

React.js 当然也允许我们处理列表数据,但在使用 React.js 处理列表数据的时候,需要掌握一些规则。我们这一节会专门讨论这方面的知识。

渲染存放 JSX 元素的数组

假设现在我们有这么一个用户列表数据,存放在一个数组当中:

const users = [  {
username: 'Jerry', age: 21, gender: 'male' }, {
username: 'Tomy', age: 22, gender: 'male' }, {
username: 'Lily', age: 19, gender: 'female' }, {
username: 'Lucy', age: 20, gender: 'female' }]

如果现在要把这个数组里面的数据渲染页面上要怎么做?开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据,如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样?

...class Index extends Component {
render () {
return (
{
[
React.js ,
is ,
good ]}
) }}ReactDOM.render(
, document.getElementById('root'))

我们往 JSX 里面塞了一个数组,这个数组里面放了一些 JSX 元素(其实就是 JavaScript 对象)。到浏览器中,你在页面上会看到:

在这里插入图片描述
审查一下元素,看看会发现什么:

在这里插入图片描述

React.js 把插入表达式数组里面的每一个 JSX 元素一个个罗列下来,渲染到页面上。所以这里有个关键点:如果你往 {} 放一个数组,React.js 会帮你把数组里面一个个元素罗列并且渲染出来。

使用 map 渲染列表数据

知道这一点以后你就可以知道怎么用循环把元素渲染到页面上:循环上面用户数组里面的每一个用户,为每个用户数据构建一个 JSX,然后把 JSX 放到一个新的数组里面,再把新的数组插入 render 方法的 JSX 里面。看看代码怎么写:

const users = [  {
username: 'Jerry', age: 21, gender: 'male' }, {
username: 'Tomy', age: 22, gender: 'male' }, {
username: 'Lily', age: 19, gender: 'female' }, {
username: 'Lucy', age: 20, gender: 'female' }]class Index extends Component {
render () {
const usersElements = [] // 保存每个用户渲染以后 JSX 的数组 for (let user of users) {
usersElements.push( // 循环每个用户,构建 JSX,push 到数组中
姓名:{
user.username}
年龄:{
user.age}
性别:{
user.gender}

) } return (
{
usersElements}
) }}ReactDOM.render(
, document.getElementById('root'))

这里用了一个新的数组 usersElements,然后循环 users 数组,为每个 user 构建一个 JSX 结构,然后 push 到 usersElements 中。然后直接用表达式插入,把这个 userElements 插到 return 的 JSX 当中。因为 React.js 会自动化帮我们把数组当中的 JSX 罗列渲染出来,所以可以看到页面上显示:

在这里插入图片描述
但我们一般不会手动写循环来构建列表的 JSX 结构,可以直接用 ES6 自带的 map(不了解 map 函数的同学可以先了解相关的知识再来回顾这里),代码可以简化成:

class Index extends Component {
render () {
return (
{
users.map((user) => {
return (
姓名:{
user.username}
年龄:{
user.age}
性别:{
user.gender}

) })}
) }}

这样的模式在 JavaScript 中非常常见,一般来说,在 React.js 处理列表就是用 map 来处理、渲染的。现在进一步把渲染单独一个用户的结构抽离出来作为一个组件,继续优化代码:

const users = [  {
username: 'Jerry', age: 21, gender: 'male' }, {
username: 'Tomy', age: 22, gender: 'male' }, {
username: 'Lily', age: 19, gender: 'female' }, {
username: 'Lucy', age: 20, gender: 'female' }]class User extends Component {
render () {
const {
user } = this.props return (
姓名:{
user.username}
年龄:{
user.age}
性别:{
user.gender}

) }}class Index extends Component {
render () {
return (
{
users.map((user) =>
)}
) }}ReactDOM.render(
, document.getElementById('root'))

这里把负责展示用户数据的 JSX 结构抽离成一个组件 User ,并且通过 propsuser 数据作为组件的配置参数传进去;这样改写 Index 就非常清晰了,看一眼就知道负责渲染 users 列表,而用的组件是 User

key! key! key!

现在代码运作正常,好像没什么问题。打开控制台看看:

在这里插入图片描述

React.js 报错了。如果需要详细解释这里报错的原因,估计要单独写半本书。但可以简单解释一下。

React.js 的是非常高效的,它高效依赖于所谓的 Virtual-DOM 策略。简单来说,能复用的话 React.js 就会尽量复用,没有必要的话绝对不碰 DOM。对于列表元素来说也是这样,但是处理列表元素的复用性会有一个问题:元素可能会在一个列表中改变位置。例如:

a
b
c

假设页面上有这么3个列表元素,现在改变一下位置:

a
c
b

cb 的位置互换了。但其实 React.js 只需要交换一下 DOM 位置就行了,但是它并不知道其实我们只是改变了元素的位置,所以它会重新渲染后面两个元素(再执行 Virtual-DOM 策略),这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识,React.js 就可以知道这两个元素只是交换了位置:

a
b
c

这样 React.js 就简单的通过 key 来判断出来,这两个列表元素只是交换了位置,可以尽量复用元素内部的结构。

这里没听懂没有关系,后面有机会会继续讲解这部分内容。现在只需要记住一个简单的规则:对于用表达式套数组罗列到页面上的元素,都要为每个元素加上 key 属性,这个 key 必须是每个元素唯一的标识。一般来说,key 的值可以直接后台数据返回的 id,因为后台的 id 都是唯一的。

在上面的例子当中,每个 user 没有 id 可以用,可以直接用循环计数器 i 作为 key

...class Index extends Component {
render () {
return (
{
users.map((user, i) =>
)}
) }}...

再看看,控制台已经没有错误信息了。但这是不好的做法,这只是掩耳盗铃(具体原因大家可以自己思考一下)。记住一点:在实际项目当中,如果你的数据顺序可能发生变化,标准做法是最好是后台数据返回的 id 作为列表元素的 key

当前内容版权归 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请点击 .

最初的起点:

上一篇:

下一篇:

转载地址:https://blog.csdn.net/Mr_zzr/article/details/125778325 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Lesson 14 实战分析:评论功能(一)
下一篇:Lesson 12 state vs props

发表评论

最新留言

不错!
[***.144.177.141]2024年03月21日 10时36分20秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

易语言执行mysql命令_易语言通过“打开”命令操作数据库 2019-04-21
mysql slave 1062_mysql主从同步slave错误1062 2019-04-21
mysql构造器_MySQL行构造器表达式优化(Row Constructor Expression) 2019-04-21
2008日志清理 server sql_SQL Server 2008 清除日志 2019-04-21
mac mysql root 权限_Mac平台重新设置MySQL的root密码 2019-04-21
mysql新增一列_MySQL-ProxySQL中间件 2019-04-21
mysql 30入门_30分钟带你快速入门MySQL教程 2019-04-21
kangle主机怎么配置MySQL_kangle web服务+easypanel主机控制面板快速搭建网站和数据库以及管理空间详细教程... 2019-04-21
mysql 翻页 存储过程_MySQl通用翻页(存储过程) 2019-04-21
mysql 自带压测工具_centos7中mysql自带压测工具mysqlslap使用 2019-04-21
python中pca算法_使用python的numpy库实现PCA算法 2019-04-21
2020word替换所有文本_Excel字符函数(5):REPLACE、SUBSTITUTE查找替换函数之区别... 2019-04-21
win10安装ipython_win10环境 ipython app.py 8080 这里为什么是ipython 这步无法启动 2019-04-21
statelesswidget 初始化执行方法_Spring的初始化回调你真的搞懂了吗? 2019-04-21
nhibernate和mysql_利用NHibernate与MySQL交互 2019-04-21
python22期_python22期第八天(正则表达式-模块,总结) 2019-04-21
假定在MYSQL_假定在名称为教学库的数据库中包含有学生、课程和选课三个表,它们的定义如下 - 问答库... 2019-04-21
mysql多字段存储过程_mysql 的存储过程_多字段 2019-04-21
python怎么创建字符串列表_如何在python列表中为每个字符串创建子列表? 2019-04-21
vba ado 执行多条mysql 语句_access 按钮 多条sql语句 VBA 2019-04-21