元素（element)

首先需要了解的就是React的元素，因為元素是React中最小的建造部件,你所看到的網頁內容也就是由各種元素所組成的。React的元素在作用上來講和HTML的DOM是一致的，但從本質上來看，React DOM是一種JavaScript的對象，它是通過一個樹狀結構的JS對象來模擬DOM樹。

React DOM又稱之為Virtual DOM，它在React中的作用很大。我們都知道React很快，很輕。而它之所以如此的原因便在于Virtual DOM。在React DOM內部會進行一套高效率的Diff算法，在應用的數據改變之后，React會盡力少地比較，然后根據虛擬DOM只改變真實DOM中需要被改變的部分。React也藉此實現了它的高效率，高性能。除此之外，react DOM還有其他的一些作用，獨立分離出來的一層邏輯層，為react涉足于其他的領域提供了支持（譬如ReactNative,ReactVR 等）

React元素是不能突變的，也就是說不能更改它的子元素和任何屬性，它的每一個元素都像電影里面的一頻。更新 UI 的唯一方法是創建一個新的元素,并將其傳入ReactDOM.render()方法。

組件

組件在官方文檔的解釋是：是指在UI界面中，可以被獨立劃分的、可復用的、獨立的模塊。

React 組件非常簡單。我們可以認為它們就是簡單的函數，接受 props 和 state (后面會討論) 作為參數，然后渲染出 HTML。其實就類似于JS當中對function函數的定義，它一般會接收一個名為props的輸入，然后返回相應的React元素，再交給ReactDOM，最后渲染到屏幕上。

最簡單的創建一個組件的方法就是直接創建一個函數：

// 普通函數式
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 箭頭函數式
const Title = props => <h1>Hello, {props.name}</h1>

上面的寫法被稱之為函數式組件。同樣的，我們也可以使用ES6中的class語法來定義一個組件：

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

而組件在定義好之后，可以通過JSX描述的方式被引用，組件之間也可以相互嵌套和組合。
（有一個需要注意的是：組件名稱總是以大寫字母開始。
舉例來說, <button />代表一個 DOM 標簽，而 <Welcome /> 則代表一個組件，并且需要在作用域中有一個 Welcome組件。）

而 React 當中的組件是通過嵌套或組合的方式來實現組件代碼復用的。通過
props傳值和組合使用組件幾乎可以滿足所有場景下的需求。而這種方法也更符合組件化的思想。