00:00
好的,来,同学们继续聊这个pros,接下来说一个注意事项啊,那就是是只读的,只读什么意思呀,只允许读,不允许改。你看一下我们这个案例啊,打开页面,对于第一个人来说,他的名字是不是叫做Jerry,好说老师,我对他的名字不满意,我想给他改名。一个最正确的办法是在这儿改Jack。回头他肯定变,但如果说呀,你这么写,老师我传的还是Jerry,但是我想在这儿呢改this点点拿谁name老师我想给改成Jack。那你就完蛋了。回到页面看效果。不出东西了,控制台报错了,读第一行,读一下就可以。他说,我不能够在一个只读的属性name上作出任何的修改。
01:01
因为name是只读的,不允许你去改,OK,好,回到代码当中,那写好注释,此行代码汇报错,因为pro是只读的,然后那这行代码既然都报错了,我就得给他注掉,要不代码走不下去了呀,有些同学说,老师,那你这修改咋没事儿呢啊同学,这不叫修改,这叫运算。我拿到,我拿到了你原来的age,然后呢,我给你加了个一,这叫运算,这不叫修改,如果你写出这种代码来,这叫修改,不仅运算了,把运算完的值要付回去,那是不可以的,那在这说的就是A,我不能做出任何的修改,这呢需要大家注意一下啊,Prop是只读的,所以说啊,同学一般来讲我们只是读取一下,然后呢,哎用啊,一般很少说,哎,我读出来再改,因为你也改不了。
02:00
好啊,那接下来呢,我们继续说一个简写的方式state呀,打开是不是有简写方式啊,那其实pro呢也有,但是这个简写方式呢,就比较简单了啊,那我不想在这个里边呢进行什么修改,留在这儿我给你复制一份,CTRLCCTRLV改名走。三名字就叫做prop的简写方式,好,怎么简写呢?其实很简单啊,同学,敲几个回车啊,我先,我把我写的代码呢折叠起来走。干嘛呢?哎,在创建组件的,这是干嘛呢?对标签属性进行类型以及标性限制,这是干嘛呢。哎,指定某一个属性的默认值,好,我可以说红色框里的代码呢,都是定义组件相关的,你定义完组件,哎,限制一下什么默认值,蓝色框里的代码呢,我可以说呢,都在用这个组件,对吧?红色是定义,蓝色是在用,我们观察一下红色框的代码,你觉得有什么问题呢?你说你这块本身写了一个类,就在定义组件了,那么对这个组件进行一些限制啊,默认值啊,还得甩在内的外侧,这就不太好。
03:23
一个最好的办法就是你这个类里边就囊括着所有跟这个组件相关的东西,你比如说对状态的初始化放在类里边,对标签属性的限制放在这个里边啊,默认值的指定也放在这个里边,而不是说直接甩在外侧,也就是说一句话吧,想让红色框里的代码直接跑到类的里边去。那怎么办呀?观察一下,从语法上来讲,你是不是就是在给person这个类的自身加了两个属性,一个叫做pro types,一个叫做default pros,对吧?你看给这个类本身诶,加一个属性,再加一个属性,那么给类自身加东西,我非得写在类的外侧吗?
04:08
其实写在类的里边完全可以,我先不在这写,关掉,回到复习里边找到类的基本知识,咱之前是创建了一个汽车这个类是吧,我把这些代码呢都删掉,创建了一个汽车的实力叫做C1,名字奔驰463,价格199COLO输出这个C1输出之前捋顺一下这两行代码什么意思,还记得吗?给car的实力对象身上追加一个A,属性值为一,追加一个will,属性值为四,是吧,来右键打开。控制台上键刷新,哎,是不是在这儿呢?输出的是谁呀?卡的实例对象身上有没有A有有没有它有,接下来听我的需求,我不想给实力身上加东西了,我想给这个car本身加点东西,那car比如说我想给这个car呢加一个DEMO属性,它的值为100,我怎么写?
05:10
舒老师,你这不已经写完了吗?car.demo等于100,哎,那倒也行,哎,你这么写着,c.DEMO等于100,没说不行啊,那你输出一下这个100得怎么输出啊?CAR.demo看最后一行输出是不是100,对,但你这么写,你有没有一种感觉,这是你所定义的类?你想给类自身加一个属性,你得写在类的外侧,我就想把这段代码写在里边,那怎么写呢?其实啊,同学。你还是写复制语句。哦,那这行呢,就不要了,但你这么写就完蛋了,你是加给了他的实力对象身上,你前边只要加一个词,这个DEMO就不再加给car的实力,而是加给car这个类本身叫做static,静态的,大家还记得吧?哎,你这么一写,就相当于是给它自身加了一个DEMO,属性值为100,所以说输出的时候100依然能拿得到。
06:06
好,那如果这你看懂了呀,来呀,同学,关掉回答咱们这个里边a prop的简写方式,你说怎么办呢?这是类吧,给类自身加了两个属性吧,你别管它属性里边是什么,爱是什么是什么,反正就是给类自身加了两个属性而已,那所以说剪切吧,放到类里边,注意啊,一定要注意千万别写在render里边,Render那是类里的一个方法,你写在render里边算什么呀?那所以说把这块折叠起来啊,然后在这儿呢,敲个回车,把这些代码粘过来。啊,那当然缩进有点不对了哈,那咱们调一下走对齐,这呢往前往前同学给类自身加,这就别person点了呀,Person直接删掉,那点也直接删掉,加一个词s static啊,这是static走这不就结了吗?所以说同学我问你啊,我这么写和我这么写是不是给类自身加东西,嗯,对,加什么了呀,Pros还加什么呢?Default pros,你只要能够保证给person这个类本身上加了这个属性和这个属性。
07:17
你只要保证这件事儿,React就能帮你做限制,React不理你说,哎,这东西你得是怎么添加的,你用static添加的呀,还是自己写person点添加的,你react怎么添加怎么添加,你只要保证类自身有这俩属性,它就能帮你进行限制。OK,那你这一折叠你觉不觉得就清晰了不少呀,类折叠整个组件全都收起来了,跟这个组件相关的所有的东西都在类里边呢,OK,好,那我们看一下啊,打开你得保证它依然能用吗?东西还是能出来的啊刷新说老师这就能行,咱试试啊,我故意写错一个,你比如说他说这个名字呀,必须得是字符串,哎,那我就不听话,我非得把这名字呢,给你写成一个100,那你看一下效果吧,东西肯定能出来,但是警告是不是依然在啊,这就证明你没写错,是可以这样玩的,哎,那所以说同学咱撤回来啊,观察一下整体的这个形式,那也就是说以后我们再用类去定义组件的时候,一般在这儿呢,哎,会做出一些限制,然后下边呢,再写这个render,那同学我再问你,如果person这个组件它还有自己的状态怎么办呀?初始化状态怎么写呀?State等于。
08:33
来吧,里边开始写对吗?这叫初始化状态,这儿呢叫做对标签属性进行限制以及默认值的指定,好这就是一个简写的方式,OK,所以说这种方式呢,用的也比较多,哎,直接就放在类里边了好了,那这小节呢,我们停一下。
我来说两句