所谓组件，简单说，指的是能完成某个特定功能的独立的、可重用的代码。
|
|
Component 作为所有组件的基类，提供了很多组件共有的功能
一定要导入React，这是因为JSX最终会被转移成依赖于React的表达式
onClick
JSX的onClick时间处理方式与HTML的onclick有很大不同
HTML的onclick：
- onclick添加的处理函数是在全局环境下执行的，污染了全局环境
- 给很多dom添加事件，会影响网页性能，网页处理函数越多，性能就越低
- 如果要动态的从dom删除事件，需要把对应的事件处理器注销，如果忘记注销，可能造成内存泄露
JSX的onClick：
- onClikc挂载的每个函数都可以控制在组件范围内，不会污染全局变量
- 使用了事件委托的方式处理点击事件，无论多少个出现，最终都只在DOM书上添加一个事件处理函数，挂在最顶层的DOm节点上。
- 所有的点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数，使用事件委托的性能当然要比为每个onClick都挂载一个事件处理函数要高。
Virtual DOM
React利用Virtual DOM，让每次渲染都指重新渲染最少的DOM元素
Virtual DOM 不会触及浏览器部分，只是存在于JavaScript空间的树形结构，每次自上而下渲染React组件是，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比就会发现差别，然后真正的DOM树时就只需要触及差别中的部分就行。
原则
组件的划分要满足高内聚 (High Cohesion)和低耦合 (Low Coupling)的原则。
高内聚 指的是把逻辑紧密相关的内容放在一个组件中。用户界面无外乎内容、交互行为和样式。传统上，内容由HTML表示，交互行放在JavaScript代码文件中，样式放在CSS文件中定义。
低耦合 指的是不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。保持整个系统的低耦合度，需要对系统中的功能有充分的认识，然后根据功能点划分模块，让不同的组件去实现不同的功能，这个功夫还在开发者身上，不过，React组件的对外接口非常规范，方便开发者设计低耦合的系统。
React的props和state
prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。
当prop的类型不是字符串类型时，在JSX中必须用花括号{}把prop值包住。
React组件要反馈数据给外部世界，也可以用prop，因为prop的类型不限于纯数据，也可以是函数，函数类型的prop等于让父组件交给了子组件一个回调函数，子组件在恰当的实际调用函数类型的prop，可以带上必要的参数，这样就可以反过来把信息传递给外部世界。