組件讓你可以將用戶界面分成獨(dú)立的，可重復(fù)使用的部分，并且可以獨(dú)立思考每一部分。

從概念上講，組件就像JavaScript函數(shù)一樣。他們接受任意輸入（稱為“道具”）并返回描述屏幕上應(yīng)顯示內(nèi)容的React元素。

功能和類組件

定義組件的最簡(jiǎn)單方法是編寫一個(gè)JavaScript函數(shù)：

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;}

這個(gè)函數(shù)是一個(gè)有效的React組件，因?yàn)樗邮芤粋€(gè)包含數(shù)據(jù)的“props”（代表屬性）對(duì)象參數(shù)并返回一個(gè)React元素。我們稱這些組件為“功能性”，因?yàn)樗鼈儗?shí)際上是JavaScript功能。

您也可以使用ES6類來定義組件：

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

以上兩個(gè)組件與React的觀點(diǎn)相同。

類有一些額外的功能，我們將在下面的章節(jié)中討論。在此之前，我們將使用功能組件來簡(jiǎn)潔。

渲染組件

以前，我們只遇到了表示DOM標(biāo)簽的React元素：

const element = <div />;

但是，元素也可以表示用戶定義的組件：

const element = <Welcome name="Sara" />;

當(dāng)React查看表示用戶定義組件的元素時(shí)，它會(huì)將JSX屬性作為單個(gè)對(duì)象傳遞給此組件。我們稱這個(gè)對(duì)象為“道具”。

例如，這段代碼在頁(yè)面上呈現(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上試用它。

讓我們回顧一下在這個(gè)例子中發(fā)生了什么：

1. 我們呼吁ReactDOM.render()與<Welcome name="Sara" />元素。

2. React調(diào)用Welcome組件{name: 'Sara'}作為道具。

3. 我們的Welcome組件返回一個(gè)<h1>Hello, Sara</h1>元素作為結(jié)果。

4. React DOM有效地更新DOM以匹配<h1>Hello, Sara</h1>。

警告：   始終用大寫字母開始組件名稱。例如，<div />表示一個(gè)DOM標(biāo)簽，但<Welcome />表示一個(gè)組件，并且需要Welcome在范圍內(nèi)。

構(gòu)成組件

組件可以在其輸出中引用其他組件。這讓我們可以對(duì)任何細(xì)節(jié)級(jí)別使用相同的組件抽象。一個(gè)按鈕，一個(gè)窗體，一個(gè)對(duì)話框，一個(gè)屏幕：在React應(yīng)用程序中，所有這些都通常表示為組件。

例如，我們可以創(chuàng)建一個(gè)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應(yīng)用程序App在頂部有一個(gè)組件。但是，如果您將React集成到現(xiàn)有的應(yīng)用程序中，則可能會(huì)自下而上地使用一個(gè)小組件，Button并逐漸走向視圖層次結(jié)構(gòu)的頂部。

提取組件

不要害怕將組件分解成更小的組件。

例如，考慮這個(gè)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（一個(gè)對(duì)象），text（一個(gè)字符串）和date（一個(gè)日期）作為道具，并描述了對(duì)社交媒體網(wǎng)站的評(píng)論。

由于所有的嵌套，這個(gè)組件可能會(huì)變得很棘手，并且很難重用它的各個(gè)部分。我們從中提取一些組件。

首先，我們將提取Avatar：

function Avatar(props) {  return (    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}    />  );}

在Avatar不需要知道它正在呈現(xiàn)內(nèi)Comment。這就是為什么我們給它的道具一個(gè)更通用的名稱：user而不是author。

我們建議從組件自己的角度命名道具，而不是使用它的環(huán)境。

我們現(xiàn)在可以簡(jiǎn)化Comment一點(diǎn)點(diǎn)：

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>  );
        }

接下來，我們將提取一個(gè)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進(jìn)一步簡(jiǎn)化：

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上試用。

首先提取組件可能看起來像是咕嚕咕嚕的工作，但在更大的應(yīng)用程序中有可重用組件的調(diào)色板。一個(gè)好的經(jīng)驗(yàn)法則是，如果你的用戶界面的一部分被多次使用（Button，Panel，Avatar），或者是對(duì)自己足夠復(fù)雜（App，FeedStory，Comment），這是一個(gè)很好的候選人是一個(gè)可重用的組件。

道具是只讀的

無論你是將一個(gè)組件聲明為一個(gè)函數(shù)還是一個(gè)類，它都不能修改它自己的道具?？紤]這個(gè)sum功能：

function sum(a, b) {  return a + b;}

這些函數(shù)被稱為“純粹的”，因?yàn)樗鼈儾粫?huì)嘗試改變它們的輸入，并且總是為相同的輸入返回相同的結(jié)果。

相反，這個(gè)函數(shù)是不純的，因?yàn)樗淖兞怂约旱妮斎耄?/p>

function withdraw(account, amount) {
  account.total -= amount;}

React非常靈活，但它有一個(gè)嚴(yán)格的規(guī)則：

所有的React組件都必須像純粹的道具一樣行事。

當(dāng)然，應(yīng)用程序用戶界面是動(dòng)態(tài)的，并隨著時(shí)間而改變。在下一節(jié)中，我們將介紹一個(gè)新的“國(guó)家”概念。狀態(tài)允許React組件在不違反此規(guī)則的情況下響應(yīng)用戶操作，網(wǎng)絡(luò)響應(yīng)和其他任何內(nèi)容而隨時(shí)間改變其輸出。