# 什么是组件 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天生具备高内聚的特点。 何为"低耦合"? 低耦合是指不同组件之间的关系尽可能弱化，组件之间不要有过多的牵扯。根据不同的功能模块划分组件，让不同的组件实现单一职能，保持整个系统的耦合度在一个可控的范围。