08_尚硅谷_组件三大属性(2)_props.avi原创

哎，前面我们说定义组件是不是有两种方式，一个叫工厂函数模式，一个叫内的模式。啊，我说一个用来做简单的，一个用来做什么复杂的。那对于我们其实那个是个简单说吧，什么情况下用。不能用那个工厂的模式了，只要你有状态。你这个组件如果有状态，那就不能用工厂的模式了。这个能懂吗？譬如说这个我们当前这个有没有状态。有，但并不是所有组件都有状态。那么懂，如果它没有状态，那我就可以用这种简单的方式啊，函数的方式肯定是比类的方式要简单，语法要简单很多。而且它的效率也高。为什么效率高呢？因为他这种方式需要创建对象吗？不需要，而我累的方式呢？需要他们创新对象怎么调用呢？

能懂吗？如果从绝对的效率上来说，我的函数的方式效率也比内的高。看得出来吧，啊，但是它有局限性，我们所说的简单就是没有状态的组件。嗯。现在我们就有一个衡量的标准。因为开始我们不没有学状态吗？所以就没法说啊，OK，那也就是说一旦有了状态，我必须用什么方式内的方式去定义组件。能懂吧，好。来啊，说清楚这个之后，下面我们来看另外一个属性。啊，除了state不还有两个属性吗？一个叫props，一个叫对吧。来，我们来看另外一个叫B。这几个都是对象啊，都是对象类型。

我们来看这个，这个呢，我们看一下我们要做的效果啊。要效果来。我们现在呢，有一个需求叫自定义，用来显示一个人员信息的组件，假设这人信息有姓名、性别和年龄，就这么写，这就是一个组件。这也是个组件。就是我把一个组件渲染两个标签，假设这个组件叫person。这是一个标签渲染的效果，能不能看到啊，这又是另外一个标签啊，就是这一个同样一个组件可以反复用吗？那组件的好处就是可以反复用。定义出来以后，我的标签是不是可以写多个呀，嗯。但是显示的信息一样吗？不一样，那不一样怎么样，不一样呢？那也就是说我这个信息是我这个组件内部的状态吗。

是吗？不是，你想想看，是六部中方大量，咱俩不应该都一样吗？那应该是什么呢？我怎么样，譬如说你要想看标签。是不是用来显示图片的，但它本身知道显示哪张图片吗？那怎么办？是不是通过标签属性传过去啊？那现在你也有一个途径。你是用来显示人员信息的？但具体是什么姓名，什么年龄，什么性别，确定吗？不确定怎么办？是不是要通过标签属性动态的传给他，他来去读取显示啊。那么呢，其实跟我们的image标签的那种思想是一样的。我们很多标签是不是要显示一个动态的信息，但它本身是不知道的，对不对，但它可以去读标签属性来显示吧。我们imagine指定SC图片是不是就出来了。

能不懂啊，OK。就显示图片那个操作，Image标签是不是早已经做好了，早已经写好了，只是他不确定什么src是多少，你只要传看SC它就能显示。不懂啊，OK，来，我们来做一做。也就是说当前这一个组件。他有状态吗？没有，只需要接收属性是不是就可以。来我们来做一做啊，那既然这样，那我们就。用简单的方式。无论简单复杂，还是得两步。两步永远不会变，哪两步，第一步啊，定义组件啊，我一再跟大家强调流程相关的啊，定义组件第二步渲染组件标签啊，一定要说到位啊，叫渲染组件标签。

好，定义组件我们说有两种方式，但是呢，我们分析过了，这个组件呢，它没有状态。对吧，它接受的是属性，属性又不是状态，对不对，所以我们可以用简单的方式，用什么方式定公差函数。啊，半天不出来，还要我自己写来写个名字。你组件起个名字啊，组件的名字就是根据你的这个组件的意义来去取，叫什么person呗，Person就是人的组件。人的学把人的信息或者破衣服都行，对吧，OK，能看到吧，好。但是我这个组件是不是要接收属性的呀，你想看它一个函数怎么样接收属性。传参数吧，这个应该能能理解吧，这个地方它是有参数可以接受的，叫pro。啊，Pro，好，这里面我写什么呢？对吧，Return里面我们最终是不是一个列表啊，那就应该是一个ulii。

对吧，每一共几个三个吧啊姓名多少是不是一个动态的值，而这个值应该从哪个里面读，这个你应该知道的，从什么里面读。那里面pro首先要说是个什么结构，是数组还是对象啊对象对吧？好啊这个呢，我们先不写啊，我们先啊先放着，因为那些名字呢，我们还不确定姓名还有什么年龄。嗯。呃，年龄还有一个什么性别。对吧，啊OK。肯定在这个里面对吧，具体是什么名称我现在能确定吗？不能，当然你也可以设计，说我会设计三个属性标签，属性名name age sex，可以吧，那你想啊。

那你说我怎么读值，这就它其实想通的，点什么name呗是吧，接着这个下面呢，点A级呗是吧，这个呢点S呗。能看到吧，好，那我这个就非常非常轻松了，渲染主键标签啊，就是react do.re啊，非常固定啊，写组件标签吧，来一个什么person。对不对，接着呢，啊点呗。指定一个一个一。够了吗？

够不够好了，没有，也是能不能写出来。能不能明显不能嘛。对吧，为什么是他没传数据啊，你没数据怎么可能显示出来东西呢，能不能啊，OK，那也就说在渲染标签之前，其实我手里应该有数据，对吧，我应该手里有个人。能不懂，现在我一个人啊，叫P是一个对象啊，里面呢有啊name啊，不一定要叫，譬如说我就叫my name行不行也是可以的啊，但是一般会叫name啊蒂啊譬就搞to吧。还有什么A是吧，再一个什么女啊，为什么一定要是男的。好，现在干嘛。是不是要将这三个数据给它传过去，传呗，也就是什么M等于多少，这个等于多少，P点内那行吗？不行吧，应该用什么大括号，因为这就下面写纯S代码。

对吧，下面。一次是吧，P点什么A继续等于啊P一点这里也就看得出来，我们标签里面的属性名可以随便写。可以任意地不是固定的一些名字，但是现在我对我的情况现在还能随便写吗？要跟这上面的要什么，是不是要对应一致。这个应该是可以看到吧，好来看一下。是不是显出来了，看看有没有报错，没有吧，没有，嗯，就这么简单。

啊好，但是呢，还有一些相关的一些东西要说一说啊。啊雷项目呢，首先啊，我们这个标，我们这个组件呢，接收一些属性。那你有没有想过啊，这个属性的值的类型。是不是要限定一下。譬如说举个例子，你这个A级吧，你应该传数值，你别传字符串过来。能懂不？你要传一个数字，你要传一个传个什么过来，那也不太好，其实这里面来看一下，这里面有些需求，关注这个需求就行啊，我们来看一下。啊，什么意思呢？啊，这边先把这个需求做完，我再继续往下说啊，如果性别没有指定默认为蓝。啊，如果年龄没有指定啊，默认为是吧，这里面其实暗示一个事情，这个性别和年龄可以不指定。可以不传，能懂吧，但是姓名必须得传。

能懂吗？啊，那现在。我实现这个需求了吗？没有。啊，首先我们来说一下这一个默认值的问题啊，OK，也就是说什么意思来看着啊。假设呢，我这个地方我还有一个。对吧，你跟他妈。可以吧，好，那我呢，还一个PR。P2这个面呢，是指定的年龄，是指定的姓名。他就借别的都没指定，别的没有指令应该什么。用这些默认值。啊，OK，那啊P。啊，那我现在去睡了。渲染上，那也就是说我只是传递什么呢？传递那个name呀，是吧，P2点什么name，这是一个什么。

对吧，但是我现在大家看一下手里。没有。对吧，因为我需要有默认值啊，对吧。这个该怎么办呢？那肯定是有它对应的语法去来指定，如果你没传，我有一个默认值是吧，这是什么语法？二是其次的，其实你先要知道应该有语法的。啊。来，我们来看一下它的一个呃，语法的问题来，诶叫什么。默认属性值，那也就是说啊，给这个组件啊，这个类或者这个工厂函数指定什么属性。Default prop，看着名字你就知道用来指定默认值的。有没有看到？好，那我们就来写一下。在定义完组件内以后，我们可以去给组件指定。

属性什么？默认值怎么写的？大写的点default pro等于一个什么对象？有对象才好多个吧。首先是性别默认值，为什么来？接着还有一个什么A默认值，死吧。可以吧，好，我们来刷一下走里。取效果了吧，效果。还有一个事情啊，还有一个事啊，我们希望这个name是必须传的。这个该怎么办呢？你看我现在不穿可不可以啊，看他报不报错。这样不好吗？懂不懂这样？也就是说你的主见容易让人犯错误。懂吗？

OK，你最好是他没传，你就给他错误提示是吧，你哪个属性没传，必须得传，这样用的人就不容易犯错误吧？啊，这说明我们的组件定义的还不够好。那怎么办呢？啊，有必须的穿啊来也有它对应的语法，我们来看一看。好，这个地方啊，可以给组件的，那指定一个属性叫proper proper什么意思，属性type类型。对吧，指定类型。好，也就是说我可以给name和age，它不仅可以指类型，还可以指定什么呢？Is required什么意思？必须的。能懂不啊，是必须的啊，既能指定属性值的类型，能看这使菌这是干不一样。那这个类型是哪个里面指定呢？啊，这个这个现在的语法，这个语法都已经过时了啊，新的语法它是一个，它是一个单独的包，我们来看一下那个文档，文档里面有说明，因为我们现在是用的较新的版本。

文档。找一下他在这个高级索引里面，大家看到有一个使用pro检查什么类型，其实还包含一个必要性。啊OK，就是说我们现在啊，我写在这个word里面的是这种写法，就react点他来去做限制啊这一个呢，从15.5以后已经被什么呢弃用了啊请使用这个库来代替，那也就是说我先要把这个库给的什么，是不是下载下来，不是不仅是引进来先要下载。那不懂再引入使用啊，现在我们所使用的版本，我们来看一下我们所使用的版本，这个还还不好好看一下那面有没有写。

是不是16.2已经超过他的版本了吧，就是基本上最新的版本。那怎么办呢？首先我们来去引入啊，引入下载啊，来下载这个我有一个啊。就这个。能看到吧，把它看见C。搞到我们当前这一个GS里面，接着在在我们当前这个里面。是不是引入一个。Map。就这个吧，啊OK，好，那下面我们要说一下来啊，如何来去写的。现在指定啊，属性值的什么类型和。必要性是吧，两个方面，记住啊，是属性值的类型，不是属性名的类型，属性名是什么类型，是不算它是名称对吧？OK，来固定的写法，person.proper type等于一个对象。

为什么要是等于对象，因为它里面有多个指定。可以指定多个，首先我来指定name对吧，来它是必要的，这个该怎么做呢？啊大家看呢，有一个proper。就他。啊，OK，就是我刚才引入的这个库，它向外暴露了这个东西点它什么类型使俊。有没有看到点。1REPAIR，你看它的提示啊，提示是那个工具读取了一个库啊。能看到吧，好，譬如说我希望我的年龄啊，年龄是一个啊数值，但没有强调必要性。

因为我的年龄可长可不长嘛，OK，来一个什么proper.number。就够了。难道，所以我没有强调它是必须的？好来看一下，那也就是说我写好它以后啊，如果我不传。那应该会有错误的提示，对吧，看一下。他说什么？他这个说这个name被标识了什么required是必须的，对吧，但是呢。现在这个值是什么啊？你看的数什么意思，不就说你没传吗？

是不是这意思啊，已经告诉你吧。嗯，OK，这样的话啊，我们。使用者是不是就知道啊，我必须传递。是吧？OK，好来故意我现在呢，传一个A级啊，传一个A级等于等于是吧。对吧，等于18大家看看我不是等于我是这么写啊，和这么写它有区别，这么写。是什么？数值18。怎么弄？我要这么写呢，是不串是吧。难到不好，我们来看一下。说什么？希望是一个什么类型number，但实际上什么类型是串类型。

所以我就是想传，我也应该传什么大括号啊，传个传个28啊，传个别的字别传18了。因为我传了十传18跟本人默认18那个一样，这样不太好啊。能看到吧，啊，这样我是可以做到这一点的。嗯，这里面我们就指定了一个默认值，以及它的啊类型和必要性。下面再说一个点啊，再说一个点，现在我们上面这里是不是要需要传三个属性。我有更简单的方法。看着我啊。我写一下，写了再说。看看我怎么写的呢，大括号点点点P。

啊，OK，这个三点运算符有时候是标准的说法叫扩展运算符，对吧？诶它用来干嘛的呢？先看一下有没有效果啊。可不可以可以，那怎么回事呢？啊，最好给一个给一个二三啊给一个给一个不同不默认18，因为你就18不太好，这个我这点值就不18了吧，这啥意啥。首先你别管，你就是说你你自己应该推断一下它起了个什么作用。啊。好，我们来说一下这个点点点它其实有两个方面的作用啊，有两种作用。啊，一种呢，我称它为打包啊，另外一种呢，我称它为解包啊，其实你要你要说去网上找你也找不到啊呃，什么叫什么叫打包呢？其实非常简单，就是把多个数据搞到一起来。

搞到一个包里面所说的包其实可能是对象，也可能数组能懂吧，啊打成一个包，那什么叫解包，就将一个数组或者一个对象里面的数据给他什么拿出来，这明显一看就在做什么拆包解包对不对？我这个拼音里面是不是一共有三个键子，对。对吧，属性名和属性词吗。那我现在做的事情是不是相当于把这三个属性分别传给这个？就相当于写这个嘛。他们是本能的。能看到吧，现在实际上是一个解包或者叫拆包，对吧，那什么时候是打包的作用呢。我定一个函数。丁函数我写个点点点啊as。

对吧，但是我去传的时候，我要定一个定一个名称啊叫FN，我去调用的时候，大家看FN括号，传个一传二传个三。你说as是个什么类型数组，能懂吗？那数组这个数组这个点点点的作用是什么？就是把加这里面三个数据给它打成包，放在哪个里面，相当于是不是打成了一个数组包啊。看懂不，这不打成了一个数据包吗？这个包是一个包裹容器的意思。容器无非不就是宿主或者地下吗？听懂不好解包，其实我们以前学的不是这个是什么呢？我有一个，我有一个假设，我有一个速度啊叫A1假设它等于什么呢？等于123可以吧，那我呢，现在呢，要新生成一个数组，又有一个新的数组叫AR two。它呢，它在哪，它是左边有一个六啊，最后呢有一个有一个九，中间呢就是123。

你怎么办，你是不是点点点什么A逗号。你说现在点点脸在干嘛？我的个天那什么解包，因为你手里有包对吧，必然是解包用了点点点对吧，OK。能看懂吧，其实只是说现在的包是一个宿组而已，对不对啊，现在拆包的时候是不是个宿组拆一个数组而现，而下面这个是在拆什么？猜对象，你管他猜对象拆数组了，只要是拆容器就行，对不对？嗯，OK。啊，要有这个理解就好了啊。其实你只要理解这东西啊，就很好办了。啊，用这个语法是不是要简单一点对吧，写法就很我告诉你E6的很多语法。

都是一些语法堂。知道什么叫语法糖吗？就是一些简洁语法啊，OK，就糖吃要比较甜嘛，啊就程序员怎么样感觉甜，就是我少干活，活又出来了。那是最好的。好，那基本上呢，我们就把这一个给大家去说过了，但是我还是要再说一个，就是如果我不用那个，不用那个就是函数的形式，我用类的形式该怎么去写啊，也把它写一下，这个也要写一下。用内的形式我们来写一下。那我就要定义一个class，名字叫啊去继承于react.component，对吧，好，再写一个什么，写一个render对吧，OK，这样的，再来一个什么return啊return的就是这个。

但是return的这个这个得说一说啊，我本身直接看不到pro，那pro在哪个里面。不是在render里面，那可不行，我们刚刚说过了，组件对象有三个三大属性啊，State对吧，Pro这里写什么this点呢？试一试吧，啊，OK。不懂是吗？啊，我们刚刚不说组建对象有这么一些属性吗？现在我一旦我传了数据以后来看一下这个。工具，工具很有用，现在就能看出工具的作用了啊。打开你看。也就是说现在他看到了我的组件对象有一个属性叫什么pros，它里面是不是有三个属性，而我现在做的事情是不是读啊。

不就读这三个属性值吗？认识能丢吗？不能，This代表谁组建对象，而这里面显示的是谁的pro组见对象啊。能看到吧，啊这个工具很有用。当然你也可以打印输出，也就是说你在re里面将this打印一下就能看到。它内部的结构。你看这不有一个prop吗？Prop。这三个属性吗？听懂吧，如果你传，它必然放在这里面了。能不能理解啊，OK。那这两种写法呢，大家都需要去知道啊。明显上面这种肯定要简单一点是吧，啊OK。

行，那整个就没了。