04_尚硅谷_jsx练习.avi原创

好，我们做个练习，练习效果就在了，它干嘛呢？它是动态的去展现一个列表数据，就是你给我什么数据，我就能展现这个列表。是很简单是吧，其实你用这块也很容易做，因为现在做的功能都无比的简单啊，我们来做一下。现在我们有一个DEMO啊，就在这好来啊，前面因为我们反反复复的用过了，再整就没什么意思了。那我就直接写进来了，而我们页面里面开始只有一个什么，是不是简单div是空的。后面我们是不是要往里面插ul列表啊？好，来，先准备一份数据。准备一份数据，那这个我们叫什么名字呢。啊，我们这个数据一个，啊，数据有几个呢？一个是它的名称是什么，再一个它什么类型。首先。说类型嘛，类型什么类型。我的天，字符串呢，就这这怎么搞成字符串呢，又有又有Z，又有angel，又有又有view，你搞一个字符串呢。

列表列表，你说列表所对应的数据是什么结构？宿主啊，天呐，我要显示一个列表啊。啊，我的数组里面是一个一个的字符串差不多。对不对，我每一个都是一个课程的名称嘛。有了这个以后，下面我们要决定一个我们这个数据用什么名称来存呢。啊，不行了，我自己去吧，内部就是一些名称，课程的名称啊。不能随便叫名字啊，这个地方我虽然name其实并不高，主要是这个S。很关键啊，多个看到S的时候啊，有两种数据，这常见最多的数据类型就数组了，其实也有可能是个对象。

是对象也是没问题的，就说明里面发很多类目嘛，对吧，比如说老师你这里面应该用哪个呢？你说用哪个。数组为什么？因为我这是列表是有顺序的。看出来吧，啊OK，好，来写写第一个写query，第二个是什么安了啊，第三个啊，好像前面有个z to是吧。嗯。把它写写啊，那个还有什么啊，React啊，最后一个我们要学也要学的。好，下面我们要去想办法把它展现列表啊，展列表，那列表是不是用ul和来存。

好，来还是那几步啊，还其实还是那几步，还记得这两个步骤吗？啊，OK，创建虚拟的，接着第二步渲染虚拟动啊，你不要把这个流程给忘了，我一再跟大家说过了，你在记语法之前一定要先记住流程。渲染驱动好。但这个虚拟动嘛，比较的不太好整啊，先大概说一下我们的虚拟动应该是个什么结构啊，应该是一个ul对吧，里面有很多个什么ii，大概我先写一个这个意思是吧，先写个意思，接着这个ii里面是一个一个的什么name。对吧，但这个内肯定是动态的吧，能不能OK，而且这个ii的个数也是动态的。

好。来。看啊，我就直接来个ul得了，是不是写一个什么ul。啊，我这个UI里面是不是又套了很多标签呢？一旦有嵌套的结构，尽量用一个小括号给它括起来。这是一个习惯啊，接着里面看到这一个里面就不太好整了。这里面不太好整，因为他要是一个ii的一个。动态产生啊，我先不搞，我先把names放进来，看看是个什么效果。放，应该这么放吧，好记得里面先不写了啊，我们把U渲染一下，这个好做先做了，叫什么react do.re。Re，来一个ul，来一个did船。

是不是穿的一个三一。是的，我们先来看一下现在是一个什么样的样子啊。哎，看一下是个什么概念，他做了个什么事啊。它是不是将数组中的所有的元素一个一个拿出来显示啊。那么懂，但我们需要的是一个一个的字符串吗？不是，我们要的是什么ii标签啊，最好是有很多个标签数组就好了。就是如果我这数组面是ii标签的数组是不是就完美了，比如说这里能看出来它会自动的变异数组显示。就RA自己做的。我给他一个数组，你看到吗？我给他一个数组，它其实自己是不是在便秘。但是我这个速度不对，我这个数据的数组，我要转换成什么标签的数组，比如这里面一个非常重要的技术就是如何。

正面啊，OK，问题这关键问题啊，关键问题就写在这里啊，如何将一个什么呢数据的数组。转化为一个什么标签的数组？我只要做到这一点，这个效果就出来了。是不是这意思，好，来这个地方要用到数组的一个方法啊，估计大家没用过map，用过吗？那就很好啊，就完美了。大家想想看啊，数组有一个方法叫map啊，Map呢来里面写什么呢？啊方来啊我们。啊，用箭的函数大家能受得了吗？能是吧，行，看大家学的很好啊，来一个这个，来一个箭头返回，返回什么呢。返回的是不是就我数组中的内容，看到我写大就明白这东西吧？

接着把这个类目给他什么塞在这个里面。那也就是说我们这个里面呢。最终是不是得到一个数组，得到一个新的数组吧，而数组里面元素是什么类型？就是矮矮嘛。我所有return的是不是都进入新数组了？看没看到。OK。这个map方法非常关键啊，说白了就是我们的这个问题啊，解决就是使用什么数组的map方法就能搞定。非常常用这个方法。因为你想嘛，我们在里面经常是有数据，数据最终是不是显示一个列表啊，必然用麦克啊。看一下，我们先看一下。刷。是不是出来没有，但是呢，有一个小错误。

这个错误是一个什么事了，他说这个数组里面嘛，应该有一个唯一的标识属性，用什么属性名呢？K，他在说一个什么事呢，就在说我们数标签，数组里面的每一个标签都需要有一个属性。叫什么K，而且每一个ii k的值应该为一。应该彼此之间有区别，这个等于什么就有区别。对，所以也就是说我只要在后面再加个什么index，而这一个写个什么index，那这么写行吗？能不能行不行，你这么写是个文本，他是不会读值的，中考我的天。是不大啊。那么看到啊，OK，这样他就不会去报警告，其实现在应用效果没问题。

懂吗？主要他有一个警告。总是看着不舒服嘛。刷一下。你看是不是没了。这个能不能动啊，OK。好，那现在呢，我们不这个列表就显示出来了吗？那因为我改成别的列表是不是也一样显示啊，只要我的数据啊不一样，那我整个显示的效果就不一样。说实话，代码写的时候我还觉得没什么，写完之后再看。我的天啊，就不太好看，而且要习惯的过程，需要一个过程，其实你一旦习惯了就觉得哎，还行。就是为什么他把它那个标签跟GS它混在一起了，你再看不到页面的整个样子是什么样子。你想嘛，他他这个标签，这是GS代码，这又又是标签。看出来吧啊，如果你不懂RA，那你一个一个那种UI的前端想看懂RA，那基本基本是天方夜谭啊，基本上看不懂。

不可能看到这里面语法还挺多的。大，别人不懂越难，你越学会了不越有价值嘛，怕什么对吧，你觉得哇，这简单那就很好了。好。这里面我一再跟大家强调的事情啊，干任何事情一定要记住流程。啊，至于怎么做，那是下一步要想的事情，这里面最最关键的问题就是如何将一个数据的速度转换，为什么呢？标签的速度，这个事情经常做啊，做的非常的常见啊，用到的就是什么卖的方法。嗯，行，大家最后能把这个例子做出来就OK了啊行。