React其中一個(gè)重要思想就是 "react內(nèi)一切皆組件"，一個(gè)好的應(yīng)用應(yīng)該有一定的原則來(lái)劃分組件巨双。
我們劃分組件的時(shí)候應(yīng)該盡量保持一個(gè)組件只做一件事。每個(gè)小組件只關(guān)注實(shí)現(xiàn)單個(gè)功能，組合起來(lái)也能實(shí)現(xiàn)復(fù)雜的實(shí)際需求雷恃。
雖然組件都是獨(dú)立個(gè)體处坪，但不同組件之間總會(huì)有通信交流根资。
我們劃分組件要滿足“高內(nèi)聚，低耦合”的原則同窘。
- 高內(nèi)聚---將邏輯緊密相關(guān)的內(nèi)容放在一個(gè)組件內(nèi)玄帕。
- 低耦合---不同組件之間的依賴關(guān)系要盡量弱化。
組件的數(shù)據(jù)
react組件的數(shù)據(jù)分兩種：prop和state想邦。prop是組件的對(duì)外接口裤纹，一般用于組件之間的通信；而state是組件的內(nèi)部狀態(tài)案狠。
prop
prop是從外部傳遞給組件的數(shù)據(jù)服傍。下面舉個(gè)例子
// 組件內(nèi)部代碼片段 src/component/todoItem.js
render(){
return(
<input value={this.props.value} onChange={changeInputVal} />
)
},
changeInputVal(e){
this.props.onChange.call(null,e)//帶有參數(shù)e的回調(diào)函數(shù)
}
// 包含todoItem的父組件代碼片段 src/app.js
import Todoltem from './component/todoItem.js'
...
render(){
return (
<div className="todolist">
<TodoItem
value={this.state.inputValue}
onChange={this.updateValue.bind(this)}
></TodoItem>
</div>
)
},
updateValue(e){
console.log(e)//子組件傳遞過(guò)來(lái)的參數(shù)e
}
React組件的prop看起來(lái)很像是HTML元素的屬性，但React組件的prop所能支持的類型豐富比HTML元素的屬性更多了骂铁，HTML元素的屬性僅能是字符串吹零，而prop還可以是任意一種JS所支持的數(shù)據(jù)類型。
上面例子舉出了prop的數(shù)據(jù)傳遞方式
- 外部傳遞數(shù)據(jù)給react組件---直接使用prop
- 組件反饋數(shù)據(jù)給外部---使用帶回調(diào)函數(shù)/參數(shù)的函數(shù)類型的prop
state
React組件的數(shù)據(jù)除了prop外還有state拉庵。由于prop是父級(jí)傳遞過(guò)來(lái)的數(shù)據(jù)灿椅，并不能修改，所以記錄自身數(shù)據(jù)變化只能用state钞支。
上面有兩個(gè)詞語(yǔ)是加粗的茫蛹，一個(gè)是記錄，一個(gè)是變化烁挟。
- 變化婴洼。
通常一個(gè)組件自身會(huì)有多種交互狀態(tài)或數(shù)據(jù)的變化。這種變化如果只是內(nèi)部狀態(tài)撼嗓，我們通常會(huì)將這些數(shù)據(jù)放在state內(nèi)柬采，用于驅(qū)動(dòng)渲染該組件的UI欢唾。 - 記錄。
我們知道粉捻，state是用于保存內(nèi)部數(shù)據(jù)的礁遣，那是否直接改變state的數(shù)據(jù)就可以驅(qū)動(dòng)組件的渲染呢？答案當(dāng)然是no肩刃。這是react的設(shè)計(jì)祟霍，驅(qū)動(dòng)組件的渲染是函數(shù)this.setState(這里涉及到生命周期)。this.setState()函數(shù)所做的事情盈包，首先是改變this.state的值沸呐，然后驅(qū)動(dòng)組件經(jīng)歷更新過(guò)程，這樣才有機(jī)會(huì)讓this.state里新的值出現(xiàn)在組件界面上呢燥。
相關(guān)資料
setState：這個(gè)API設(shè)計(jì)到底怎么樣
