# 組件和 Props
組件使你單獨的分離 UI 成為獨立的、可復用的部分，并單獨的思考每個部分。
從概念上講，組件就像 JavaScript 函數。它們接受任意輸入（稱為 props）并返回 React 元素來描述什么應該出現在屏幕上。
## 功能組件和類組件
定義一個組件最簡單的方式是編寫一個 JavaScript 函數：
~~~
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
~~~
這個函數是一個有效的組件，因為它接受一個單獨的 props 對象參數傳遞數據，并返回一個 React 元素。我們稱折衷組件為 功能組件，因為它們是字面上的 JavaScript 函數。
你也可以使用一個[ ES6 的類](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)來定義一個組件：
~~~
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
~~~
上面兩個組件從 React 的角度來看是等效的。
類組件有一些額外的功能，我們將在下一節討論。在那之前，我們將使用功能組件，因為它們更加簡潔。
## 渲染一個組件
前面，我們只遇到了代表 DOM 標簽的 React 元素：
~~~
const element = <div />;
~~~
然而，元素也可以代表用戶定義的組件：
~~~
const element = <Welcome name="Sara" />;
~~~
當 React 發現一個表示用戶定義的組件的元素時，它傳遞 JSX 屬性到這個組件作為一個單獨的對象。我們稱這個對象為 props。
例如，這個代碼渲染 "Hello, Sara" 到頁面：
~~~
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
~~~
在 CodePen 中[打開它](http://codepen.io/gaearon/pen/YGYmEG?editors=0010)。
我們回顧一下這個例子中發生了什么：
* 調用 ReactDOM.render() ，傳遞 `<Welcome name="Sara" />` 元素
* React 調用 Welcome 組件，使用 {name: 'Sara'} 作為 props
* 我們的 Welcome 組件返回一個 `<h1>Hello, Sara</h1>`元素作為結果
* ReactDOM 有效的更新 DOM 來匹配 `<h1>Hello, Sara</h1>`
> 警告：
組件的名稱總是以大寫字母開始。例如 `<div />` 代表一個 DOM 標簽，但是 `<Welcome />` 表示一個組件，需要在作用域內有一個 Welcome 。
## 組成組件
組件可以在它們的輸出中借用其它組件。這使得我們使用同樣的組件抽象任何的層級。一個按鈕、一個表單、一個對話框、一個屏幕：在 React 應用中，所有這些都通常描述為組件。
例如，我們可以創建一個 APP 組件，多次渲染 Welcome：
~~~
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
~~~
在 CodePen 中[打開它](http://codepen.io/gaearon/pen/KgQKPr?editors=0010)。
通常，新的 React apps 都有一個單獨的頂層 App 組件。然而，如果你在已有的應用中繼承 React，可能你從下至上從一個小的組件比如按鈕，然后慢慢的到視圖層級的頂層。
>[warning] 警告：
組件必須返回一個單獨的根元素。這是為什么我們添加一個 `<div>` 來包含所有 `<Welcome />` 元素的原因。
## 提取組件
不用擔心把一個組件分隔成更小的組件。例如，思考這個 Comment 組件：
~~~
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
~~~
在 CodePen 中[打開它](http://codepen.io/gaearon/pen/VKQwEo?editors=0010)。
它接受 author（一個對象），text（一個字符串）和date（一個日期）作為屬性，描述了一個社交媒體站點的評論。
這個組件修改起來很麻煩，因為它是被嵌套的，而且其中的獨立部分難以復用。我們從其中提取一些組件。
首先，提取頭像 Avatar：
~~~
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
~~~
Avatar 不需要知道它是在一個 Comment 組件中渲染。這是為什么我們給與它的 prop 一個更通用的名字：user，而不是 author 的原因。
我們建議從組件本身的觀點來命名 props 而不是它被使用的上下文環境。
現在可以簡化 Comment 一點：
~~~
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
~~~
接下來，提取用戶信息 UserInfo 組件， 在渲染一個 Avatar 之后緊接著渲染用戶的名字：
~~~
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
~~~
這使我們可以進一步簡化 Comment 組件：
~~~
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
~~~
在 CodePen 中[打開查看](http://codepen.io/gaearon/pen/rrJNJY?editors=0010)。
提取組件可能看起來是一個繁瑣的工作，但是在大型的 Apps 中可以回報給我們大量的可復用組件。一個好的經驗準則是如果你 UI 的一部分需要用多次（按鈕、面板、頭像），或者本身足夠復雜（App，FeedStory，Comment），好的做法是使其成為可復用組件。
## Props 和 只讀
無論聲明組件為一個函數或者一個類，它不能修改自己的 props。思考這個求和函數：
~~~
function sum(a, b) {
return a + b;
}
~~~
這種函數稱為 “純” 的，因為它們不會試圖改變它們的輸入，并且對于同樣的輸入總是返回相同結果。
作為對比，這個函數是“不純”的，因為它改變了自己的輸入：
~~~
function withdraw(account, amount) {
account.total -= amount;
}
~~~
React 相當靈活，但是它有一條嚴格的規則：
**所有 React 組件必須扮演純函數，遵守它們的 props 。**
當然，應用 UIs 總是動態的，并且會一直改變。在下一節，我們將會介紹一個新的概念，關于 “state”。State （狀態）允許 React 組件來修改它們的輸出作為用戶操作的響應、網絡響應以及其它響應，而避免違反這條規則。
