React Component vs React Element
有这样的一个问题：
// 方法定义
function add(x, y) {
return x + y
}
// 方法调用
add(1, 2)
// 组件定义
class Icon extends Component {}
// 组件调用？？？？？？
<Icon />
最后的一句<Icon />用专业的词概括是什么操作，组件调用还是什么？
有答“组件声明”的，有答“组件调用的”，有“组件初始化”的，还有“使用一个组件”的。没有一个统一的称呼。造成这样局面的原因是很多时候我们都没有去详细的了解过JSX和React实际操作之间的抽象层。现在我们就深入研究一下这部分知识。
我们来看看最基础的问题，什么是React？React就是一个用来写界面的库。不管React和React的生态有多复杂，最核心的功能就是用来写界面的。那么我们来看看Element，很简单，但是一个React element描述的就是你想要在界面上看到的。再深入一点，一个React element就是一个代表了DOM节点的对象。注意，一个React element并不是在界面上实际绘制的东西，而是这些内容的代表。由于JavaScript对象是轻量级的，React可以任意的创建和销毁这些element对象，而且不用担心太大的消耗。另外，React可以分析这些对象，把当前的对象和之前的对象对比，找出发生的改变，然后根据实际发生的改变来更新实际的DOM。
为了创建一个DOM节点的代表对象（也就是React element），我们可以使用React的createElement方法。
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)
createElement方法传入了三个参数。第一个是标签名称字符串（div、span等），第二个是给element设置的属性，第三个是内容或者是子的React element。本例中的“Login”就是element的内容。上面的createElement方法调用后会返回一个这样的对象：
{
type: 'div’，
props: {
children: 'Login',
id: 'login-btn'
}
}
当这个对象绘制为DOM（使用ReactDOM.render方法）的时候，我们就会有一个新的DOM节点：
<div id='login-btn'>Login</div>
有一个很有意思的地方，我们在学React的时候首先注意到的就是component（组件）。“Components（组件）是React的构建块”。注意，我们是以element开始本文的。而且你一旦理解了element，理解component也就是水到渠成的事了。一个component就是一个方法或者一个类，可以接受一定的输入，之后返回一个React element。
function Button({onLogin}) {
return React.createElement(
'div',
{id: 'login-btn', onClick: onLogin},
'Login'
)
}
在上面的定义中，我们有一个Button组件（component）。接收一个onLogin输入并返回一个React element。注意，Button组件接收的onLogin方法是它的prop。然后把这个方法通过createElement方法的第二个参数传入到了实际的DOM里。
更深入一点
目前，我们只接触到了使用HTML元素来创建React element，比如“div”、“span”等。其实，你也可以把其他的React component（组件）作为第一个参数传入createElement方法。
const element = React.createElement(
User,
{name: 'Uncle Charlie'},
null
)
然而，不同于一般的HTML标签名称，React如果发现第一个参数是class或者function类型的话，它就会检查传入的参数要绘制的是一个什么element，传入必要的props。之后React会一直检查，直到没有方法或者类作为第一个参数传入createElement。我们来看看下面的例子：
function Button({addFriend}) {
return React.createElement(
'button',
{onClick: addFriend},
'Add Friend'
)
}
function User({name, addFriend}) {
return React.createElement(
'div',
null,
React.createElement(
'p',
null,
name
),
React.createElement(Button, {addFriend})
)
}
上面的例子里有两个component（组件）。一个Button，一个User。User“代表”了一个div，div里面有两个子节点：一个包含用户名的“p”和一个Button组件。现在我们看看上面的例子的具体的调用过程。
function Button({addFriend}) {
return {
type: 'button',
props: {
onClick: addFriend,
children: 'Add Friend'
}
}
}
function User({name, addFreind}) {
return {
type: 'div',
props: {
children: [
{
type: 'p',
props: {
children: name
}
},
{
type: Button,
props: {
addFriend
}
}
]
}
}
}
在上面的代码里你会看到四种不同的属性：“button”，“div”，“p”和Button。当React看到一个element是function和类类型的话，它就会检查element会返回什么element，并传入对应的props。在这个过程结束之后，React就拥有了一个代表DOM树的对象的数。上面的例子最后的结构是这样的：
{
type: 'div',
props: {
children: [
{
type: 'p',
props: {
children: 'Tyler McGinnis'
}
},
{
type: 'button',
props: {
onClick: addFriend,
children: 'Add Friend'
}
}
]
}
}
上面叙述的整个过程叫做Reconciliation（这个不知道怎么翻译，应该叫和谐？）。在React里，每次调用setState方法或ReactDOM.render方法被调用的时候都会触发这个过程。
那么我们来看看最开始的问题：
// 方法定义
function add(x, y) {
return x + y
}
// 方法调用
add(1, 2)
// 组件定义
class Icon extends Component {}
// 组件调用？？？？？？
<Icon />
现在我们已经有了回答这个问题的全部知识，除了一点点以外。有个地方，你可能觉得奇怪在使用React的时候，从来没有用过createElement方法来创建element。你是用了JSX。我（作者）最开始的时候说：“主要原因是从来没有去详细的了解过JSX和React实际操作之间的抽象层”。这个抽象层就是JSX会被Babel转码为React.createElement方法的调用。
看看我们前面的例子：
function Button({addFriend}) {
return React.createElement(
'button',
{onClick: addFriend},
'Add Friend'
)
}
function User({ name, addFriend }) {
return React.createElement(
"div",
null,
React.createElement(
"p",
null,
name
),
React.createElement(Button, { addFriend })
)
}
写成JSX的样子是这样的：
function Button({addFriend}) {
return (
<button onClick={addFriend}>Add Friend</button>
)
}
function User({name, addFriend}) {
return (
<div>
<p>{name}</p>
<Button addFriend={addFriend} />
</div>
)
}
所以，最后我们应该怎么回答前面的问题呢？<Icon />叫做什么？
应该叫做“创建element”，应为JSX最后会转码为createElement方法的调用：
React.createElement(Icon, null)
前面的例子都是“创建一个React element”。
React.createElement(
'div',
{ className: 'container' },
'Hello!'
)
<div className='container'>Hello!</div>
<Hello />
原文地址：https://tylermcginnis.com/rea...
