在剛開始寫js的時(shí)候孽亲，如果某個(gè)js函數(shù)代碼量很大，我們會進(jìn)行拆分展父，將其劃分成多個(gè)細(xì)化的功能塊返劲。
就像這樣
button[0].onclick = function () {
cleanInputValue()
// ...
}
button[1].onclick = function () {
cleanInputValue()
// ...
}
function cleanInputValue() {
//....
}
細(xì)分功能塊可以避免代碼重復(fù)，也能夠讓代碼邏輯更加清晰栖茉，更加容易擴(kuò)展篮绿，修改錯(cuò)誤更容易。
把代碼細(xì)分之后也可以省去很多注釋吕漂，將來代碼需要更改亲配，也可以減少代碼更改量
在react的開發(fā)中，我們會引入組件的概念惶凝。組件允許我們將用戶界面拆分為獨(dú)立的吼虎、可重用的一部分，組件其實(shí)有些像js中的function苍鲜。我們通過對組件進(jìn)行拆分思灰，實(shí)現(xiàn)組件化開發(fā)。針對不同的業(yè)務(wù)場景我們可以引用相應(yīng)的組件混滔，減少了開發(fā)量洒疚。
我們把微票電影票房分析的首頁進(jìn)行組件化拆分后如上圖所示。其中DateChoose組件和Footer組件在很多頁面都會用到遍坟，我們可以把這兩個(gè)組件放到單獨(dú)的common文件夾中拳亿。供其他頁面調(diào)用
而Movie組件在本頁面會被用到很多次晴股，我們也會把Movie組件單獨(dú)拆分出來愿伴，作為一個(gè)可復(fù)用組件。
但是在如何定義一個(gè)組件時(shí)电湘，我們經(jīng)常會寫出不太好的代碼
就像這樣
export default class Home extends Page {
// ...
renderMovie(movieName) {
//...
return (
<div>{movieName}</div>
)
}
render() {
let movieName1 = '奇異博士'
let movieName2 = '蠟筆小新'
return(
<div>...</div>
<div>{renderMovie(this, movieName1)}</div>
<div>{renderMovie(this, movieName2)}</div>
<div>...</div>
)
}
}
這樣當(dāng)然也沒什么問題隔节，但我們很難把renderMovie稱為一個(gè)組件鹅经，他更像一個(gè)復(fù)用函數(shù)而不是一個(gè)復(fù)用組件。實(shí)際上怎诫，這個(gè)復(fù)用函數(shù)只是在jsx語法的幫助下瘾晃，實(shí)現(xiàn)了組件的作用。
這種方法不符合組件化思想幻妓，而且renderMovie沒辦法進(jìn)行參數(shù)校驗(yàn)蹦误，我們無法保證傳入數(shù)據(jù)的有效性。
Functional
在react中定義組件最簡單的做法是使用Functional肉津。
export default class Home extends Page {
// ...
render() {
return(
<div>...</div>
<Movie name='奇異博士' />
<Movie name='蠟筆小新' />
<div>...</div>
)
}
}
funtion Movie(props) {
//...
return (
<div>{props.name}</div>
)
}
Movie.propTypes = {
name: React.PropTypes.string.isRequired,
}
為了保證組件被正確使用强胰，為此我們引入 propTypes。React.PropTypes 提供很多驗(yàn)證器 (validator) 來驗(yàn)證傳入數(shù)據(jù)的有效性妹沙。當(dāng)向 props 傳入無效數(shù)據(jù)時(shí)偶洋，JavaScript 控制臺會拋出警告。
另外根據(jù)條件渲染組件的時(shí)距糖，我們可以把條件值通過props傳入組件內(nèi)部玄窝。
export default class Home extends Page {
// ...
render() {
let status = xxx
return(
<div>...</div>
<Movie name='奇異博士' />
<Movie name='蠟筆小新' status={status} />
}
<div>...</div>
)
}
}
funtion Movie(props) {
//...
if (!props.status) {
return null
}
return (
<div>{props.name}</div>
)
}
Movie.propTypes = {
name: React.PropTypes.string.isRequired,
}
使用這種方法代碼會更優(yōu)雅一些。
至于把組件拆分到什么情況下才可以悍引，react的建議是越小越好恩脂，每個(gè)小組件都保證獨(dú)立與可重用。就像拼積木一樣吗铐，在業(yè)務(wù)變更時(shí)东亦，我們可以很快的迭代和開發(fā)。
