21_尚硅谷_练习1_评论管理_初始化数据动态显示.avi原创

第二步，做什么去？动态组件对吧，动态组件的第一步。啊，初始化动态显示对吧，那就涉及到我们要是不要设计状态数据。对吧，设计状态数据，首先我们要看看整个应用它有一个什么样的状态数据呢？一个什么状态数据。就是列表数据嘛，它不会显示列表嘛，评论列表。这个是可以变化的吧，啊OK，那好了，那现在问题就是我首先要给这个哥们取一个名字。叫什么名字呢？首先你啊，或者说他选择什么类型呢。因为类型会决定它的名字的一部分，对吧？OK，它这个是个评论列表啊，评论列表数组，那用什么名称呢。

用什么使对吧，什么死呢。评论嘛，对吧。Comments对吧？啊comments好，那现在我们名字也确定了，类型也确定了，下面就要设计一下我这个数据应该在哪个组件里面。对不对，我们前面说过怎么样去考虑用的哪个组件，是看这个数据是哪个组件用，还是哪些组件用，对不对啊，那我们首先看一下。爱的就是爱的，需不需要？是不是要需要。历史的需不需要需要，其实现在我们做的这个效果跟我们前面做的那个，我们前面做的那个效果其实是一样的，就展现形式看起来漂亮一点而已。核心是一样的，一个一个一个添加部分，一个列表部分，对吧，多了一个删除。

对不对，只是我们现在啊，是在项目里面去写。那也就是说我们现在是不是有多个组件需要，那就应该干嘛呀，放在副组件上面。晓得了，来吧。副组件啊，肯定是APP了。那我们要去初始化状态在哪初始化状态？好啊，有了在项目里面写的时候，我们就可以写很多简化的语法啊，我先把复杂语法先写一下，再给大家写简化啊，大家才觉得爽。this.state等于对象，对象里面有一个comment，是一个空数组，现在啊，可以给他一点数据是吧？那数组里面每一个元素都是什么类型的这串吗？

是不是，是不是。也就是说白了就是每一个元素每一个，这不就是一个列表项嘛，那你就要看这个列表项有哪些变化的数据，是一个还是多个。那多个对象。这都是一些设计的一些依据啊，这个设计依据其实针对任何环境都是适用的啊。我们现在有两个数据是变化的，谁说说什么内容？对吧，所以我们这个里面每一个都是一个对象，对象里面有什么呢？啊比说U类对吧，等下我写一个哈，说啊说什么内容呢，看探。可以吧，说啊。嗯，挺好的是吧。啊，挺好的啊。可以吧，好，那下面怎么着也来个两三个是吧。

杰克说，杰克说啥了？啊，太难了是吧。好，没问题啊，就搞两个这个意思啊来。也就是说我们现在在这一个里面去初始化state，其实啊，有比这个更好的写法来简化，说白了就好，写法就是简化的写法，把这个copy过来，咔嚓一下这么写。啊，来说一下这个这上面下面这个写法是一个什么意思。啊，我写一遍给组件对象添加。State属性。指定十倍的属性嘛。如果他有是不是把以前的覆盖啊看到吗？其实他默认的原始的值是呢。

其实以前我们看过。那不看懂啊，我就这么写啊，就这种写法就是给组建对象啊，记住了是组建对象是他吗？组件对象是他吗？不是，这是组件内。啊，这是组件类啊，组件对象也就相当于这个里面的什么this。明显这种写法要舒服很多。能不能看到啊，再也不用写contractor，写这个pro，写这个修。好，没问题啊，后面还有一些简介写法，到后面慢慢一点一点的说啊。好，那这样一个状态啊，这样一个数据是我自己用吗。不是gay，谁用的？给这个历史的去显示啊是吧，我们不做初始化显示吗？现在是有初始化了，他们还没显示啊，干嘛去传过去怎么传。

写一个属性就要字最好是跟我的名字一致是最好的。等于。什么大括号写什么认识的？什么再来个里面数据state点它对吧？啊像这种东西最好的方式，我建议大家最好前面先定好。那我这边就好写了，把这个前面都是什么去掉，再舒服一点。有没有看到？啊，OK，好，那下面我们写哪个主间距。还没好吧，那下面我们是不是这个，你既然传给了这个组件，这个组件是不是要去读啊。但是在读之前先得干嘛呢？先得声明我接收什么属性。

对吧？好，来声明一下，还记得怎么声明吗？以前是这么写的点。Proper type等于一个对象，接着属性名叫什么？Comment，好，后面需要涉及到我要引入一个包，还记得不？而这个包默认还没下载。啊，还需要先去什么下载一下，不是不仅是引入还没下载，大家看一下，我们现在不就下载这两个吗？还要下载另外一个n PM in杠杠什么呢C。不要干第一位了，因为我们是运行时依赖。懂不懂好叫什么呢？Prop杠。他去下载好，下载的时候，等它下载过程中我来用一下啊。

来看看怎么用呢，首先啊import它是一个proper pro啊，现在估计还没还没验证没出来啊，我先写的。二。诶，好像差不多了是吧，好没问题，下面。来。谢谢。什么形？什么类型是吧，俊我的个天一会对下一会俊说两个都没说对数组啊。什么是瑞点？啊点is require，我天他怎么还不还不出来啊，这这让我受不了啊，这个这个一看到这种东西啊，看到这波浪线，我就觉得心里总感觉膈应的慌，说实话。

包括这。我就不想看到这些东西。因为说实话，我相当于说是有点代码上的洁癖，生活上没有啊，就是我总是觉得应该要看着干净一点，会舒服一点啊，怎么样，这些波浪线都干掉了，这让人看起来真受不了啊来。在这个里面啊，我找一下这个有一个拼写检查，有个检查。谢，Javascript。干掉。哎，舒服多了。啊，有的时候他就是这个工具，主要是这工具它简单不是按说它应该内部包含这个component component的。他没检查出来。嗯，主要还是这个工具，说实话检查功能有点有点低下啊。不够智能，现在是不是舒服很多了？好啊。来下面我要说一下，其实这个啊，这种方式啊，我我也不太喜欢。

就这种方式我也不太喜欢啊，也就是说怎么样啊，就是给我当前的组件内添加一个属性，更简单的方法是在这里面写。当我这么写行吗？这也是给谁添加。组件对象你要强调一下，因为这里面有两个点，组件内和组件对象，你就说个组件那肯定不行。向大家不好区别对吧，我现在相当于是给组件对象添加这个，关键是我是希望这样吗。不是，我是希望什么给组件内添加，这里面有一个关键字叫static。啊，那也就是说加上这个代后是给谁添加的，对，给组件内啊指定属性。你就添加属性啊。能不能看懂啊，OK，现在就跟大家跟大家说了两种啊，简化的语法啊行。

那里面我是不是要去读这个值。读这个值，这样啊，先你不管那么多，我告诉你，你要从从数数里读东西，先给它取出来再说，这是比较好的选择，This点。先取出再说懂不懂后面肯定要用是吧，要用的话，我这也就是说我这个ii不能写死了。对不对，得根据这一个。数据的数组生成一个什么呢？标签的数组，而且这一个应该还要抽取成一个组件。我不有一个item组件，此时应该抽取了。我准备去写之前先抽出懂不懂，那也就是说我们此时啊，应该把这个ii看成X，剪切一下交给谁去。The item。

啊，大家开始的时候最好自己也写一写啊，Comment什么item。来把这一个不用第二位了，I就可以，因为只要有一个标签就可以。你说老师我要搞一个D有问题吗？没有，但是多了一层标签，毕竟不好嘛。啊好，写好它了吧，但一旦写好它了以后，这里面它是不是有些样式啊，看到了吧，最好。来进一个CSS叫什么名字呢？我我的写法是小前面小写，后面大写啊点什么CS不用写点。他直接就是。啊，这个样式呢，放哪了，放到这里了。这个下面的所有的样式。啊，虽然别看到我这个，现在我做的功能其实很简单，但是我写的比较严格啊，就是语法还是用的比较严格的，就尽量写的规范一点。

好写好写好以后用上了吗？没有需要在这个里面给他什么引入点斜杠哪一个。而且我有一个习惯啊，我的习惯就是引入第三方的和引入自定义的，中间我加个空格。啊，在引入和下面的代码之间也有空格啊。如果我还有自定义的引入，那我会写在一起，如果上面还有第三方的引入，我也写在一起。这都是一些，就是你说白了，你要养成一个固定的习惯啊，编码的习惯，这样你的代码别人一看啊，这个没选代码挺好的。好。来下面啊，下面来说一说我当前这个组件，你说要接收什么东西吗？我们这个主页。

我现在是显示什么去的，显示评论的吧，那个评论要显示，是不是要显示哪个人说什么话呀。那我是不是要接收一个评论对象？能不能啊，我提前就可以给设计好。来啊，接收属性先的声明。写什么sta prop types，这个名字是固定的啊，等于它。Proper type啊，哎，怎么感觉啊，什么是吧。有没有看到，那这里面先要什么引入引入pro，大写的proper tax，对啊，From。对吧，啊，我要揭示的是一个common的对象可以吧。后面的好了。他什么类型。对象嘛，Object是什么必须的，你不传那我都没法显示。

先不管那么多先干嘛，先取出来套路就找一个套路就行，好，后面就很简单啦，譬如说谁说呀。大括号点。这个名字可不能瞎写了。啊，我们开始设计好了，因为我们的初始化数据的时候不去设计了，我们的这个叫优质内吗？你能写别的名字吗？不能了，现在就不能了。能不能看懂好接着说了什么话呢？这写什么勘探的？对不对，好了。那下面呢，我们是不是要在list里面去使用上这个组件，生成多个。

那先得干嘛引入啊，对吧，引入item from点点斜杠。Comment item item，诶不是这个。错了是吧？这个。对吧，好，下面我要做的事情是不是要将它根据它生成一个它的速度。对不对。N不在这个UI里面整，那也就是说我在UI里面要写什么代码，写S代码。干嘛大括号。调用map方法。来comments.mind是吧，来固定的啊，两个参数，第一个呢是comment，第二个呢，Index箭头啊，返回的是一个组件标签嘛，就它嘛。

来写这个标签呗。对不对，但是我要给他传什么。那这个时候，因为这一个是不是已经设计好了，已经说好了，你必须传这个能听懂，你还能写别的名字吗？不能。等于什么？等于这个，记住啊，这一个comment要与它里面的名字要一致。而右边的这个后面呢。要与函数形参的名字一致，当然我这里也可以写个C。可以，那这里也写个C。看到吧，但是我还是强调了一句话，能一样的名字尽量一样。不容易犯错误，懂吗？但我这里面自有写C是告强调一下啊，是对应，谁跟谁对应懂吗？好还有什么，有一个特别的。

啊，数组中的标签必须要有一个K。就是他不写要求的，不然的话他会警告写什么，最简单的写法就是写index不懂。好啦。那也就是说到此为止，我们就。写完了这一个显示。也不知道行不行，哎，先看一下。我刚才是启动了吧。都已经好了。这就是我一再跟他强调，他现在之所以马上就能好，是因为它有一个什么never。啊，实时的刷新，但是前提他肯定有实时的什么打包。对吧，就一旦你改了以后，他是不是重新对你修改东西进行打包啊。接着实时的刷新。

啊，非常好用啊。