写在前面

React 和 Vue 一样都有组件的概念，组件顾名思义就是可以和别的组合在一用的物件，React 和 Vue 中的组件的定义有所不同，React 的组件介绍如下。

1. 元素与组件

在 React 中，元素指的是 React.createElement 创建出来的 React 元素，又称虚拟 DOM，而 React 中，返回一个 React 元素的函数就是组件，从上篇博客的 React-demo1 中的实例可以看出，在 React 中，元素一般用于不会在页面改变的情况下，而组件用于页面需要刷新的情况下，React 的设计原理就是当数据变化时重新局部刷新页面，因此用到的经常是组件。

元素一般是小写，组件一般是首字母大写。

2. 组件分类

在 React 中的组件有两种，一种是函数组件，一种是类组件。组件必须是返回 React 元素的物件，因此无论是函数组件还是类组件都必须有 return React元素，在函数组件中，直接使用函数的 return 返回值返回 React 组件即可。在类组件中，要必须有一个 render() 函数，然后在 render() 函数中 return 返回 React 元素。
**

2.1 函数组件**


function xxx(){ return React元素 }**

  1. function Welcome(props){
  2.     return <h1>Hello, {props.name}</h1>;
  3. }    
  4. //组件的使用
  5. <Welcome name="frank"/>

2.2 类组件

class xxx extends React.Component{
render(){
return React组件
}
}

  1. class Welcome extends React.Component {
  2.   render() {
  3.       return <h1>Hello, {this.props.name}</h1>
  4.   }
  5. }
  6. //组件的使用
  7. <Welcome name="frank"/>

3. 组件的使用

React 的组件和 Vue 的组件的使用方法都是一样的，都是直接使用 标签，标签必须闭合，因为这是 XML 语法，严格要求标签闭合。

Vue 和 React 好像都在用 XML 的自定义标签来设计自己的组件， 然后加一个 loader 编译器进行翻译，因此严格来说，React 的 jsx 中的是 XML 语法，不是 HTML，但最终显示在浏览器上时是会翻译成 HTML。

4. 组件的翻译过程

React 使用 babel 将 XML 语法翻译成对应的 js 语句，如

  1. <div/> 会被翻译成 React.createElement("div");
  2. <Welcome/> 会被翻译成 React.createElement(Welcome);
  4. //会不会疑惑，Welcome 组件不是函数吗？放在 createElement 中不应该是元素吗？
  6. //是的，这涉及到 createElement 的具体实现逻辑
  8. React.createElement 的逻辑
  9. 1. 如果传入字符串 "div"，则会创建一个 div (普通元素)
  10. 2. 如果传入一个函数，则会调用该函数获取其返回值元素 (函数组件)
  11. 3. 如果传入一个类，则在类的前面会加上 new 操作符得到其实例，然后调用该实例的 render
  12.    方法，获取其返回值元素 (类组件)

可使用 babel online 查看 jsx 语法翻译成 js 语法的过程。