Question

一个 Element 是一个简单的对象，它描述了你希望在屏幕上以 DOM 节点或其他组件的形式呈现的内容。Elements 在它们的属性中可以包含其他 Elements。创建一个 React 元素是很轻量的。一旦元素被创建后，它将不会被修改。

React Element 的对象表示如下：

const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)

上面的 React.createElement() 函数会返回一个对象。

{
type: 'div',
props: {
  children: 'Login',
  id: 'login-btn'
}
}

最后使用 ReactDOM.render() 方法渲染到 DOM：

<div id='login-btn'>Login</div>

而一个组件可以用多种不同方式声明。它可以是一个含有 render() 方法的类。或者，在简单的情况中，它可以定义为函数。无论哪种情况，它都将 props 作为输入，并返回一个 JSX 树作为输出：

const Button = ({ onLogin }) =>
<div id={'login-btn'} onClick={onLogin} />

然后 JSX 被转换成 React.createElement() 函数：

const Button = ({ onLogin }) => React.createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)

阅读资源：

1. 为什么 React 元素有一个$$typeof 属性?