React其中一個(gè)重要思想就是 "react內(nèi)一切皆組件"，一個(gè)好的應(yīng)用應(yīng)該有一定的原則來劃分組件。
我們劃分組件的時(shí)候應(yīng)該盡量保持一個(gè)組件只做一件事。每個(gè)小組件只關(guān)注實(shí)現(xiàn)單個(gè)功能，組合起來也能實(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)//子組件傳遞過來的參數(shù)e
  }

React組件的prop看起來很像是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í)傳遞過來的數(shù)據(jù)，并不能修改，所以記錄自身數(shù)據(jù)變化只能用state。
上面有兩個(gè)詞語是加粗的，一個(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)歷更新過程，這樣才有機(jī)會(huì)讓this.state里新的值出現(xiàn)在組件界面上。

相關(guān)資料
setState：這個(gè)API設(shè)計(jì)到底怎么樣