00:00
好了各位,静态组件呢,我们就实现完了是吧?哎,这么一个效果,接下来呢,进行下一步就是动态的展示,这个列表,你注意我说了一个东西叫做动态的展示,现在红色框里这些列表啊,都是你写死的,我们回到代码当中呢,去看一眼,同学,这是你的list组件对吗?里边用了几个item组件啊,五个,那每一个item组件,同学你要是直接这么写,那你说是不是五个人长得都一样啊,OK。那你看打开item,所有人都叫叉叉叉,不对,你得动态的把东西传进去做展示,对不对啊,还有就是说,我这到底渲染几个item,是不是也得靠循环遍历生成啊,OK,页面有东西是动态的,就是这个列表是一个动态的列表,我们一直在强调状态中的数据。驱动着页面的展示,对吧,那我问大家每一个组件是不是都有自己的状态呀,你比如说同学这什么组件呀,是不是hier组件,来我给你写上有没有自己的状态可以有呀。
01:06
这什么组件呀,List,我问你可不可以有自己的状态呀,可以呀,那问题是哪个组件里的状态保存着这一堆要做的事儿呢?对吧?你可能马上就会想到,老师,谁展示东西,我就把状态放在谁,那不就得了吗?也就是说老师我能猜得到,我让list这个组件当中的状态去保存着这些数据,那不就得了吗?老师,你看我都想到怎么写了,在组件里边设计好状态,你比如说啊,叫做todo,是一堆要做的事儿,然后它呢,是一个数组,里边包含着很多我要做的事,然后我从状态里边读取我map便利不就展示到这了吗?可以,你这样做能展示列表,但是你得考虑后边的问题,同学,我问一下hier组件是吃干饭的吗?他回头是不是要把用户输入的东西,诶,是不是交给list呀,你如果当时决定把状态啊放在list这块。
02:12
也就是说,List这个组件中的状态帮你保存着一堆要做的事儿,你以后就绝对得有这个动作,你的hier组件得把一个要做的事儿交给list,然后list再把这个事儿放在自己的状态里,然后状态在驱动,驱动着页面的展示,是不是就出效果了?哎,同学,那我告诉你,目前以咱们的知识量,有一步你实现不了。就是hier组件想给list组件递点东西过去。引导大家一波,同学,你说整个应用的外壳组件呀,是不是APP呀,嗯,好,APP里边来,我问你同学是不是有个组件叫做list呀,好写上,那APP里边还有一个组件叫什么呀。
03:06
是不是叫hier啊?好,我想问一下同学,APP想给hier传递一个东西,你比如说传递一个A,它的值是一,APP想给list传一个东西叫B,值为二,怎么传?同学APP和hier啥关系啊,父子APP和list啥关系啊,父子那所以说来传打开APP。是吧?APP想给hier传啥来着?A值是几啊?一想给list传什么来着?B值是几啊?二、这是不是叫传递pro同学,那我问一下你是不是给hier传东西了呀?那hier就想输出一下,那你说是不是可以conslo this.pro.a。对吧,回到这儿看效果,一是不是能拿到好,再把这行剪切走放到list里面,我再做做一个验证啊,APP给没给例子传东西传了同学B值为二,好了,输出走不能叫A了,得叫B走能不能传能哎刷新一下啊走能不能能好的,那也就意味着同学APP是所有组件的副组件,他想给谁传东西是不是就给谁传东西啊好。
04:28
那同学啊,我再问你另外一个问题,Hier现在想给list传点东西来,你传一下,我看看,就以目前咱们的知识量,Hier想给list传东西,同学你要注意了,Hi和list是父子组件吗?他俩是父子关系吗?不是,那你告诉我他俩啥关系呢?是不是兄弟组建?这也不用再有什么引导了,同学,这是APP里边的hier list foot是不是都是它的子组件?那我问你hier list footer之间是不是都是兄弟呀?嗯,是兄弟组建吧,以目前咱们的知识量,没有办法办到兄弟组建之间进行数据的传递,对吗?
05:10
啊说老师好像,哎也是哈,老师那这嗯那那那怎么办呀,同学,如果你刚才分析的时候,你真把一堆todo那些要做的事儿,你真是放在list这个组件的状态里了,你再往下写就是个麻烦事,你就写不下去了。哎呀,说老师那这咋办呢?瞧着我们用这种方法去解决,我问你啊,同学,APP是不是所有组件的组件呀,好,APP里面有一个组件叫做list。写好list APP里面还有一个组件叫做hier,好写好OK吧,我们这么设计,同学啊,我呢把状态啊,就是一堆要做的那个事儿放在APP的状态里边,APP是不是组件是好,我把一堆要做的事儿咋的。
06:09
交给APP。啊,然后list不是想做展示吗。APP和list是不是父子关系?父子之间传递东西,同学用props是不是就挺合适的?好,我把一堆要做的事放在APP里面,通过props传给list list接住做展示。好说老师,那后期hier不是想往这个状态里边加一条数据吗?但是这个状态目前在APP里啊,那同学。一会儿我们可以用一种方式就让hi的这个子组件能操作它父组件里的状态。哎,也就是说兄弟之间hi和list之间没有办法直接说,哎,我是哥哥,你是弟弟,我改你的状态,以咱们的知识量,目前所学的你写不了,我知道后边咱可以用消息订阅与发布是吧,但是在这至少你实现不了,所以说我们的目标就是同学你说啊APP,我说它是所有组件的副组件,然后咱再说这个hi。
07:16
它是APP的一个子组件,我就不再写了啊,节约时间,那这呢叫做list组件,无论是hier还是list,是不是都是APP的孩子,那同学你说list用不用todos,那些数据用不用,状态用,因为他得做展示,你说对吗?那同学我在问你,你说hier这个组件呀,你告诉我吧,它用不用todo呢?这个hier其实也用,只不过hier不是拿到东西做展示,Hi是往todos里边加一个东西,所以说我这么说你认不认可,其实hier和list都用todo。都用这一堆数据,那所以说哥哥也用,弟弟也用,那哥哥和弟弟之间呢,还没有办法进行交互,那怎么办呀?来吧,放到他们共同的父亲那里边,APP出面了,说来吧,兄弟俩别打架了,你俩之间不是不能沟通吗?你俩之间目前不是不能传递数据吗?你俩别打架,你俩把东西交给我,我帮你保存着啊,哥哥如果想用,那我给你,你用你便利你去展示,弟弟如果说想,哎,往我这里边儿添加一个,那我通过一种别的方式是吧,其实就是通过函数调用的形式咋的?哎,你把东西给我就可以了。
08:32
啊,所以说同学咱们现在必须要明确一个事情,Todo那一堆要做的事儿必须放在APP的状态里,否则咱写不下去,我知道后期有解决办法,但是至少现在我们是写不下去的,所以说同学要把那一堆状态放在哪,放在哪APP里面。那好,走啊,State对吧,一堆要做的事todo,它得是一个啥呀?是不是得是数组啊?同学,你当然可以直接这么写,叫吃饭是吧?哎,睡觉,你这么写还简单呢。
09:11
里边都是一个一个的字符串,拿出来便利直接展示就得了,但是啊,同学我问你就拿吃饭这件事儿来说,它是不是有状态呀,他自己本身是不是也有一些标识,你比如说吃饭这件事完成了还是没完成,对吧?哎,所以说呀,同学你不能用一个字符串代表吃饭这件事儿,吃饭这件事儿得是一个突渡对象,哎,比如说它有ID,吃饭是第一件事儿,所以说呢,我就写001啊,然后是不是得有名字呀,名字叫吃饭,哎,是不是还得有一个属性标识,我吃吃饭这件事儿到底是完成了还是没完成,所以说用这么一个属性叫做done是否完成,如果它的值为提rue为真,啥意思?吃饭这件事儿已经完成了。
10:04
因为你要知道这是有一个按钮的,叫清除所有已经完成的,如果你直接在这儿来,同学你就想一下,你在这儿直接写个吃饭,我就想问你,你怎么区分吃饭这件事,他是完成了还是没完成,对不对,哎,好了,撤回来走,有吃饭,那再补几个吧,睡觉打代码。好,那这叫002,这叫003,到这呢,False是吧,别都写错了嘛啊或者这样,前两个是完成的啊,但是代码还没敲完是吧?哎,叫做false,吃饭睡觉都完成了啊,代码还没敲完,那同学接下来怎么办?你得把这图DOS传给谁才对。你得把这todo传给谁,谁做展示是不是就传给谁呀?啊好,那这写好注释初始化状态。来吧,传给谁?传给list,通过prop写todo,对吧?走this.state点是不是todoth?那如果你想做的更好一点,在上方是不是可以提前取好this.state取出谁呢?Todoth,那这呢,就省心了呗,直接写啊说老师,那这有没有什么简写方式呢?你看todos等于todos,这没有,这不同于对象里边有简写方式,这就是这已经是一个比较简单的形式了啊todos好了,同学,传没传给list传了。
11:30
那list是不是就得接呀啊,那打开list怎么打开呢?按住CTRL键1.listoklist开了。那同学list是不是得接呀?好,这也别输出这B了呀,删掉,在最上方解构赋值,从哪取东西this.props取出谁同学你刚才传什么了,你就取什么,你刚才传的是不是todo词?啊说老师因为这写的todoth,所以说呢,哎,这我就得写todos,根本不是那么回事,兄弟你想一下,如果我传的是A,这是一,你想拿到那个一,你得咋写呀,你就得写A呀,哎,所以说要知道那个todoth是为啥写它不是因为第二个,是因为第一个对吧?哎,好了,回来,那走拿到谁呢?Todoth同学你说啊,你分析。
12:15
我有多少个item,我是不是得看有多少个todos要做对吧?也就是说todos这个数组的长度决定了我要渲染多少个item,所以说这非常简单,来,走着this点。是this点吗?不用了,因为在这儿不是自身的状态了,你这不拿到了todoth吗?那所以说在这来吧,Todoth.map便利吧,啊,你拿到的每一个是不是todo啊,Todo司是个数组,存储着一堆要做的事,Todo呢,是每一个要做的事todo是吧?哎,好,那这怎么办?Return return什么呀?Item好,我们看一下效果保存,回头走刷新一下啊整体来同学报了一个警告,他说每一个人都得有一个唯一的key,那你告诉我是怎么回事吧,你之前就遇到过这个问题,你便利的时候,Item这里边是不是得写一个key啊,等于说老师那用谁呢?我要不用用index吧,遍历的时候不有索引值吗?啊同学咱之前说了,这索引值也不是不能用,对吧?咱们在进行那个DOM dif算法分析的时候,对不对,不是说它不能用啊,如果每条数据有自身的唯一标识,那你最好就用自身的唯一标识,同学,每一个todo是不是都有自己的。
13:28
ID啊,那还想啥呀,TODo.ID就可以了吧?啊,那这其实可以再精简一点对不对?哎,这可以写成诶一个参数的形式ID好了,回头瞧,刷新一下啊,走警告是不是没了?同学是不是三个,因为APP里边我有三个要做的事儿,所以说它渲染了三个item组件,但是还是有点不太对的地方哪儿呢?同学,这些todo是不是都叫一个名啊?那不行。那怎么办呀?
14:00
来到例子里边,同学,你要这么渲染,你的意思就是我要渲染。Todo长度啊,那么多个item我就渲染了,那我问一下,那你去渲染的时候,这item打开来,我问你里边是不是都叫叉叉叉,那不对呀,那你是不是得把东西传过去呀,那问题是你都给item传啥呀。那就看每一个todo都有啥信息,有啥呀,ID有啥呀,Name有是否完成的标识,那你说是不是都得传过去,来写ID等于走TODo.ID来再写name,等于todo点内对吧,哎。那你想啊,同学,你传了ID传了name,那还得再写呀,还有啥done就标识着这个todo到底是做完了还是没做完,对吧?同学呢,我问一下,如果一个todo。它有40个信息,你一直这么写下去啊,不可能的,对吧,你这么传当然是可以来,我们先这么传着啊,回到这个item里边来,同学回到这你给item传什么了?ID name还有当,那所以说来到这儿是不是就得接呀,Cost结构赋值this.props都接到什么ID name还有当。
15:27
对吧,来同学这别叫叉叉叉了,这直接叫name对吧,缩紧调一下来,好回头看效果走吃饭睡觉打在哪是不是都出来了,说老师这有警告,说ID和当已经定义了,但是没有使用,那你看嘛。你确实定义了done和ID灰色的,为啥呀,定义了没有使用对吧?哎,先别考虑这个警告来,同学你这么传就有点儿不太好,一堆东西一点一点写,同学批量传递,不知道你还记不记得了,点点点速度。
16:01
Todo本身是不是一个对象,用点点点是不是可以批量的把东西传进去,必须得对之前的知识有所记忆啊,那所以说在这呢,我还可以这么接,同学你接是不是一直都这么接呀,那也就是说你如果用了这种写法,你12行的写法和我接下来13行的写法写法啊,那都是等价的,点点点来吧,Todo。它俩是一样的效果,那为什么非要写12行呢,对不对,哎,删掉走,这么来回头东西也能出来啊,刷新一下。好,那再找。回到这儿,这个ID和name啊,正常来说它是不是定义了没有用,它应该还有这个警告的,来我们刷新一下啊,走,它应该是有这个警告的啊,那目前没有了,那没有就这样吧,是吧,如果有这个警告,同学他告诉你了,说你定义你没用,那你就先把它删进去,什么时候用什么时候再定义,那不就得了吗?是吧,好了,同学还有一个问题啊,就是吃饭和睡觉是已经完成的事儿。
17:03
吃饭和睡觉是已经完成的事儿,你觉不觉得应该打上勾啊?那打代码是没完成的,是不是不应该打勾啊?哎,那所以说这怎么办呀?在这里input框它的类型是一个check box,那到底选还是不选呢?大家还记得吧,原生里就学过得靠,这个属性叫做check的check的的值呢,如果为真为cho,那你看吧,三个人呢,就都勾选上对吧?先别看这警告,一会儿咱再说啊,他的意思是什么呢?他的意思是如果你这么写,那就把东西都写死了,他的意思是兄弟,你这么写不对呀,是吧?那你这么写呢,你看你取消勾选的时候,你看你勾不掉了吗?你写死了check it就是围错啊是吧?啊,那读读他这警告,他咋说的啊,你看他这么说的,他说啊你啊,提供了一个check的属性啊,在这里边,但是你却没有写unchang这个处理函数,那所以说它就变成了一个只读的了,只能读取,你改不了。
18:03
好了,你看你点击你看你看你看你看是不是勾不了啊说老师那这怎么办呀,他勾不下去了呀,啊同学那我说一下啊,你这啊可以换一种写法,就是不用check的,你用这么一个属性叫做at check it的。Day for check和check什么意思呢?Day for check it是一上来到底勾不勾选,后续是允许你改的,你比如说回头再看刷新一下警告是不是没了啊同学你看这俩东西又出来了是吧?哎,出来了,那咱就给他这个当,我肯定得用啊是吧?同学这个当是不是就是个布尔值,所以说你说这是不是得这么写了呀,当你到底是完成了还是没完成,我得听这部耳值的呀,对吧?好了,回头来瞧刷新,同学吃饭和睡觉是完成的,是不是就勾选,那么打代码是没有完成的,是不是就不勾选呀?OK,那我如果说吃饭我这刚才勾错了,其实没完成,那你就取消嘛,对吧。
19:01
哎,所以说同学这块一定要搞懂啊,Defot checkd呢,只管你第一次上来到底勾还是不勾,以后想改是可以改的,但如果说你写成了拆开D,那这就一下子写死了。知道吧,朱老师,那以后那我想改,你想改你就必须得写unchanged。啊,你想想同学你勾选和不勾选是不是一种改变呀,哎,所以说呢,目前同学我们不能一下子往后考虑太远,目前反正他给我提示了,这儿他也说不对了,这儿呢我也取消不了了,那所以说呢,我们是不是就得写defat check呀,你看一写default check是警告也没有了,是吧,这勾选的是也能取消了,允许改了,那你看我们肯定想到的得用default的,对吗?但是我说一下同学你这用default check d。后期会产生一个bug。啊,我不想用一些巧妙的方式把这个bug就避免了,哎,我也不说了,大家一听,哎就这么个事儿,不行啊,得演示一下,我先用着,现在我为啥用呢?因为这东西现在用起来香,我一用它警告也没了,我一用它,哎这呢还允许我改,所以说我就考虑,诶我想用default check的OK,好。
20:13
说老师这didd反正现在是好像真没用,那咱就是吧,先给它删下去好了,同学,一个初始化的列表是不是就展示完了呢?啊,回到APP里边来,关掉,APP里边我再加一个看看能不能行啊,吃饭睡觉打代码,那写一个女同学比较喜欢的活动就是逛街是吧?哎,这是第四个,那逛街t rue也逛完了,那回头上页面看效果,逛街是不是出现了,是不是也完成了呀,好,我们完成了初始化的列表展示,那那这小节呢,我们先停一下。
我来说两句