?
This document uses PHP Chinese website manual Release
組件讓你可以將用戶界面分成獨立的，可重復使用的部分，并且可以獨立思考每一部分。
從概念上講，組件就像JavaScript函數(shù)一樣。他們接受任意輸入（稱為“道具”）并返回描述屏幕上應顯示內(nèi)容的React元素。
功能和類組件
定義組件的最簡單方法是編寫一個JavaScript函數(shù)：
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}這個函數(shù)是一個有效的React組件，因為它接受一個包含數(shù)據(jù)的“props”（代表屬性）對象參數(shù)并返回一個React元素。我們稱這些組件為“功能性”，因為它們實際上是JavaScript功能。
您也可以使用ES6類來定義組件：
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}以上兩個組件與React的觀點相同。
類有一些額外的功能，我們將在下面的章節(jié)中討論。在此之前，我們將使用功能組件來簡潔。
渲染組件
以前，我們只遇到了表示DOM標簽的React元素：
const element = <div />;
但是，元素也可以表示用戶定義的組件：
const element = <Welcome name="Sara" />;
當React查看表示用戶定義組件的元素時，它會將JSX屬性作為單個對象傳遞給此組件。我們稱這個對象為“道具”。
例如，這段代碼在頁面上呈現(xiàn)“Hello，Sara”：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root'));在CodePen上試用它。
讓我們回顧一下在這個例子中發(fā)生了什么：
我們呼吁
ReactDOM.render()與<Welcome name="Sara" />元素。
2. React調用Welcome組件{name: 'Sara'}作為道具。
3. 我們的Welcome組件返回一個<h1>Hello, Sara</h1>元素作為結果。
4. React DOM有效地更新DOM以匹配<h1>Hello, Sara</h1>。
警告： 始終用大寫字母開始組件名稱。例如，
<div />表示一個DOM標簽，但<Welcome />表示一個組件，并且需要Welcome在范圍內(nèi)。
構成組件
組件可以在其輸出中引用其他組件。這讓我們可以對任何細節(jié)級別使用相同的組件抽象。一個按鈕，一個窗體，一個對話框，一個屏幕：在React應用程序中，所有這些都通常表示為組件。
例如，我們可以創(chuàng)建一個App呈現(xiàn)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上試用。
通常情況下，新的React應用程序App在頂部有一個組件。但是，如果您將React集成到現(xiàn)有的應用程序中，則可能會自下而上地使用一個小組件，Button并逐漸走向視圖層次結構的頂部。
提取組件
不要害怕將組件分解成更小的組件。
例如，考慮這個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上試用。
它接受author（一個對象），text（一個字符串）和date（一個日期）作為道具，并描述了對社交媒體網(wǎng)站的評論。
由于所有的嵌套，這個組件可能會變得很棘手，并且很難重用它的各個部分。我們從中提取一些組件。
首先，我們將提取Avatar：
function Avatar(props) { return ( <img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name} /> );}在Avatar不需要知道它正在呈現(xiàn)內(nèi)Comment。這就是為什么我們給它的道具一個更通用的名稱：user而不是author。
我們建議從組件自己的角度命名道具，而不是使用它的環(huán)境。
我們現(xiàn)在可以簡化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呈現(xiàn)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上試用。
首先提取組件可能看起來像是咕嚕咕嚕的工作，但在更大的應用程序中有可重用組件的調色板。一個好的經(jīng)驗法則是，如果你的用戶界面的一部分被多次使用（Button，Panel，Avatar），或者是對自己足夠復雜（App，FeedStory，Comment），這是一個很好的候選人是一個可重用的組件。
道具是只讀的
無論你是將一個組件聲明為一個函數(shù)還是一個類，它都不能修改它自己的道具?？紤]這個sum功能：
function sum(a, b) { return a + b;}這些函數(shù)被稱為“純粹的”，因為它們不會嘗試改變它們的輸入，并且總是為相同的輸入返回相同的結果。
相反，這個函數(shù)是不純的，因為它改變了它自己的輸入：
function withdraw(account, amount) {
account.total -= amount;}React非常靈活，但它有一個嚴格的規(guī)則：
所有的React組件都必須像純粹的道具一樣行事。
當然，應用程序用戶界面是動態(tài)的，并隨著時間而改變。在下一節(jié)中，我們將介紹一個新的“國家”概念。狀態(tài)允許React組件在不違反此規(guī)則的情況下響應用戶操作，網(wǎng)絡響應和其他任何內(nèi)容而隨時間改變其輸出。