2.元件和元素

元素（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傳值和組合使用元件幾乎可以滿足所有場景下的需求。而這種方法也更符合元件化的思想。