## WEB 前端开发规范
---
#### 组件
- 组件划分
组件功能要单一
- 布局组件
处理页面布局，要与其他组件区分开来、
- 渲染组件
负责 UI 页面的渲染， 接收 props 传递数据，以数据驱动页面渲染
业务相关发出事件，交由业务组件处理
- 业务组件
负责业务逻辑处理，包括数据格式化、合并删除等， 数据请求，数据验证
服务端业务成功提醒、异常提醒相关提示等
- 公共组件
业务无关，可测试，将来可能会被收入公共组件库
- 数据处理
- 服务端请求回来的数据，组件内使用推荐一下方式
```javascript
// 第一种
class Foo extends React.PureComponent {
componentWillReceiveProps(next) {
if (next.some !== this.props.some) {
// ...
}
}
render() {
const {some} = this.props;
return null;
}
}
function mapStateToProps(state) {
return {
some: state.some.result
};
}
```
```javascript
// 第二种
import receive from '@utils/receive';
import {message} from 'antd';
class Foo extends React.PureComponent {
componentWillReceiveProps(next) {
receive
.call(this, 'some', next)
.loading(() => {})
.success((result) => {})
.error((err) => err && message.error(err));
}
render() {
const {some} = this.props;
const result = some.result || [];
return null;
}
}
function mapStateToProps(state) {
return {
some: state.some
};
}
```
- 单元测试
- 哪些代码需要单元测试？
公共组件、工具函数（公用函数）、必要业务逻辑代码
- 包含哪些场景？
1、正常使用
2、异常使用，或者异常数据，数据内容异常，数据格式异常
3、重要场景测试，特殊案例测试
- 测试教程
[React 测试工具-Enzyme](https://enzymejs.github.io/enzyme/)
[javascript 测试框架-Mocha](https://mochajs.org/#getting-started)
[函数对接辅助工具-Sinon](https://sinonjs.org/releases/v9.0.1/)
[断言辅助工具-Chai](https://www.chaijs.com/)
- 页面性能指标监控
查看方式 DevTools -> 右侧 ┇ -> More tools -> Performance monitor
