通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
# 什么是组件 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` 是非常必要的,如果将之删除,则在浏览器可以看到报错信息: :-: ![](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/imgs/react/003.png) 错误信息提示的是: “ 在使用 JSX 的范围内必须要有 React。” 也就是说, 在使用 JSX 的代码文件中, 即使代码中并没有直接使用 React, 也一定要导入 React, 这是因为 JSX 最终会被转译成依赖于 React 的表达式。 # 易于维护组件的设计要素 ## 如何划分组件边界 软件设计的通用原则是: "高内聚,低耦合"。组件也不例外。 何为"高内聚"? 高内聚就是指把逻辑紧密相关的内容放到同一个组件当中,无非就是关乎内容、行为、样式。传统设计中往往将HTML、JavaScript、CSS分离为不同文件,其实这只是技术上的分离,并没有在功能模块的层面上进行分离。相反,若是项目庞大,这将造成耦合度的增加,难以维护。而在react中,展示内容的jsx、行为控制的js、以及样式定义的css,都可以放到同一个js文件中。因此,react天生具备高内聚的特点。 何为"低耦合"? 低耦合是指不同组件之间的关系尽可能弱化,组件之间不要有过多的牵扯。根据不同的功能模块划分组件,让不同的组件实现单一职能,保持整个系统的耦合度在一个可控的范围。