首先作為一個合格的開發者，不要只滿足於編寫出了可以運行的代碼，而耍了解代碼背 後的工作原理;不要只滿足於自己編寫的程序能夠運行，還要讓自己的代碼可讀而且易 於維護 。 這樣才能開發出高質量的軟件 。

易於維護組件的設計要素

作為軟件設計的通則，組件的劃分要滿足高內聚(High Cohesion)和低耦合(Low Coupling)的原則 。

高內聚指的是把邏輯緊密相關的內容放在一個組件中 。 用戶界面無外乎內容 、 交互 行為和樣式 。 傳統上，內容由 HTML 表示，交互行放在 JavaScript代碼文件中，樣式放 在 css 文件中定義 。 這雖然滿足一個功能模塊的需要，卻要放在三個不同的文件中，這 其實不滿足高內聚的原則 。 React卻不是這樣，展示內容的 JSX、定義行為的 JavaScript 代碼，甚至定義樣式的 css，都可以放在一個 JavaScript文件中，因為它們本來就是為了實現一個目的而存在的，所以說 React天生具有高內聚的特點 。

低耦合指的是不同組件之間的依賴關系要盡量弱化，也就是每個組件要盡量獨立 。保持整個系統的低耦合度，需要對系統中的功能有充分的認識，然後根據功能點劃分模 塊，讓不同的組件去實現不同的功能，這個功夫還在開發者身上，不過， React 組件的對 外接口非常規範，方便開發者設計低禍合的系統 。

react組件的數據

俗話說的好 差勁的程序員操心代碼，優秀的程序員操心數據結構和它們之間的關系

React組件的數據分為兩種， prop和 state，無論 prop或者 state 的改變，都可能引發組件的重新渲染，那麽，設計一個組件的時候，什麽時候選擇用 prop什麽時候選擇用state 呢?其實原則很簡單， prop 是組件的對外接口， state 是組件的內部狀態，對外用prop，內部用 state。

設計react組件