声明： React基础（一）的内容来自腾讯课堂 Web前端【红点工场】的视频，原作者是 Skipper 老师。
接下来的 Demo 6，我们会考虑一个新的东西：进行一个组件化的包装。
就是把按钮当做一个组件，然后在我们需要使用的时候，不断的复用就可以了，并且也是纯粹的 JS。
Demo 6：
那么在写这个 Demo 之前，我们先思考一下，
我们之前，无论是写表单，还是按钮，它们都会有一些共同点，
比如它们都会有：state，setState 方法，render 方法，
还会有一个控制的方法，比如 handleClick 方法。
那么既然它们每一个都有这些东西，我们是不是能把它们提取成一个对象呢？
接下来，我们就来试一下：
我们可以看到，刚开始页面是空白的，
当我们在控制台上 new Button() 的时候，
首先，它会构建一个 state --> this.state = { ... }，
然后它会根据 state 来渲染这个页面 --> this.render()，
最终就会把整个模版字符串，填充到 id = "root" 的这个标签里面去，
这时候，我们就有了一个点赞按钮了，并且是根据它自己的 state 来渲染。
那么，这么写的好处是什么呢？
先别急，我们再写一个 title 的组件：
那么完成 title 组件之后，我们发现，两个组件之间会有一个冲突问题：
因为 root 标签只有一个，所以组件也只能有一个，要么是 button，要么是 title。
那么我们是不是应该思考一下，我们设定组件的目的是什么？
是不是，我们只要实例化，new 一个，就生成一个组件，
如果想复用，new 多少次，就有多少个组件，
那么我们就不能直接赋值给 root.innerHTML 了，
我们可以换一种模式，当我们调用 render() 函数的时候，直接 return 一个字符串出来。
那么，我们可以先去掉 constructor 和 setState 里面的 this.render() 方法调用：
那么为什么要这么做呢，它的好处又是什么呢？
别急，我们继续往下看，
首先我们构造一个容器 Wrap，那么每次我们都可以在 Wrap 里面不断的去复用我们定义的组件：
可以看到，现在我们是不是可以不断的复用某个类了。
我们把一个组件写好之后，只要在别的组件里面引用它，就可以不断的去构建新的组件，
用小组件，组合成大组件，再用大组件，组合成更大的组件，最终，构成一整个网页。
我们的组件可以反复的用在别的地方，这个就是组件式开发的思想。
那么，我们是否发现一个问题：
我们的每一个组件，都需要写一个 setState 方法？
那么我们可以是不是可以把这个方法提取出来，放到父类 Component 里面，以供它们继承使用呢？
那么我们的每一个组件，以后就都可以不用写 setState 方法了，
我们只需要 extends Component 就可以了：
可以看到，页面同样渲染出来了，
并且在右边的控制台上，button.setState 是有值的，并且它是一个方法，
下面也可以清楚的看到，setState 这个方法，它是继承自 Component 的。
其实在 React 里面，就有给我们提供一个类，就叫做 Component，
我们在写任何组件的时候，都需要用 extends 去继承它，才能够使用。
那么，我们明白了：
Component 提供了一个基础，把一些，每个组件都要用的东西，都放在这里，
那么你要写一个新组件的时候，只需要去 extends 继承一下，
再去实现你想要的功能就可以了。
到此，我们是不是已经了解了 React 的一些基本模式呢？
