# 什么是組件 React的首要思想是通過組件（ Component） 來開發應用。 所謂組件， 簡單說， 指的是能完成某個特定功能的獨立的、 可重用 的 代碼。 # 源碼分析 ## index.js 前面說了，`index.js` 是整個App的入口文件，代碼如下 ```js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); ``` 可以看到，整個App只引入了一個組件，就是同級目錄下的 `App.js`，將之掛載到 id 名為`root` 的元素下。 其中獲取id名為 `root` 的元素是從 `public/index.html` 的靜態文件中，這是瀏覽器打開后進入的文件，所有的組件都將掛載到個文件名叫 `#root` 的DOM當中，當然，也可以手動修改其名稱。 ## App.js 這是app中的一個組件，創建app的時候默認創建一個 `App` 的組件，渲染后就是我們在瀏覽器中看到的效果。 ```jsx import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App; ``` 里面用到了 `jsx` 的語法，可以直接將HTML DOM附加到js中。 # 創建自己的組件 比如我們要創建一個計數組件 `Counter` (源碼來源于 https://github.com/mocheng/react-and-redux ) 首先編寫組件文件 `Counter.js` ```js import React, { Component } from 'react'; class ClickCounter extends Component { constructor(props) { super(props); this.onClickButton = this.onClickButton.bind(this); this.state = { count: 0 } } onClickButton() { this.setState({count: this.state.count + 1}); } render() { const counterStyle = { margin: '16px' } return ( <div style={counterStyle}> <button onClick={this.onClickButton}>Click Me</button> <div> Click Count: <span id="clickCount">{this.state.count}</span> </div> </div> ); } } export default ClickCounter; ``` 同時修改 `index.js`，我們需要注冊 `Counter` 組件，并掛載到 DOM 中。 ```js import React from 'react'; import ReactDOM from 'react-dom'; import ClickCounter from './ClickCounter'; import './index.css'; ReactDOM.render( <ClickCounter/>, document.getElementById('root') ); ``` 可以看到，瀏覽器會進行熱更新，不需要重新運行代碼既能看到效果。 ## 刪除引入的React試試 可以看到，在組件中引入了 `React`，代碼中卻沒有明確用到。但事實上，引入 `React` 是非常必要的，如果將之刪除，則在瀏覽器可以看到報錯信息: :-:  錯誤信息提示的是: “ 在使用 JSX 的范圍內必須要有 React。” 也就是說， 在使用 JSX 的代碼文件中， 即使代碼中并沒有直接使用 React， 也一定要導入 React， 這是因為 JSX 最終會被轉譯成依賴于 React 的表達式。 # 易于維護組件的設計要素 ## 如何劃分組件邊界 軟件設計的通用原則是: "高內聚，低耦合"。組件也不例外。 何為"高內聚"? 高內聚就是指把邏輯緊密相關的內容放到同一個組件當中，無非就是關乎內容、行為、樣式。傳統設計中往往將HTML、JavaScript、CSS分離為不同文件，其實這只是技術上的分離，并沒有在功能模塊的層面上進行分離。相反，若是項目龐大，這將造成耦合度的增加，難以維護。而在react中，展示內容的jsx、行為控制的js、以及樣式定義的css，都可以放到同一個js文件中。因此，react天生具備高內聚的特點。 何為"低耦合"? 低耦合是指不同組件之間的關系盡可能弱化，組件之間不要有過多的牽扯。根據不同的功能模塊劃分組件，讓不同的組件實現單一職能，保持整個系統的耦合度在一個可控的范圍。