项目命名： ihr360-web-ui

组件设计

• 基于Antd二次封装，封装一套属于公司自有标签的组件库，开发者能够方便、快捷的调用组件进行开发。

• learn包内组件版本管理，动态管理组件版本及组件间依赖，组件版本号一般为三位数字表示，如 0.0.1，三位数据均有不同的含义，每次更新组件时根据实际情况而改变其中具体的哪一位数值。

• npm包发布管理，我们将代码上传至内网gitlab后，通过learn的publish方法将组件发布至Nexus服务器。

• 

• 基于react-styleguidist搭建自动化api文档（更具读取指定格式数据，动态生成，md文档调用react组件，生成组件预览）

组件定义

• 无状态组件（react function component）、类组件（react class component）,在开发时应合理选择组件的编写方式。

无状态组件：

 const Welcome = (props) => {
  const sayHi = () => {
    alert(`Hi ${props.name}`);
  }

  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <button onClick ={sayHi}>Say Hi</button>
    </div>
  )
}

类组件：

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }

  sayHi() {
    alert(`Hi ${this.props.name}`);
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <button onClick ={this.sayHi}>Say Hi</button>
      </div>
    )
  } 
}

组件开发基本原则

• 命名规则：所有组件均以irs开头，如：isr-button。

• 文件分布：各组件内应包括src(开发目录)、demo(调用demo)、test(单元测试)、index.js（组件出口文件）、package.json(组件版本、依赖)、readme.md(api说明文档)部分。

• 组件内部不该做复杂的数据处理，组件需要向外提供统一的api接口，外部调用者只需传入需要的数据即可实现组件的渲染，对于复杂的组件我们一般向外提供插槽的方式让调用者可以自定义一些组件之外的功能。

• 每个组件都应配置对应的interface文件，使调用者能够接口IDE的插件提示快速获知组件需要的属性参数。

• 组件开发完后后，通过项目根目录下的index.js文件把所有组件统一向外暴露。

• 

组件发布原则

• 组件库代码上传至内网gitlab，根据npm发包规则填写package.json中的相关信息

• 通过learn动态更新新增或修改后包的版本信息 具体使用文档：http://www.jackpu.com/shi-yong-lerna-jin-xing-xiang-mu-duo-mo-kuai-de-guan-li/

• 使用lerna publish的方式将组件库发布到包管理中心，需将npm包源设置能公司内部包源

组件分布图

代码规范

• 组件分三类：layout（布局组件）、elements（基础组件）、components（业务组件）

• 组件文件夹命名均已 "irs-xxx" 形式，字母均小写，"-" 分割，如"irs-button"

• class以(大)驼峰形式命名，如： "export default class IrsButton"

• 全局采用Less样式编写

• 一个完整的组件应包含如下几部分：组件代码(src目录)、各组件export文件(index.js)、组件单元测试(test目录)、组件使用demo(demo目录)、组件API文件(readme.md)、package.json(组件版本文件)

• 所有组件添加对应id和name属性（配合自动化测试）

• 组件model文件中按照指定的注释格式编写相关信息，以便于自动生成组件文档及组件测试demo（/**设置 button 原生的 type 值 */）

• 组件api命名规范继承antd

• 区分组内接口调用、数据源props传递

• 业务组件按需实现一套默认样式交互，对外提供"插槽"供定制化需求

• 组件交互： https://217fra.axshare.com

组件文档预览

开发问题汇总（2018.12.01）

• 组件内package.json版本号 首次默认为 0.0.1，后续根据实际修改情况修改版本号

• readme文件测试demo文案规范，demo类名采用 组件名+'Demo' 如： IrsTabDemo

• 测试demo信息完整度，各组件的每个场景均要覆盖到

• demo文档 测试数据 书写规范性 禁止出现 "aaa" "111" "222"这类的数据格式

• 变更记录中内容一栏填写完善，具体更新的内容要体现，首次默认为“新增XXX组件”

• 每个组件demo上方添加说明文案

• 组件覆盖功能点不全