不用组件化的问题
从上个例子我们可以看到，react的程序主要做了以下几件事情：
- html中有一个id=rootDOM元素
- 通过react创建root 作为虚拟DOM根节点
- 然后通过这个节点的render方法，为其添加子内容
子内容中涉及到的变量和方法，在同级script中定义
这样的坏处是，跟元素渲染的内容以及内容中自己的逻辑关系，和跟元素放一起，代码显得很乱。所以我们想能否把跟元素内部渲染的内容单独聚集在一起（封装成组件）呢？
答案是可以的！！！
因为跟元素的root.render()render内部的参数，不仅仅支持嵌套的DOM元素，也支持组件。
react如何封装组件
引入react依赖后，通过React.Component为基类，创建基于它的组件对象，使用es6语法：
- 组件继承extends
- 类组件中必须实现一个render函数，作为该组件要展示的html内容
- html中，会使用数据和方法
- 组件构造函数内，存放组件需要的变量，组件内的变量分为：用于界面渲染的和不用于界面渲染的。用于界面渲染的，我们在指定的变量state中，用对象形式存储。
- 修改变量，也通过React.Component原型上的setState来修改。
- 组件需要的方法，需要手动处理this的绑定，将this显示绑定为组件实例：render中元素绑定方法的时候bind,或者在组件构造函数属性内，显示绑定
