組件可以讓你將UI分割成獨(dú)立的，可復(fù)用的模塊，然后考慮將每個(gè)模塊彼此隔離。
從概念上理解，組件就像js中的函數(shù)。他們接受隨意的輸入（被稱為props）然后返回React元素來(lái)描述屏幕上應(yīng)該出現(xiàn)什么。

函數(shù)式和類式組件

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

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

這個(gè)函數(shù)是一個(gè)有效的React組件因?yàn)樗邮芤粋€(gè)props對(duì)象作為參數(shù)然后返回一個(gè)React元素。我們把這樣的叫做函數(shù)式組件因?yàn)樗麄兙褪亲置嬉馑忌蟡s函數(shù)。

你也可以使用ES6的class來(lái)定義一個(gè)組件：

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

從React的角度來(lái)看，以上兩種方式定義的組件是一樣的。

類定義這種方法有一些額外的特性我們?cè)谙乱徽鹿?jié)會(huì)討論。在此之前，我們會(huì)使用函數(shù)來(lái)定義組件因?yàn)檫@樣比較簡(jiǎn)潔。

渲染一個(gè)組件

先前，我們只遇到React元素代表DOM標(biāo)簽的情況：

const element = <div />;

然而，React元素也可以代表用戶自定義組件：

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

當(dāng)React認(rèn)為一個(gè)元素代表用戶自定義組件時(shí)，它通過(guò)單個(gè)對(duì)象傳遞JSX屬性到這個(gè)組件。我們叫這個(gè)對(duì)象為“props”。

舉個(gè)例子，這段代碼渲染“Hello, Sara”到頁(yè)面上：

function Welcome(props) {return <h1>Hello, {props.name}</h1>; }const element = <Welcome name="Sara" />; ReactDOM.render(element,document.getElementById('root') );

在CodePen中試一試。

讓我們概括一下在這個(gè)例子中到底發(fā)生了什么:

我們調(diào)用了ReactDOM.render()來(lái)渲染<Welcome name="Sara"/>元素。

React調(diào)用Welcome組件并將{name: 'Sara'}這個(gè)對(duì)象作為props傳入。

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

React DOM高效地更新了DOM來(lái)匹配<h1>Hello, Sara</h1>。

附加說(shuō)明：

總是將組件名的首字母大寫。

舉個(gè)例子，<div/>代表一個(gè)DOM標(biāo)簽，但是<Welcome />代表一個(gè)一個(gè)組件并且需要Welcome定義或引入。

組合組件

組件可以在它的輸出中引用其他組件。這樣我們可以使用同一個(gè)組件抽象出任意等級(jí)的細(xì)節(jié)。一個(gè)按鈕，一個(gè)表單，一個(gè)目錄，一個(gè)對(duì)話框，整個(gè)屏幕內(nèi)容：在React應(yīng)用中，所有這些都同樣表示為組件。

舉個(gè)例子，我們創(chuàng)建一個(gè)渲染W(wǎng)elcome組件多次的App組件：

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)用有一個(gè)單獨(dú)的App組件在最頂端。然而，如果你整合React到一個(gè)已經(jīng)存在的應(yīng)用里，也許你會(huì)從底開(kāi)始通過(guò)小組件類似Button逐漸替換一直到最高級(jí)別。

附加說(shuō)明：

組件必須返回一個(gè)單個(gè)的根元素。這就是為什么我們添加了一個(gè)<div>去包含所有<Welcome />元素。

提取組件

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

舉個(gè)例子，看看這個(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里試一試。

Comment組件接受了author（一個(gè)對(duì)象），text（一個(gè)字符串）和date（一個(gè)日期對(duì)象）作為屬性，它在一個(gè)社會(huì)媒體網(wǎng)站上描述一段評(píng)論。

這個(gè)組件可以被簡(jiǎn)化因?yàn)榍短椎臇|西太多，它很難被復(fù)用。讓我們從這里提取出一些組件。

首先，我們將提取Avatar：

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

Avatar組件不需要知道自己將要被渲染到Comment內(nèi)部。這就是為什么我們給他的屬性一個(gè)更通用的名字：user而不是author。

建議在命名屬性名的時(shí)候從組件自己的角度來(lái)命名而不要從使用時(shí)的上下文環(huán)境來(lái)命名。

現(xiàn)在可以將Comment組件簡(jiǎ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> ); } 接下來(lái)，我們將提取UserInfo組件，它內(nèi)部渲染了一個(gè)Avatar旁邊的用戶名： function UserInfo(props) {return (<div className="UserInfo"><Avatar user={props.user} /><div className="UserInfo-name">{props.user.name}</div></div> ); }

這允許我們更進(jìn)一步地簡(jiǎn)化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中試一試。

提取組件也許看起來(lái)像很枯燥的工作，但是擁有一系列可復(fù)用的組件會(huì)在大型應(yīng)用中起到很好的效果。有一個(gè)很好的經(jīng)驗(yàn)法則就是如果有一部分UI已經(jīng)被使用多次（如Button，Panel，Avatar），或者組件本身已經(jīng)足夠復(fù)雜（如APP，FeedStory，Comment），那么使它成為一個(gè)可復(fù)用的組件會(huì)更合適。

props是只讀的

如果你聲明了一個(gè)組件使用函數(shù)或者類，那么它永遠(yuǎn)不能修改它自己的props。看看這個(gè)sum函數(shù)：

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

這樣的函數(shù)被稱為“純函數(shù)”因?yàn)樗鼈儾粐L試改變它們的輸入，而且在輸入同樣的情況下一直返回一樣的結(jié)果。

相比之下，這個(gè)函數(shù)就不是純函數(shù)因?yàn)樗淖兞溯斎?#xff1a;

function withdraw(account, amount) {account.total -= amount; } React是很靈活的但是它有一個(gè)嚴(yán)格的規(guī)定： 所有React組件必須是純粹的函數(shù)不能改變props。 當(dāng)然，應(yīng)用的UI是隨著時(shí)間動(dòng)態(tài)變化的。在下一章節(jié)，我們會(huì)介紹一個(gè)新的概念叫做“state”。state允許React組件隨著時(shí)間變化去改變他們的輸出作為對(duì)用戶動(dòng)作的響應(yīng)，網(wǎng)絡(luò)的響應(yīng)或者其他東西。state并沒(méi)有違反這個(gè)規(guī)定。

轉(zhuǎn)載于:https://www.cnblogs.com/hahazexia/p/6381054.html

總結(jié)

以上是生活随笔為你收集整理的React文档（五）组件和props的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。