前言
在寫這個博客系統的時候，覺得有必要講一下react的一些知識，因爲怕在文檔中會涉及到很多有關react的事情，然後想着還是方便各位看官，免得去百度撒的，更重要的是爲後面我直接寫code只講思想打基礎，而不是每次都要顧慮語法等等。
設計組件的大體原則和方法
- 劃分組件邊界的原則
- react組件的數據種類
- react組件的生命週期
主要是要設計一個易於維護的組件。每一個組件就該有自己的要處理的事情。所以要拆分組件，其關鍵在於確認組件的邊界。
要滿足2個設計理念即高內聚、低耦合。
- 高內聚：把邏輯緊密相關的內容放在一個組件中
- 低耦合：不同組件之間的依賴關係要儘量弱化，就是每個組件要儘量獨立
智慧組件與木偶組件
這是一個react在設計系統的時候兩個非常重要的概念。智慧組件一般會放在src/containers中，而木偶組件一般會放在src/components中
-
智能組件：它是數據的所有者，它擁有數據、且擁有操作數據的action，但是它不實現任何具體功能。它會將數據和操作action傳遞給子組件，讓子組件來完成UI或者功能。也就是項目中的各個頁面。
-
木偶組件：它就是一個工具，不擁有任何數據、及操作數據的action，給它什麼數據它就顯示什麼數據，給它什麼方法，它就調用什麼方法，比較傻。這就是木偶組件，即項目中的各個組件。
react-router
目前的版本已經到了v4，那麼其中我們
React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它沒有提供dom操作進行跳轉的api。
<BrowserRouter>
<switch>
<Route exact patch={'/'} component = {Home}/>
<Route path={`/detail/:id`} component={Detail}/>
</switch>
</BrowserRouter>
組件的數據
react的組件的數據分2種，prop和state。
prop:組件對外的接口
state：組件的內部狀態
總的來說，對內用state，對外用prop.
prop
在react中，prop（property的簡寫）是外部傳遞給組件的數據，組件是通過接收prop來進行對外設置的。
在這裏要提的是prop所支持的類型非常豐富，可以是字符串，數字，函數，對象等任何javasctipt支持的數據類型。當prop類型不是字符串的時候，在js中必須用{}把prop包起來。而且我們經常有回調函數，帶上必要的參數，那麼子組件就能夠將值傳給父組件。
設置props
比如一個組件SimpleBtton就是使用了id這個prop，這個看上去很像html的元素屬性，但是在html中這些屬性值只能是字符串型，但react組件的prop就支持javascript的所有數據類型。
<SimpleButton id="sample">
當然啦SimpleButton的同時還可以傳回調函數，這就給組件提供了反饋數據給到外部組件，這裏一定要記住要加react.component的構造函數,那麼組件內部又是如何獲取傳入的prop的呢？
class SimpleButton extends Component{
constructor(props)//構造函數
{
super(props);
this.id = props.id;
}
}
這裏要記住第一行通過super調用父類也就是react.component的構造函數.如果不調用，類實例的所有成員函數將無法通過this.props訪問到父組件傳過來的值
propTypes檢查
propType檢查只是開發的輔助功能，要注意。它的主要目的是告訴你，這個組件支持哪些prop，每個prop應該是什麼格式。
store
組件在渲染的時候，除了prop還有state。由於prop是不能被修改的，爲了記錄組件自己的狀態，特地使用state
setState
state不能直接用this.state修改只能使用setState
react組件生命週期
要設計一個較好的組件，那麼就要對react的組件生命週期瞭解。
react大體上被分爲：
- 裝載過程
- 更新過程
- 卸載過程
裝載過程
- constuctctor:組件構造函數
- render：返回一個jsx描述的結構，最終還是由react來完成渲染
其他的後續再更新吧，目前還用不到