一個*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)