00:00
好的同学,刚刚呢,我们做了一个hello react这个案例,在这个案例当中呢,我直接用了GS叉这种方式去创建的虚拟盗墓。哎,可能刚才呀,大家看这个代码的时候也是有着些许的不爽,那就感觉很神奇,连单引号都没写对吗?说老师那我知道了呀,接下来你肯定是疯狂的给我说GS叉里的规矩呗,啊,你得这样这样这样这样好了,记住,然后我们再往下敲,不换一种方式。把一个问题说明白了,再往下说,为什么不用原生的GS,非要用GS叉?那这时候你可能说,老师,React官方就要求我们得写GS叉吗?那我再问一句,React官方为什么要出GS叉语法呢?同学,原始的GS大家都熟悉,那为什么不用这个写呢?为什么偏偏用GS叉呢?你还得学,你还得记住那些规矩,然后再写原始的GS怎么的了呀,我们不用它对吗?你得把这个问题搞懂了,从你的内心深处,你接受GS叉了,你才能努力的去记住它那些规则,对吗?好,那用一个案例呢,去讲解这个事儿,看一下课件。
01:20
我们做这个案例还是叫hello react啊,但是区别就是一里边有个ID叫title,来吧,写那东西呢,跟刚才都是一样的,那所以说我先全选复制一份,一会儿用。右键新建个文件夹,零二下划线,虚拟盗墓的两种创建方式。好,右键新建第一个叫做使用GS叉呢。创建虚拟道,那简直就是跟你刚才的写法一模一样,所以说呢,我就粘过来。
02:05
但是得改。标题得改对吗?容器还是那个容器,三个GS还是那三个GS,这些东西也都得这么写对吧?要写Bible,不要写引号,但是区别就在于。他是不是有个ID啊,抬头你这么一写不就写完了吗?右键看一下。检查元素。能跟咱们课件里的一样的吧,哎,加了个ID,那你这是使用GS叉去创建。其实你还可以有另外一个选择,同学压根不用GS叉,用最原始的JS,我复制了一份这个啊。然后我改一下名。二使用什么呀?JS创建虚拟DOM。
03:00
那么你就得做出一些改变啊。这是二。这是JS同学,容器是不是还得准备好呀?那么react核心库还有react DOM这两个库是不是也得引入啊?但是有一个人不用了,谁呢?Bible。因为我压根儿就不写GS叉了,也不用你帮我做转换了,那这两个删下去。那这呢,别写Bible,写最原始的GS,那这个注释是不是得删下去了啊?那这一行肯定是不是也不能这么写了呀?这不是GS叉的写法吗?但是我不管你用什么方式,你只要创建出虚拟盗墓,那我问你这句话是不是都得这么写呀?好,那接下来呢,我们一起去见识一下,不用GS叉,我怎么创建出这个虚拟do呢?定义变量名字还叫v do姆,但是这回不能直接写标签了,因为原始GS不允许这么写,对吗?好同学,你是不是引入了这个库呀?那么全局就多了这个对象。
04:07
他身上呢有很多API,我们先用一个。有这么一个API,大家不知道还记不记得了,其实呢,我带着你看一下吧,Document身上是不是有一个东西叫做element,是不是创建节点用的呀?那我跟你讲,同学,不仅document身上有,谁身上也有啊。哎,他身上也有干嘛的呢,就是帮你去创建虚拟盗墓的document.create element,那是创建真实盗墓react.create element,那是创建虚拟do OK,好了,走,那这里边呢,传这么几个参数,首先第一个传递的是标签名,你不要创建标签嘛,那叫什么名字呀?好了,那第二个参数呢,那就是标签属性,一个标签里边可能有很多属性嘛,对吧?那第三个呢,就是标签体内容,或者说标签内容也行,对吗?
05:09
H1,标签有ID,里边是hello react来改标签名什么呀?这就得写引号了吗?H1就跟你document.element一个玩法,哎,那么标签属性呢?同学,我的H1标签里边有一个属性叫做ID,值呢为title。那怎么写呀,要写一个对象ID值呢,Title。哎,搞定了,说老师能有别的属性呢,那你就再来呗,对象里面多组k value吗?比如说可能有class等等这些对吧?哎,咱只写一个ID,先别写那么多标签体内容,你告诉我是什么呀,Hello react。嗯,OK。说老师就这也行,嗯,是的,右键。
06:01
审查元素。Test he ID有内容同学,我问你不用GS叉能不能创建虚拟道,能,那当我讲到这儿,可能有些同学就说老师打扰了GS叉,我算是不学了,我觉得用这种方式挺香的,挺好的。但是接下来我再说一个需求。你就马上说,老师,我还想投奔GS叉,为什么呢?来说一下我的需求。接下来。我是这么设计的啊,H1里边别直接写hello react h1里边包一个span标签,Span标签里边再写hello react。来吧,如果你用GS叉去写,请问怎么写?很简单呀,Hello react,别直接写,里边写什么呢?Span标签粘过来,Hello react,对吧?保存右键看页面。
07:04
审查元素。瞧嘛,H1里边,诶,ID title里边还有一个SPA,诶,Hello react,可以吧,好。你再拿GS你写一遍,我看看。老师,那很简单呀,就这呢,我不能直接写hello react,我得这么写span啊,结束标签,把它丢进来。好,如果你这么写的话,你看看效果吧。不用我多说了,有问题,你的死办标签没生效对吗?为什么呀?同学,这个里边的单引号。他不是说让你可以写标签的,是写标签体的内容。但是你的标签体里边又有标签,对吗?那你就不能这么写了,你还得需要一个死SPA标签对不对?那么问题来了,SPA标签它从哪儿来啊?
08:04
是不是还得是调用react.create element呀?哎哟喂,那也就意味着你这得写react.create element,然后呢。什么标签啊,四半标签有标签属性吗?没有空对象,那标签体的内容是什么呀?Hello react,对吗?诶,往这边调一下,让大家看完整的代码,右键看页面。嘿,效果出来了,审查元素。H1,有SPA里边有内容,有ID,哎,那同学我想问一下,就我写到这儿,我要再给你提一个需求,不说多了,我让你四层标签产生嵌套。那请你用原始的GS的写法你去写吧,你会很痛苦的。
09:01
但是同学你觉不觉得如果有了GS叉的这种写法啊,你会很方便。觉不觉得这一块就如同当年你写HTML一样啊,对吧,那所以说嘛,同学,这就体现出GS叉的优势了,这也是为什么react要打造这个GS叉。那总结一下吧,同学,GS叉来到这个世界上,他只为了解决一个问题。就是创建虚拟盗太繁琐了,有了GS叉可以让编码人员更加简单的创建虚拟盗,诶写起来更加流畅对吗?而且我们这里呢,还能做的更好一些,你这是一个多级结构对吗?同学,谁加HTML要写成一行呢?所以说肯定得有结构的层次的缩进,那所以说呢,你也可以这样做,把整个这些呢都给它剪切走。然后在这儿呢,用一个小括号给它包起来,就代表呢,它是一个整体,你再把刚才的那一堆结构给它拿过来。
10:06
回车缩进,回车缩进,那你觉不觉得这就更像你之前所写的HTML标签了呀?哎,那所以说用GS叉怎么的方便吗?那我就得把这个注释啊放在这里了,此处,哎,不要写引号好了,那你看这么简单的,诶,一测试不就发现了吗?GS叉咋的还是挺香的,OK。那同学我想问一下。浏览器不认识这种写法对吗?所以说Bible的翻译对吗?那问题是蓝色框里的代码经过了Bible的翻译,它翻译成什么样子呢?翻译成就是这个样子。说老师那这个样子,它不是复杂吗?复杂是复杂,但是您没写呀,您不是怎么爽怎么写的吗?对吧,但是最终浏览器运行的一定是诶这些代码。
11:09
因为他要经过翻译嘛,哎,好了,那所以啊,我们也可以说这么一句话。GS叉呢,啊,里边的这种写法创建虚拟道,其实就是原始GS创建虚拟道这种写法的一个语法堂。啊,什么叫语法糖啊,这糖一吃甜是吧?那语法糖呢,那你可以简单的理解为一种简写的方式,更加便捷的一种方式,OK,诶,那课件上说了有两种写法,一个是纯GS,同学不是一般不用这个东西,我们在开发的时候肯定是不会用的,因为这种方法怎么办,太繁琐,那我们就是用什么呢?GS叉,OK,诶,那这就说明白了,虚拟道的两种创建方式,同学们下去练习的时候一定要多加练习,这个你这个东西咱们在这看一眼知道,哎,它是这样的就行了,你不用做过多的练习,OK,好了,那我们这一小节呢,就停一下。
我来说两句