03_尚硅谷_jsx理解和基本使用.avi原创

好，刚才我们涉及到一个技术叫什么呢？GX刚才没有仔细讲，我们下面来仔细讲一讲啊，它到底是个什么东西啊，啊关于他们的一些使用，大家也可以去看一下官网的一些，官网里面有一个东西叫文档。打开，其实我们现在讲的是第一个hello word。能看到吧，其实这就是一个教程。啊，大家也可以根据这个教程呢，学一学也可以啊，我们下一个要讲的就是GX。我们来看一下我们最终呢要做这样一个东西。我们以。后面所有的都是以做功能为驱动去学一个知识啊，基本上都是这样同一个套路。我们先来看一下我们要做什么。先别管你要学什么，先，我们要看看做什么。啊，现在是一个什么样的需求，是这样的。我这里面呢，有两个div啊，都空的。

啊，我现在先来个script啊。啊，我现在呢，有一些数据啊配了啊，现在都用六语法有一个message。啊，这个message是什么呢？大家看一下我们最终的要做的效果啊，这个me就是这样，有这样一个文本。啊，叫I like you。这里面的有大写也有小写，能看到吧？好了，还有一个叫MYID。啊，你就写一个，呃，硅谷也有大写的小写。啊，最终呢，我们要去做的那个效果是这个就是显示啊。第一个div显示这个，也就里面要插一个什么。HR。下一个要查一个什么H3，但里面的内容不是完全一样的吧。不是完全一样的。

好，我们来做一下啊。就相当是我们前置的一个需求，那我们要用re，首先在干嘛呀，引入啊，那几个GS是不是一共有三个GS需要引入啊SCRIPT1哎，应该是二是吧，啊好。看吧，点点斜杠JS下面的啊，第一个是RA写引路，接着是RA down，接着是。对吧，好来看啊。但流程不会变，还记得我们刚才说过的流程吗？两步，第一步创建虚拟动啊，我们这次简简单写啊，创建虚拟动，第二个渲染虚拟动。刚才说的详细点，这是我们简单点说啊，渲染虚拟动。

啊，这两步是不会变的啊，好来看一下，那首先的问一个问题，我们如何来创建驱动，刚才是不是演示了一种方式啊，但是实际上我们要说一下原始的方式。啊，什么意思呢？刚才我们说过啊，我们用的是JSX语法，对不对，那我不用JS语法能不能创建呢？能。看啊。React提供了一些API来创建一种特别的GS对象，这个特别其实就是我们的啊，虚拟动物原始对象，它一个方法看名字。叫什么？有这样一个语法，我们照这个语法写呗。嗯。啊，是参照的一个语法，我们来看一下，我们该怎么做呢？先也搞一个变量，我们用常量得了啊，因为它不会变看。

V啊，用微动还是用这个啊，还是用这个来去表达。怎么说react.create element好要指定一些参数，大家觉得第一个参是什么，什么标签名对吧？标签名啊标签名我们是要创建的是H12，看我们的第一个，我们现在要做的第一个是这。HR是吧，不是H1是H就是H2 h2好。下面啊，大家知道啊。我们下一个大家的指定是什么？大家觉得是什么？就是传一个对象，对象里面很多建队，这是什么东西呢？标签属性大家知道，属性是一些建筑队。听懂不啊，OK，好，我们这个地方也一样，我们最终也有啊，我们就实现我们的需求就行，是ID等于什么？

对吧，好来就是ID冒号，就是上面的一个值吧，但是呢，它是全小写的。注意观察。犬小姐的。能看懂，那我应该怎么做啊，OKMYI。小写嘛。没问题吧，而且我们这个标签是不是就一个属性那动了，你说第三个参数传了什么，对了。内容标签体内容对不对，我们的标题内容是哪个是它，但是呢，我们是纯小写。看这里啊，大写大写就大写是吧？没关系啊，来，那我们既然要大写，我们也可以to up。对吧。那也就是说现在我们用到JSX语法了吗？没有，那也说我这个要写成Bible吗？不用。

听不懂，大家看他我不用。因为我根本就没用GX语法嘛，对吧，这其实是本质的一个语法，只是这个语法。写起来是不是比这个要费劲很多啊，费劲非常多啊，好，下一步。选谁来渲react点人？好，传两个参数，第一个虚拟动，第二个啊，OK，页面中的动物元素容器，为什么叫它容器啊？因为到时候我们的训动插哪个里面去，不是插到它里面去嘛，把它送到容器不很好吗？对不对。OK。那我们要创建虚拟，除了这种这种太弱了，我觉得太费劲了，对吧，我们来换一种方式，也就两种方式来创建啊，那下面呢，我再写一个script。

再写一个是不对，但是呢，我这一次必须得什么改成Bible。啊，流程呢，还是不会变的，第一步第二步啊，我把第二步的代码都拿过来，我们最终呢，要去搞一个二。啊，插到R里面去可以吧，那我这里面要干嘛呢。什么V，多么R等于。也就说我要弄一个什么标签出来，好像是看一下啊H3，而且这个ID是大写的，内容是小写的。啊，下去以后大家就看着这个去实现效果就行了，不要想太多，好来，那我怎么写。H3太简单了是吧，这个啊这个。

怎么写ID等于好了，这个等于的里面它是不是动态的值啊，那怎么样代表你整一个动态的值放进去了，它是这么整的。要写一个大括号才能代表你里面可以指定一个动态的值。能不能你想啊，我要我要不用大括号，你想这个地方我写一个MYID，你觉得他能知道吗？那有可能是一个字符串，也有可能不是啊，对不对。怎么样指定它不是一个简单的文本呢？啊，就写个大框。记住了，不要用单引号或者双引号了。接着了。点。Two，什么two up转成大写码。好，再一个里面我是不是也要引入一个动态的值，我该怎么做呢？

怎么做大括号？懂不懂？因为你想啊，你要你要你要不写这个，那什么意思。这些东西都是文本。能懂不啊，就不是我们平常一的GS代码。啊。看到吧，嗯，这样，其实这种写法就轻松很多。对吧，就跟写标签差不多。有标签里面嵌套了一些GS代码是吧，但是啊，千万要注意，你不能在这个外面加一个单引号，那加个单引号就不是那么回事了，那这就是字符串了。能理解吧，啊OK。好。来，我们来看一下我们最终的效果啊，我们最终的效果。

啊，页面看起来好像可以是吧，还要看一下内部的结构。啊，内部结构也很关键。大家看一下ID是小写的对吧？啊没问题，这个ID是什么大写的。都是我们最终的一个目标，是不是就实现了啊，OK。好。那东西已经完成了，下面呢，我们来看一些啊理论的知识啊，有些理论的知识。好在这里面呢，我们涉及到有一个概念叫虚拟动，现在你应该知道了，这个虚拟动指的是谁。是不是VDOM1是虚拟动吧，V dom2是不是也是虚拟动，只是我用了两种不同的什么创造方式，对不对啊，这一个是本质。对吧，但这个语法更加什么简单，但它背后会转换成上面这个代码。

谁来转？Bible来转。说白了，虚动是不是内存中的一些对象？对吧，类型中的一些对象啊。但这里面要说一个事情，虚拟动对象最终都会什么转换成真实的多，也就是说我们现在虚拟多这个标签是不是S3？它是我们页面那个H3吗？不是，但是它为什么转换成页面那个H3标签了。现在不是，是以后就是了。一旦我渲染的时候，它就会变成真实的，我们平常的真实动物H3。是对应关系。啊，这个观念很重要，是对应。就是虚拟多M0H3跟真实多M h3是什么一一对应关系？这能不能动啊，OK，好。大家也可以这样啊，大家也可以去把那个把把这个给它打印输出一下，通过这样啊，我跟大家讲一个东西，就是这个东西不知道大家有没有见过。

是不是相当于在这里类似于加了一个断点了，认了不，那加了一个断点有什么用呢？啊，只要你一刷。它就会暂停在这里。能懂不？那我们是不是就能看到当前这个微多米。能看到吧，就内部现在看到的所有看到是不是我这个对象内部的一个结构。两分钟。好，同时我也让大家看一下真实动是一个什么样的结构。来啊。真实度是一个什么结构啊，我这里面其实不用不用啊，就这样。我们来去不打印还是不行啊，把它打印一下就在这，比如说我用一个啊，用一个test的E啊，Test e div div，我就把它看一下，给大家看一下它到底是个什么样子的，也可以看一下，对比一下，看看真实动物和虚拟动物对下它之间有没有区别。

现在的过去。再刷一下。来看一下这一个呢，就是个真实度。对吧，那大家觉得真实多模和训动有什么区别？什么意思？你看我滑来滑去，我看我前滑啊，对这个真实的动，它是非常重的对象。非常重，重什么意思？一个重一个轻，说白了就是内容很多啊，一个内容很少，就是我需要哪些，我就放哪些，对不对，而真实的对象里面。数量很多，就是内容很多，这是他们的一个对比。还有一个很重要的事情，我去更新真实动页面是不是就会发生变化，就页面会重绘，但是我去更新虚拟的页面会重绘吗？不会。

啊，也就是说现在啊，虚拟动它有两个优势，第一个优势它比较轻。对吧，第二个我们去更新那个训练动的时候过程中，它是不会去更新界面的。啊，什么时候会更新界面呢？你去渲染的时候才会去更新界面。这能懂吧，啊，这个要能看出来啊，真实动物与虚拟动物它们之间的两个区别啊。OK，行。来还有一些东西需要看一下啊。这里面说过的事我就不说了啊，下面我们来去把GSX的内容给大家看一看。那现在GSX它其实是这两个单词的一个简写，叫加script是什么呢？

不是，它是一种标签啊，可扩展标签语言，其实我们H天文标签啊，它有一个特点，能随便瞎写标签吗？不能，他是不是有限的一个，你不能写别的吧，你假设你写个AA标签能行吗？不行，但插满了是什么标签名任意。结构啊，其实跟HTL都差不多。能懂吗？啊，OK，这里面他之所以用这个名字，就在说在react里面，我在写标签的时候，除了写HT的标签，还可以什么自己去定义标签名。懂不懂这种标签我们后面会学叫什么呢？叫组件标签。啊，现在大家有个了解就行。啊，看。好，就是react定义了一种类似于插的JS扩展语法，说白了，它的本质还是什么JS。

懂不懂？但浏览器能直接识别吗？不能。那要想识别需要什么Bible来去转换成纯JS才行。这里面一直在强调，我一直在强调啊这个写法。不能加单引号或者双引号。为什么？它不是字符串，对不对。啊，这个要注意，最终啊，这一个会转换成GS对象，我们最终不用那个原生的写的时候不就是GS对象吗？啊，OK，好。标签名呢是任意的，这就是为什么说是差秒啊，属性名也是任意的，就刚才是不是就写了个ID。对不对，其实标签的属性名可以随便写。啊，都可以。好，这里面呢，说有一些语法的规则啊，什么意思呢，也就是说大家看到这里啊，其实非常简单啊，就看这里他怎么知道哪些部分是标签，哪些部分是JS的代码呢。

这个地方他怎么知道你整个是一个标签对不对，怎么知道这个标签里面又套了GS了。对吧，看到花哦，这标签开始了。是吧，那标签开始以后，一旦看到什么大括号哦，你GS代码开始。能懂吧？这里说的JS代码是原生的JS代码。能不能理解我们这个也是G，但是就是扩展语法啊。这个知道一下就行，Bible的作用刚才已经说过了，干嘛？将我们的GXX转换成什么？纯的JS为什么要转？浏览器不识别非常简单啊。哎。好，最后有一个东西，刚才我们已经说过了，这条鱼的一个理解啊，就是将虚拟DOM渲染到什么真实的容器多么中，对吧，而且这个容这么肯定在页面里面嘛。

你想想看，他不在页面，我怎么进入页面呢？能不能啊，这里面强调的是一个容器。啊，他就是个容器而已。好，创建虚拟多的两种方式，刚才已经说过了啊，第一个是纯JSS的方式，这种说实话一般不用，我就也也是一次再也不写了。太北京。真实用用哪个写SX的语法，但他们其实是等同的。啊，OK。这是这个还一个要说明一下啊，说明一下。咱现在啊，其实说实话啊，我们这个应用现在运行很慢。大家看一下。这运行，我们不是一再强调rank的效率高吗？

我就我们的这个啊，我第一次我再打开一下啊，因为现在好像看不出来，看能不能看出来啊。啊，过了一会它才出来，这是一个什么原因呢？就是因为我们这些代码是本质上这些GSF代码是不是要编译，是不要处理以后才能真正运行，尤其是这个啊，我们现在写的写的不太多，诶那个这个。对吧。但是我们现在的做法是运行的时候是不是动态变异的动态转换了，知道吗。但真正做项目我们不是这样的，我们先对项目进行编译打包。再运行。而现在，因为我们仅仅是一个什么呢？测试语法。听懂吗？怎么样方便怎么来。那如果我们要去啊，提前打包的话，需要很多环境，需要很多配置啊，那个时候啊，整个东西就更多一些，先我们仅仅是测试语法，所以用这种方式来去做。

但真正的做法，真正项目的做法是先进行编译，就说白了，你们真正运行的时候不可能出现这个的。啊，都已经处理好了，再进行运行了，这个要注意一下啊。行啊，那整个就这么多，最后呢，我们做一个练习就可以了啊好，我们把这个停一下。