前置简介

什么是组件？

组件就是能跟其他物件组合起来使用的物件。

const div = React.createElement('div',...)，

这是一个React元素(div的开头d小写)，

const Div = () => React.createElement('div',...)，

这是一个React组件(Div的开头D大写，并且是一个函数)，

这种写法是React中元素与组件的约定写法，

就目前而言一个返回React元素的函数就是组件。

React两种组件

1. 函数组件

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

使用方法：<Welcome name="frank"/>

2. 类组件

class Welcome extends React.Component {
	render() {
    	return <h1>Hello, {props.name}</h1>
    }
}

使用方法：<Welcome name="frank"/>

<Welcome/> 最终会被翻译成什么？

<div/> 会被翻译为React.createElement(‘div’) , 如果是小写的标签，例如div，就会被自动翻译成…create…(字符串), 用来创建一个标签。

<Welcome/> 翻译为React.createElement(Welcome) , 如果大写开头的标签，会被翻译成一个…create…(函数)，用来创建一个组件。

如何验证这个说法是对的？ 请使用 https://babeljs.io/repl/ 这个网址进行转换，下面是几个示例

大写Div

小写div

大写Xxx

小写xxx

React.createElement的逻辑

1. 如果传入的是一个字符串 div , 那么就会创建并返回一个虚拟DOM回来。

2. 如果传入的是一个函数，那么就会调用这个函数，获取函数的返回值，并创建一个虚拟DOM替换原本的函数位置，例如：

const Welcome = () => {
	return <div class="content" title="I'm Content">I'm Content</div> 
}
<Welcome/>

最终 <div class="content" title="I'm Content">I'm Content</div> 会替代 <Welcome/> 。

3. 如果传入的是一个类，则会使用 new 关键字构造出这个类的一个对象（并执行 constructor 方法），
   获取一个组件对象，然后调用 render 方法，获取这个方法的返回值进行渲染。

class Welcome extends React.Component {
	constructor() {
    	super()
        this.state = {n:0}
    }
	render() {
    	return <div>hi</div>
    }
}