06_尚硅谷_react组件的基本定义和使用.avi原创

啊，这里面还有一个图啊，这个图就是告诉就是在说啊，我们的一个界面拆分成了多个多个组件来去编写。好，那入门的部分呢，我们就先学到这里，下面我们学啊，就是RA面向组件编程，大家知道我们的GS是面向什么，面向对象编程，就是我们去写GS，用GS写下嘛，一般会说我们是面向对象编程。但是一旦你啊去用react去写，像那不仅是面向对象，变成了应该是面向什么面向组件啊，这里面是有一个层级的提升啊，就是你的成绩不一样了啊，先最底层是面向对象。接着是啊，我们可以写面向模块。对吧，往模块边缘，接着才是再上一层是什么啊，面向组件。啊，这个站的高度就更高了。

好，来我们来看一下啊。呃，我们要做一个简单的一些效果啊，这里面呢，我们就要去写组件啊，写组件去渲染组件标签啊。我们做啊，写东西。先我们来一个组件的基本使用，我们来看一下。啊，我们要去实现的组件呢，也非常简单，这里面已经有了一个截图啊，其实现在呢，我们大家看的这个界面结构。啊，看到我这里面出来了两个特别的标签，一个叫什么my component，另外一个叫什么my component to，而它里面是包含了hi。看懂了吗？OK，而这个东西我们称它为什么呢？组件标签。那除了组件标签，其他标签叫什么标签？

H天马表现。能不懂HTML标签是不是固定的几个呀，固定的一些对不对，但是我们说过。在里面标签的名字其实可以随便写的，对吧，那随便写的就叫它称它为什么呢？主键标签，而且它有特点，它的首字母都是什么呢？大写的就它固定的，它就为了跟H的标签区分开来。嗯，OK。我们要做的效果非常简单啊，我们要去写两个组件。来前面的引入呢，我们不用再说了啊，来下面我们在这里面写。好，组件化编程啊，就两步，我跟大家说过，做东西一定要知道步骤，就两步，第一步啊，定义啊主线啊，哎，干嘛呢，你不要定义主线吗。

知道吗？不是参与运动，那是我们没，那时候还没组件化编程呢。能懂吧，我们那时候没有主机化，编程之间是第一步创建虚拟动，第二步才是去干嘛渲染虚拟动，那个时候我们根本就还没涉及到组建这个概念吧，啊OK，所以那个时候我们也是两步，第一步是定义驱动，这一次不一样了，因为我们要组建画面嘛。那组件编码呢，第一步我们要去定义组件，第二步渲染什么组件标签啊，OK，它其实也是个虚拟动态。啊，渲染组件标签啊好，那下面要说如何来定义组件呢？这里面它有两种方式。有两种方式。哪两种呢？我们来看一下，第一种啊，它称之为工厂函数组件，诶这个地方就利用到了我们前面学的一个概念了。

就是工厂函数。什么叫工厂函数？发现。接着了，是不是写一个名字啊，譬如说叫my component。这就是啊。工厂函数主页啊，工厂函数必须有一个什么return。而我啊，这个里面我先不写啊，我先不这个里面肯定要return一个东西出来吧，它才是公转函数嘛，好，我先把第二步做了啊，我这个先不写，我把第二步做了，第二步渲染组件标签怎么渲染react点人的是吧。组件标签，这个是组件名。标签怎么写，就这么写啊。看着吧，是不是写主页标签吗？

啊，OK，接着来。第二个函数。啊，是不是要页面中的动元素吧？啊，容器动document.get a还没提示啊，考验我的时刻到了啊，Get element by。对吧，有没有看到，那最终我去渲染这个标，渲染这个组件标签，而组件标签里面肯定包含了一些标签元素，它也就是说它这个return必须return出来，一个结构出来。你想我们最终看的这个图，看着这个截图，我们最终要做的效果这个标签里面。包含的是一个什么HR吧，所以大家自然能想到我这个应该什么，对啊，我这个return必须返回的是个虚拟动能不懂啊，OK。

这样，呃，这个里面来就写个它吧，文本随便写一个就行了。看懂吧，大家想啊，OK，这个地方嗯，特别有意思啊，你说。我我有没有去调用这个函数，没有，但是你要知道，大家想一想，你都能知道什么时候他会去调它。什么时候它会掉这个函数，你渲染它的时候吗？你想想看，你渲染它是不是，你最终是想显示它嘛，它有什么好显示的。它本身这个标签有什么显示的意义吗？没有，是它内部包含了这个是不是虚拟作用，这个HR标签才有意义啊。因为它跟我们H标签是对应的嘛。能懂吧，OK。好，现在呢，我们应该能看到一个结果。能不能来我们去审查一下。

啊，审查一下看一下，诶这个是不是div里面包含一个HR，哎，有人说老师我你这个看断结果怎么跟这个结果不一样呢。听到吧，哎，这个地方说过了，我们昨天不装了一个插件吗？是这个。就看得很清楚了，对不对啊，这是我们的组件标签，它里面包含的是什么HR，那也就是说页面最终显示的是我这个组件标签吗？不是，是我内部包含的这个HR。能懂吧，啊OK。好，这是下一个啊，工厂函数组件，就这么简单。那还有一种定义的方式。我们来看一下它叫什么呢？ES6的内组件，也就是说白了要定义组件内。试试呗。

看着我给大家写一写啊，就懂了，定义类嘛，先来一个什么class，写个名字，My component my component啊二吧。内啊，这里面有一个extend了，我写一下啊，大家不懂啊，我写大家就懂了啊，写出来大家懂一点，在react里面有一个属性啊，这component类啊，要继承它，这个继承学过吧，说白了你看这个这个你看这个表的结构，你就知道我相当于是不是定义了一个组件的子类。这不代表主界吗？啊，在主见的类里面有一个特别的方法，我写大家就能懂人的。能不能也就是说啊，这个render里面有一个啊，我先写。大家看它，我再次渲染一下组件标签，换一个换一下。

大家现在就想，你说我现在能有效果吗。没有，我想写是HR。怎么办？是不是我这个re的方法也说白了，我一渲染它，最终就会创建它的实例对象，并且调用什么人的方法得到一个虚拟动最终显示。是不是？也就是说这一个是不是相对比上面要复杂一些。因为它分为两步了，先创建实例，实例再调用什么re的方法，而上面的是什么。直接调用这个方法。那也说它是一个简单的组件，而下面是专门做什么呢？相对复杂的组件呢？那什么叫复杂组件，什么叫简单组件？后面再慢慢说，因为还有很多知识没学啊，好，来。写法倒是很容易，把这个文本改一改。能看到吧，那现在我们就啊整体结构就出来了，来，现在呢，我们来看一看，看看我们的显示对不对。

出来没有出来了，而且我们的这个插件已经看出来了，是不是有两个组件标签啊，一个是my component，一个是my component嘛，To，看看里面的结构都很清楚。必然是调用它返回的吧。调查之前在现在干嘛呀，创建实例。你想看我没创11能调用他吗？不能，这实力能调用的方法。这个应该能懂吧，啊OK，好，这是这一个。那现在我们就给大家去说了，两个定义组件，这两种方式都会用啊，都会用，至于什么叫复杂的，什么叫简单的啊，后面我们学了后面的相关的知识了，就自然就明白了。

现在我们做的效果其实都很简单啊，没有多难。好，行。