00:00
好了,各位,学完state之后呢,我们学习第二个属性啊,叫做props,打开我们要做这么一个案例,把人的信息啊展示到页面上,然后你注意观察同学觉不觉得这个人和这个人其实他们的形式都是一样的,都展示这三个信息对吗?而且呢,每一个人呢,他都是一个列表的形式,你看前边这个小圆点是吧,明显是个ul和Li的这么一个无序的列表,OK,先别看这需求啊,同学这需求呢,是我们后续呢去讲解的一些东西,现在先保证能把东西出来就可以回到代码当中。打开这个props的基本使用啊,这些都是我提前创建好的,来吧,进入第一步,同学们是不是创建组件呢?写好注是创建组件class,那么人这个组件当然呢得叫做person了,Instance,一个固定的结构react.component render是必须写立render,必须有返回值啊,那这呢,多说一句,同学你看一下课件啊,明显呢是一个列表的形式,Ul里边得有Li,所以说你的标签呢,是多级结构的,如果是多级结构最好呀,你给它包一个小括号,如果说你不包,说老师我就直接这么写呗,Return啊,这是u Li,然后里边写Li倒也行啊,但是包一下呢,规整一点,来,我们给它包上u Li,走里边呢是Li,嗯,缩进调一下啊,走Li,那分别是姓名、性别,年龄性别。
01:40
这儿呢,是年龄啊,我先写点纸给他,写死吧,这儿这儿走性别呢叫做Tom,性别呢叫做哎,一个女同志,那么年龄呢,18岁,OK,组件定义完了,进行下一步渲染组件到页面,那么就是react do.re嗯,渲染哪个组件呢?Person好了,复制放在这儿走did,我那容器一直叫test啊,同学,右键打开,我们瞧一下效果。
02:14
一个人的信息呢,就出来了哈,同学,我问一下,现在我这个信息啊,是不是写死的Tom女18同学,我想让他动态起来,那你可能就会想到老师啊,很简单,我用状态呀,State等于啊,然后比如说要展示一些人的信息吗?我就这么写,Name呢,它叫做Tom啊Tom然后呢,Age是18岁,然后性别呢,她是一个女同志,老师,那我这就简单了呀,根据之前咱讲的是吧,哎,状态初始化完了我就可以用啊this.state.name那这呢,我就不再写了,就这么演示一下啊同学,那回头你看其实也能读出来这个名字对吧?嗯,来,我们把这个改一下啊同学,这是英文的冒号,看起来怪怪的啊来这这删掉,改成中文D保存是吧,也能展示,同学,但是呢,你听我说啊,你这是不是属于在组件的内部啊,就定义好了状态,然后从状态里边把东西读出来的呀,是不是有一。
03:15
总感觉是组建自己家里的事儿,组建内部的事情,同学,你看state你不是写在这儿了吗?现在我有这么一个需求啊,同学,就是我想从组件的外部往组件里边带东西。就是你那个人的名字呀,年龄啊,这些信息不是说你写在状态里的读出来的,而是从组件的外部给他带进去的。你觉不觉得这里边所有的东西都是组建自己家里的事儿呢?哎,也就是说我们不能再用state了,用state确实可以完成一些事情,你比如说提前准备好数据啊,就像刚才那个天气炎不炎热对吗?哎,我一上来就是炎热,等你点的时候,哎,我再切换,但是现在我是这么一个场景,想从外部往里带东西。说老师什么意思呢?还是没明白,那你看着啊,我先把这state呢删掉,你比如说那姓名我写死叫Tom同学,比如说页面上呢,还有一个容器,它叫TEST2,那我就把这个改成TEST1,那在这再来一个,比如说叫做TEST3,三个容器我都准备好了吧,那你看刚开始我是不是往第一个里面放,你比如说还想放一个人,还想放一个人,那这得改成二,那这得改成三是吧,往里边哎,仿人同学,那你看我写了几个组件标签啊,我写了几个组件标签是不是三个,那你说react在帮你干活的时候,你写了三个组件标签,人家是不是帮你,你有了三个person的实例啊。
04:38
对吧,你写一个组件标签,人家帮你拗了一个组件实例,那现在你打开页面,那肯定就是三个人的信息都在这儿了,但是你不觉得这三个人他都长成一个模样了吗?说老师我要用state,同学你想一下,就算你用state来,兄弟,你的内幕呢,是从状态里读出来的,比如说它叫做Tom,那你觉不觉得在这儿啊,大家其实还是一样的,对吗?是都叫Tom,那都是读出来的,我想从外部,哎,就是在这儿做点文章,把东西给它带进去,哎,那这就得利用到组件实力的第二个属性了,叫做pros,好,同学,我们观察一个事情哈,我把这呢还写死,让它叫做Tom,那状态呢,我也不用了,因为现在在讲解props是吧?哎,我们先不考虑state的事儿啊,那我把这个呢也删掉,删掉我就先往页面上放一个人,你这么放的人的信息就是写死的,那怎么往里边带呢?同学,我先带着你观察一个人啊,现在我根本没有给这个组件里边传递任何的信息,对吗?你就写了一个组件标签一渲染吗?没有传递任何的信息,我在这里呢,输出this同学,不用我再说了吧,Render的this。
05:52
您说是谁,是不是组建的实例对象啊?诶,那你注意观察一下,我们控制台上键啊,刷新输出的是person组件的实例对象,打开它身上有一个属性叫做pros,人家也给你准备好了,但是这里边的内容呢,却是空空如也的。
06:10
因为你真的没有传东西,Props的使用呢,比state要简单太多了,同学,State是不得你自己去初始化呀,你得自己亲自写里边的值吧,什么a hot呀,什么wind呀,对吗?Pro不用说老师那不用他也没东西呀,那是因为你没传来,同学,你传一个呀,你试试回到代码当中说,老师那怎么传呢?同学,HTML标签是不是能写标签属性?你就比如说同学,我的div是个HTML标签,我里边写了一个标签属性,属性名呢叫ID,属性值叫做test,对吗?同学,那你你觉不觉得哈,这是一组KY6的组合。ID就是那个key test呢,哎,就是那个Y流,那所以说HTML标签呢,本身就能写多组KY流组合这种标签属性的形式,那其实谁也能写呢,你的组件标签,诶,来写吧,同学把名字给它传进去,Name等于Tom,嗯,可能有些同学说老师就这么传呀,我还以为多难呢,是吧,挺简单的,同学你这么一写不要紧,你把名字呢,就传给了person,那回头呢,同学react在帮你new这个person实例的时候,就自动的把你所写的name作为key,把你所写的Tom作为value,把这一组key value帮你收集好了,那放在哪了呢?那瞪大你的眼睛去观察吧,走,哎,是不是放在这儿了?
07:46
是吧?同学,你觉不觉得你只管传递标签属性,它帮你收集,收集好了,他帮你直接放在这儿,觉不觉得很省心?同学,这比state要简单吧,来吧,那别客气了,除了传名字,你说还能传啥啊?同学A,等于啊,那这么写啊,是18岁,我先这么写着啊,嗯,然后写性别,等于是一位女同志。那所以说这回。
08:10
打开东西是不是都来了,那所以说你告诉我吧,我这块怎么用啊,这个this呢,我还在这放着啊,给你输出着走,Tom呢,你就得改一改了,同学我问你啊,This是不是组建实例对象,你得是组建实例对象点props.name对吗?那所以说来吧,点props.name那同理,这些东西是不是就都得换了呀,女。还有18都得改性别这儿呢,诶年龄来回头瞧东西是不是也能出来,舒老师那这样的优势在于,优势在于你可以动态的去改这里的东西,你比如说Jerry年龄呢是19啊,然后这回呢,是一位男士走,你看。觉没觉得同学是从组件的外部往里边带东西啊,而且它最大的好处就在于,如果你再渲染一个,再渲染一个,这叫T2,这叫T3来改名,那这叫做Tom啊,重新改回来,这叫18岁,那这会儿呢是一个女同志,那我这儿呢,就快速的改一下啊同学,我这么写吧,写老刘,哎,写老刘,然后呢是30岁啊,然后呢,这也是一位女士,好了,保存回头你瞧嘛,同学,东西都是动态的传进来的,诶同学问老师呢,为什么输出了三次呢?那你想想呗,同学你看啊,你把组件定义在这儿了,你每写一次组件标签,人家是不是都得new一个person的实例,是不是都得调一次render,都得输出一个this呀,好了,同学,这就是props的一个最最基本的使用方式啊,那如果说呀,你觉得这块有点烦老师,我一直this.props this.props你可以改一下嘛,像我们刚才说的,你可以用解构赋值的方式啊,提前从这个props身上。
09:56
拿到谁呢?Name a,还有什么呢?这个性别,那你在这儿就轻松了呀,不用一直这么写了,好保存,回头瞧,就在这儿了,怎么样?诶,是不是简单啊,好了,那这就是props的一个最基本的使用形式,那接下来呢,我们再讲一讲它更高级的使用,但是不是在这一小节啊,那这一小节呢,我们先停一下。
我来说两句