10_尚硅谷_组件组合使用_初始化显示.avi原创

好，那刚才呢，我们给大家介绍了组建的三个属性，我们再来这里看一下，第一个是它的什么state状态啊，第二个是。啊，第三个是对吧。这个其实是最简单，它用来干嘛的，标识我组件内部的某一个元素的，对吧，就它的作用比较单一啊，也比较好懂，主要要说一下他们俩。他们俩都用来承载要显示的数据。懂不懂就是他们俩里面承载的数据都是用于我组件显示的，但它们俩有区别。这个区别一定要去把握清楚。状态，我们称为组件内部的状态。而且他应该会变。对吧，一般是一个变化的数据，你要不变，那直接写死不就得了吗？A problem is up。

是从组件外部来，外部什么传进来的，也就是说我一个组件要显示一些数据。有两种情况。一种是我内部维护的数据。用什么？一种是什么外部传过来，那外部传过来是什么时候传？是不是写标签的时候传呢？能不能啊？无论是状态发生了改变啊，你要改变状态必须用一个方法叫set，什么state，那我的那个组件的界面是不是发生了变化？那如果我从外部传过的数据变了呢？它会不会变呢？肯定要变，你想想看，它不变那不那不就出问题了吗？能不能无论是我的状态变了，还是我的属性变了，我这个组件。都应该对应的发生变化。这个能懂吧，啊，后面我们就要去看啊，大家一定要能区别开它们俩。

有什么意思，就是我现在要写这个东西，你要确定到底设计成状态了，还是设计成pro。就面临一个选择的问题，有的时候啊，做任做有些事情就是选择很难。就好像我现在要用一个容器来存数据，对吧，我是用对象存好呢，还是用数组来存好。这就需要一个判断的能力。嗯，OK，好行，下面呢，我们就继续的往下看看下一个。啊，我们下一个呢，就要做一件事情啊，稍微把我们的功能呢做的复杂一点。啊，叫组件的组合。啊，来看一下啊。啊，这个现在呢，没什么，我们来看一下我们要做的啊，一个效果啊需求就我们每一个呢，都是有一个测试用例的啊。把它打开。啊，现在我们做的效果会复杂一些了，就是功能。

会更加多，一个组件已经搞不定了，需要多个组件。看一下我们的功能，功能很简单，大家应该能看出来啊，我整个呢叫一个to list啊，它里面呢有几个功能，一个添加部分对吧，再一个是是不是列表显示啊。就实际上我画的这个框呢，就在做一个什么呢，在做一个拆解是吧，做一个拆解。好。来啊，我们来去准备去做一下啊，做这个事情呢，这个功能在这里啊，就组件化实现此功能，显示所有的todo列表，输入文本，按点击按钮的时候，显示列表的首位就添加到首位啊，并清除输入文本，这是一个需求的一个描述。好，在说之前我要跟大家说一下界面啊，功能界面组件化编码的一个流程，这个东西无比重要。

啊，就是做一个复杂界面，它是有流程的。而且流程是固定的。我跟他去分了三步。第一步叫拆分组件，就是刚才我们那个功能，我跟大家说我们要去拆分组件。就这一个怎么拆呀，大家说。啊，先大家知道一个界面，它先要有一个根主键。最外围有一个组件，能不能接着我们整个是什么样一个结构。是不是上下结构啊这一部分。是不是可以单独搞成一个组件，就相当于一个添加的组件嘛。呃，再一个呢。什么列表组件？那也就是说我们一共会有几个组件呢？三个最外面要有一个，因为要用一个组件把这两个给包起来呀。能看到吧，而且外面的一般我们叫什么名字呢。

叫APP。应用嘛。能看到吧，一般都叫什么意思，呃，这个我们可以叫什么。To do it行吗？添加嘛，而这一个我们可能叫做什么list。啊，你左边可以加个todo at todo list，你要想写简单一点，就叫ADD和list也行。能不能看到啊，这是我们第一步要做的事情。好。下面啊。后面呢，我们要去去写组件，写组件分为两步。一步先实现静态组件。说白了，先不做交互，也不动态显示数据，就把那页面给它展现出来。但是我们用组件化编码的形式展现，这样比较简单啊，这一步都是非常简单的。最后一步我们就实现什么呢？动态组件，那实现动态组件分为两小步啊，第一步我们先要初始化展现数据，后面呢才去实现什么交互功能啊，先不用背啊，你先简单的先看一下，我们在做的过程中不断跟大家强调。

好，刚才我们已经说过了，我们要去拆分组件，刚才是不是已经拆好了，来吧，啊，拆好了一共有三个。是不是三个组件来，我们来写一写啊，对，用类的形式发现class叫APP，既乘于ten react component。这个吧，OK，接着来一个什么啊，不是来个re re return是吧，啊，Return后面还不好写是吧？好，下面的看见C。一共三个吗？写好啊，这个我们叫它ADD。

这个我们叫他。能看到吧，来好。那大家知道I和list是不是我这个AP的子组件呢？那我们渲染的时候只需要渲染谁APP，这相当于现在前面做的事情，是我们的第一步定义组件。第二步干嘛渲染组件，那两个步骤的那个注释我就不写了啊，叫react dom.render。啊，谁APP。这叫did是吧，找到它。能不能看着？好啊，我们的组件就定义下面，我们要去做我们的第二步啊，就实现这个静态组件，就实现一个静态页面的效果。

但是呢，我们要组件化编码啊，这个里面来这个肯定有一个层次结构的。先我要跟大家说啊，一个组件它最终return的时候，是不是一个标签结构，必须只能有一个跟标签。记住，一个事情只能有一个跟标签，你不能这么写，看到我写一个错误的啊，这样行吗？不行，只能有一个跟标签，所以一般我会先写个div再说。看懂了吧，一旦标签也签到，尽量在外围加一个什么小括号，加个小括号给它包起来，这样看起来舒服一点。好，这个div的外面是什么呢？首先是不是这个有一个标题啊，啊一个标题这个这个不用抽一成组件啊，写在里面就行，来一个一大一点。叫什么叫simple啊，Todo啊，这个意思就行，好下面是不是两个部分。

这两个部分怎么写？应该这么写。这个能不能懂，不知道大家能不能懂我说的意思啊，接着写它，就是你写这个组件标签，实际上最终是不是会渲染它return的结果。看懂吗？啊好，下面是不是写II的是里面呢，是一个input的一个button，但是还是要先搞一个什么小括号，来一个div，来一个input对吧？呃，还有一个button。对吧，八上面是呃I的啊，接着是井号，就是几这个几是变化的，其实我不过我先填死写一个，因为我现在写静态组件嘛，就实现静态页面效果。嗯，好。

那再来一个什么。List里面下面是不是一个ul列表啊，先可以写死啊啊ul。Ii说过了写啊，我就写些a ABB得了啊，写写三个是个意思啊，因为列表嘛，BB。CC。就OK了。就是写完了。也就是说我的第二步啊，就算搞好了，我们来看一下打开。能看到吗？也就说现在我的数据是动态展现的吗？不是我有交互行为吗？没有这样的界面，我们就成为静态组件的界面。说白了，我们现在用上组件了吧，但是我们实现的效果是个静态页面的效果，所以我们简称当前的这种做法是实现了一个静态组件。这样好做，做完了再一个一个做。好，那我们的第三步去做什么呢？第三步我们要实现什么动态组件，但你的动态组件分为两步去做。

大家想为什么是两步呢？你在想啊，先我要做的事情是什么？实现数据的初始化的动态显示。对吗？下一步才是去做交互啊。如果数据都没有初始化，动态显示，交互做的没意义。这个能不能懂啊，那下面几个问题，我要是不是去设计初始化状态数据，好下面一个是啊。这里面我们有三个啊，大家看到有三个组件。那我把状态数据放在哪个组件里面呢？这个怎么分析，这是最重要的一个问题，就是数据放在哪一个组件。啊，这是无比重要的一个问题啊。就数据啊，啊保存在哪个组件内。

无非不就三种情况嘛，对吧，APP list。对吧，而现在还要知道啊，他们组件之间是有关系的，这是外部是APP，上面是I的，下面是什么啊OK好，那现在大家在想啊，啊，我怎么去看，我根据什么依据去看数据保证了你先得看数据哪些组件要使用。嗯，OK。不过先得分析出来。这个组件里面，你这个界面里面到底有什么数据。能懂吗？我们这里数据是什么？不就是这个列表吗？对吧，我们要展现的数据是不是就是数组数据，那我们可以给他设计一个名字叫什么。就叫to呗。是不是每一个todo不就是一个，相当于简单来说是不是就是一个文本。

能看到吧，啊OK，好，这个求助应该是个什么类型。你在你再去分析它放到哪个组件之前，你先把这些问题搞清楚，名称类型都要搞清楚，数组吧，用列表吧。好，这个数组放到哪个组件呢？看怎么看？首先得看哪些组件用，爱的组件用不用。用不用用怎么用呢？他要往数组里面塞数据。是不是这意思，因为I嘛，是添加，往里面添加，那历的组件需不需要需要，因为它要什么读便利，是不是它要读取变利，那也就是说现在是不是有两个组件需要我放到I里面好吗。不好。我发到历史里面好吗？不好，因为就好像这个东西吧，啊是吧，你们俩都需要，你们俩两个们都需要，都想要怎么办，怎么解决这个矛盾对不对，干嘛，这你应该是能想象来放哪去，放到APP里面，说白了为什么放在APP里面。

因为AP是他们共同的父亲，对吧，这样是不是两个人都能用得到啊，这样就是我们最终设计的依据。是什么啊，看是某个需要。还是？啊，还是某些组件需要对不对啊，OK，还是啊某些。组件需要。那如果是某个组件需要了，那就给他不得了吗？这很清晰了，对不对？如果就他需要，就他一个人，那就给他。对吧，OK给他，那如果是某些了，给共同的什么复型。

这个能懂吗？啊，这个应该是你是有这个判断能力的啊好，那也就是说我们要在APP组件里面是不是初始化的一个数组数据啊，初始化状态应该在哪，初始化还记得不。要看固定的，我跟大家说，这都是套路啊。这个写法是固定的，他必须要这么写，不写它包错啊，Pro接着。这不就是初始化状态吗？初始化状态固定的this列是对等于一个对象取名字，刚才我说过一个名字啊，To对吧？来一个什么速度？是不是可以给他设计一些数据啊，就希望他设计一些数据，哪一个啊，吃饭啊睡觉啊，他在是吧。

你们会打豆豆吗？打代码吧。这样搞好了，搞好以后啊，有了这个状态后，下一步是不是要初始化显示，显示交给谁写的，是我本身显示么？不是。交给谁去，是不是交个list，那也就是说我要交给他一个数组是吧，很简单啊，交呗。To数等于等于什么呢？啊，这个时候是不是要动态传一个数据啊？括号写什么this.state to6这是在干嘛？读状态吧，读状态OK，好，那我传给了这个list list要干嘛呀？

是不是要收啊，能听懂吧，在读自读这个属性之前，你得先申明。我们说过了那个接受的属性，你得说一下这个属性的值是什么类型啊，你是不是必须的。懂吗？就我这个list不接受属性吗？啊，你得在这个list的点啊，Prop types等于一个对象接收一个什么属性to lose啊，我们这个地方需要接收一个，哎，这已经写好了吧，引入了对不对？来写一下。叫大写的times点什么类型？啊吧，宿主，而且是什么必须的。这样写好以后，你这边再写就就能看到这里就。你就有底，你到时候取属性你就知道哦，我有可以取。

这写写是挺好的啊。好，那下面我们最终是不是取到出就子便利产生很多个UI ii对吧？那这个该怎么办呢？啊，把这个先去掉啊去掉去掉以后在这里面是不是要写GS代码，先看看什么事，大括号来一个，记得this c props to lose。能不能点什么嘛？Map，你说我手里面拿着的是一个数据的数组，但我需要一个什么标签的数组，必然用到数组的什么，Map power。能看到吧，好，这个时候啊，来写一个箭头函数啊，Todo index箭头啊，返回的是什么标签啊，对吧？接着里面显示的是todo，但是这个里面还记得吗？需要写一个特别的属性，叫K等于一个大括号，写什么index。

你要觉得这个长，你可以先把todo取出来。啊，这是什么意思啊诶。在这里面啊，写一个cost，写一个todo，等于this点。这个可以。看到吗？啊要看懂啊，尤其是我想跟大家说一下这个大号的使用啊，就结构副值。对吧，嗯，好，那也就是说现在应该能够显示这个列表了吧。这不已经穿好了吗，都。啊OK，好，我们来看一下看看啊行不行啊，不试怎么知道呢，对吧，刷一下。

各位，而且你最好是同时看一下有没有报错window吧，啊，有没有报错数据也正常显示啊，说明我们的这个初始化显示啊，动态数据已经搞定了。好，那下面我们要做的是这个第二小步脚步。这里面啊，主要的交互就是我输入一个数据，点击添加，要能够显示在这个列表的最上面。能懂吧，而且输的数据呢，被清理掉。因为你已经添加过了嘛。好来做呀，我们说做这个东西第一步干嘛呀。绑定世界对吧。啊，还有一个显示，其实刚才没做到位啊，刚才这个显示没有做到位，数字化显示就这一个。按钮上面的文本。

能懂吧，也就是说啊，其实这个刚好啊，主要是你这是怎么搞得这么好。写个写个啊，我写个。这个就不对了，这个数值是显示我将要添加的是第几个。能懂不？那也就是说当前应该显示几四应该显示四，我一点就是第四个了嘛，能懂吧，那这个初始化我们还没做到位，给他做到位啊，那我这咋办呢。啊，我的我的说白了就是我一上来我要给这个，给这一个，大家看看给这个爱的组件是不是也要传递一个数据过去啊。我传递一个什么呀。是不，我要去把这个to的长度给他传过去，他才知道吧？那不懂，那我传一个什么过去。传一个抗行吗？可以吧，等于，等于几呢？

括啊，这个时候是不是要统计啊，统计这个的一个长度啊，那想想看，我这个时候又要这么做，你不觉得有点。有点麻烦吗？这有点重复啊是吧，刚才还不做过这个事，做类似的事情吗？应该怎么做？哎，这工具他还有时候放浑啊。来一个。To，先把它搞出来对吧，接着我这边写起来就不就轻松一些了吗？不用这么长了。啊。是吧，好，那这个count传给了A，那传给了AA这边是不是要声明一下。懂吗？刘世明，跟刚才一样的，I的点proper type等于对象。

哎，这个工具傻眼了吧，他。嗯，来。看了吧，来，就是怎么讲大写的proper点什么类型。Number吧，对吧，这个是一。能看到吧，好，而我这边需要干什么呢？是不是显示一个数据，This的在哪个里面数据。是在状态里面还是在属性里面，属性里嘛，那就是pro嘛。对不对，你一定要知道你要操作的数据在哪里，对不对，点count还要加个什么一。能看到吧，嗯，好。那下面啊，就是初始化显示，我们来看一下，看看是不是轴里。

对了吧，啊对了。