一个*Element*是一个简单的对象，它描述了你希望在屏幕上以 DOM 节点或其他组件的形式呈现的内容。*Elements*在它们的属性中可以包含其他*Elements*。创建一个 React 元素是很轻量的。一旦元素被创建后，它将不会被修改。 React Element 的对象表示如下： ~~~js const element = React.createElement( 'div', {id: 'login-btn'}, 'Login' ) ~~~ 上面的`React.createElement()`函数会返回一个对象。 ~~~ { type: 'div', props: { children: 'Login', id: 'login-btn' } } ~~~ 最后使用`ReactDOM.render()`方法渲染到 DOM： ~~~html <div id='login-btn'>Login</div> ~~~ 而一个组件可以用多种不同方式声明。它可以是一个含有`render()`方法的类。或者，在简单的情况中，它可以定义为函数。无论哪种情况，它都将 props 作为输入，并返回一个 JSX 树作为输出： ~~~js const Button = ({ onLogin }) => <div id={'login-btn'} onClick={onLogin} /> ~~~ 然后 JSX 被转换成`React.createElement()`函数： ~~~js const Button = ({ onLogin }) => React.createElement( 'div', { id: 'login-btn', onClick: onLogin }, 'Login' ) ~~~ ## 参考 [react面试题](https://github.com/semlinker/reactjs-interview-questions)