組件& Props
組件可以將UI上的內(nèi)容分成一個(gè)個(gè)的獨(dú)立的部分，這些組件可復(fù)用嚼吞。
組件從概念上來(lái)看很像函數(shù)盒件，接受任意的輸入值(稱(chēng)之為props)，并返回一個(gè)React元素舱禽。
組件分為兩類(lèi)炒刁，一類(lèi)是函數(shù)組件，一類(lèi)是類(lèi)組件誊稚。分別如下：
- 函數(shù)組件：函數(shù)組件就是用JavaScript的函數(shù)切心，但是函數(shù)名首字母必須是大寫(xiě)飒筑。
function Welcome(props) {
return <h1>hello world!</h1>
}
ReactDOM.render(
<Welcome />, document.getElementById('root')
);
可以看到渲染結(jié)果:
如果把函數(shù)組件名稱(chēng)Welcome改成小寫(xiě)字母開(kāi)頭welcome片吊，則沒(méi)有進(jìn)行渲染：
- 類(lèi)組件：可以使用ES6的class來(lái)定義組件：
class Welcome extends React.Component {
render() {
return <h1>hello world!</h1> ;
}
}
ReactDOM.render(
<Welcome />, document.getElementById('root')
);
使用類(lèi)組件的命名規(guī)則同函數(shù)組件一樣绽昏。
組件渲染
React元素不僅可以使瀏覽器DOM標(biāo)簽，也可以是用戶(hù)自定義的組件俏脊，當(dāng)React遇到元素是用戶(hù)自定義組件時(shí)全谤，會(huì)把JSX屬性作為一個(gè)對(duì)象傳遞給該組件，這個(gè)對(duì)象被叫做props爷贫。也就是你需要給這個(gè)組件傳遞參數(shù)的時(shí)候认然，就會(huì)用到這個(gè)對(duì)象。
function Welcome(props) {
return <h1>hello ,{props.name}!</h1>
}
const element = <Welcome name="jianshu" />
ReactDOM.render(
element, document.getElementById("root")
);
<Welcome>可以認(rèn)為是同<h1>等價(jià)的標(biāo)簽漫萄，可以對(duì)其進(jìn)行多個(gè)屬性的定義卷员，如上代碼，就是定義了name屬性腾务，并賦值為"jianshu"毕骡，那么屬性name和屬性值jianshu都傳遞給了對(duì)象props，可以認(rèn)為props就是一個(gè)對(duì)象岩瘦，也有了name屬性及其值未巫。當(dāng)然，作為對(duì)象启昧，那就可以有多個(gè)屬性叙凡，都可以進(jìn)行聲明和傳遞，如下圖:
如上文所述：
組件名稱(chēng)必須以大寫(xiě)字母開(kāi)頭密末。 例如握爷，<div /> 表示一個(gè)DOM標(biāo)簽，但 <Welcome /> 表示一個(gè)組件严里，并且在使用該組件時(shí)你必須定義或引入它新啼。
組件組合
組件可以在他的輸出中引用其他組件，這就可以讓我們使用同一個(gè)組件抽象出任意層次的細(xì)節(jié)田炭。例如如下代碼师抄，在App組件，用來(lái)多次渲染W(wǎng)elcome組件:
function Welcome(props) {
return <h1>hello {props.name}</h1>
}
function App() {
return (
<div>
<Welcome name="jianshu" />
<Welcome name="zhihu" />
<Welcome name="weibo" />
</div>
);
}
ReactDOM.render(
<App />, document.getElementById("root")
);
組件的返回值只能有一個(gè)根元素教硫。這也是我們要用一個(gè)<div>來(lái)包裹所有<Welcome />元素的原因叨吮。
Props的只讀性
不管是使用函數(shù)組件還是類(lèi)組件，在組件內(nèi)部是不能修改自己的props的瞬矩。也就是外部傳入給props對(duì)象的屬性茶鉴，是只讀的。
來(lái)看下如下的sum函數(shù)：
function sum(a,b) {
return a + b;
}
類(lèi)似與這種的函數(shù)成為純函數(shù)景用，函數(shù)沒(méi)有改變自己的輸入值涵叮，只要傳入的值是相同的惭蹂，返回的結(jié)果永遠(yuǎn)相同。
與之對(duì)應(yīng)的是非純函數(shù)割粮，函數(shù)會(huì)改變自己的輸入值：
function withdraw(account, amount) {
account.total -= amount;
}
React有嚴(yán)格的規(guī)定：
所有的React組件必須向春函數(shù)那樣使用它們的props盾碗。
