lm-ui-react v0.5.14

lm-ui-react

项目描述

• 58金融贷款组ui库

应用技术

• react
• jest && enzyme(单元测试)
• travis(持续集成)

目标

• 拥抱函数式无状态组件，使组件更加简洁可靠
• 单元测试覆盖率达到80%以上

测试点（渲染，初始化，交互）

• 1.render结构是否正常
• 2.检查初始值
• 3.检查点击事件，反馈是否正常
• 4.根据测试覆盖率，作stmts, branch, funcs, lines相应的fill，希望达到70%以上

目录结构

• /src 存放es6编写的源码
• /lib 存放经过babel编译的es5代码
• /example 存放开发用例代码
• /tool 存放文件编译脚本
• /test 存放单元测试代码

开始运行

• 安装依赖包

npm install

• 查看用例

npm run example

• 进行单元测试

npm test

• 编译生成lib文件

npm run lib

• 编译生成lib&&dist文件

npm run build

基本原则

• 对于展示组件来说，多用函数式无状态组件
  • 语法简洁性（fb）
  • 初始化快（就是一个纯函数，不需要在构建类）首次render性能好
  • 占内存少
• 请慎用setState，确保你的每一次setState都确实会体现到UI上
  • 每次setState都会引起组件重新渲染，确保你的每一次setState都是有意义的。（性能相关）
  • 某些setState前先判断新旧值是否相同
• 请慎将component当作props传入
  • 这种方式性能消耗较大
  • 推荐这种包裹方式
  • 如果是前缀后缀之类的情景，请传入函数式无状态组件
• 请将方法的bind函数一律置于constructor
  • 在constructor只需要bind一次，如果在render中每次render都会去执行bind方法（性能相关）
• 请只将组件需要的props传入组件，避免其他不相关props改变引起组件重新渲染
  • 避免引起组件不必要的渲染
• 请在希望发生重新渲染的dom或组件上设置唯一key,否则react可能在某些情况下不会重新渲染
  • 如果你希望某个状态改变后，这个组件会执行卸载并重建操作，那么请给他一个key(可以用这个改变的状态当key！)否则很有可能会执行更新操作（特定需求场景）
• 慎用太新ES6语法
  • 比如：Object.assign进行浅复制（微信上不支持）等...
  • 如果一定要用得话，请增加对应polyfile

进一步优化原则

• 请将jsbundle拆分为几个chunk，进行异步加载。router中内置require.ensure

  • 原则上控制主包大小在100KB左右

• 请使用immutable和PureComponent对渲染进行优化，提升项目性能

  • 务必一起使用
  • immutable不可变数据结构

  • PureComponent实质在组件shouldComponentUpdate生命周期中对新旧props，state做了次浅对比

DOC

控件列表

• Dialog
• Toast
• Form
• FormGroup
• Label
• Input
• Switch
• Select
• RadioGroup
• Radio
• CheckboxGroup
• Checkbox
• CheckBtn
• GetCodeBtn
• Button
• List
• Icon
• SvgIcon
• Tabs
• Tab
• TabsFooter
• SortGroup
• Sort
• SelectableListHOC
• ActionSheet
• Carousel
• Slider

Dialog

• props

<Dialog 
	dialogType={'Confirm'}
	showState={true}
	headText={'test head'}
	contentText={'提示内容提示内容提示内容'} 
	btnCommonFun={() => {this.setState({dialogState: false})}}
	btnLeftCbFun={() => {console.log('left fun')}}
	btnRightCbFun={() => {console.log('right fun')}}/>

Toast

• props

<Toast
	showState={this.state.showState}
	toastType={'Hint'}
	opacity={0}
	timeControl={{ time: 2000, cbFun: () => {this.setState({showState: false})}}}
	message={'提示文字'} />

Form

• props

<Form listenRequireMapFun={(mapData) => { console.log(mapData) }} >
...
</Form>

FormGroup

• props

//PropTypes.string
<FormGroup  groupId={'inputId'}>

//PropTypes.obj，参照flex布局
<FormGroup layout={{ direction: 'row', justifyContent: 'space-between', alignItems: 'center' }}>

Label

• props

<Label>		
	<span>姓名</span>				
</Label>

Input

• props

<Input
	type='input' 
	validateData={{ promptText: '请输入正确的姓名', validateFun: (value) => { return !!value && (value.trim() != '') && /^[\.·\u4e00-\u9fa5]{2,20}$/.test(value); } }}
	value={this.state.test5}
	cleanBtn={{ state: true, cleanFun: () => {this.setState({test5: ''})} }}
	defaultText={'aaa'}
    suffix={<GetCodeBtn onClick={() => {}} countNum={60} />} />
	onChange={(e) => {this.setState({test5: e.target.value})}} />

Switch

• props

<Switch
	disabled={true}
	checked={this.state.checked} 
	onChange={() => { this.setState({checked: !this.state.checked}) }} />

Select

• props

<Select
	selectedValue={this.state.selectVal}
	onChange={(e) => {this.setState({selectVal: e.target.value})}}
	optionMap={[{text:1, value:1}, {text:2, value:2}, {text:3, value:4}]} />

RadioGroup

• props

Radio

• props

<RadioGroup
	name={'radioName'}
	selectedValue={this.state.radioVal}
	onChange={(val) => {this.setState({ radioVal: val }) }}
	>
	<Radio text={'11'} value={1} />
	<Radio text={'22'} value={2} />
	<Radio text={'33'} value={3} />

	<Radio mode={'button'} uniqueId={111} text={'44'} value={4}  />
</RadioGroup>

CheckboxGroup

• props

Checkbox

• props

<CheckboxGroup
	name={'checkboxName'}
	selectedValue={this.state.checkboxVal}
	onChange={(val) => {console.log(`checkbox/${val}`); this.setState({ checkboxVal: val })}}>
	<Checkbox text={'11'} value={1} />
	<Checkbox text={'22'} value={2} />
	<Checkbox text={'33'} value={3} />
	
	<Checkbox mode={'button'} uniqueId={111} text={'22'} value={2} />

</CheckboxGroup>

CheckBtn

• props

<CheckBtn
	btnMap={[{ text: '有', value: true }, { text: '无', value: false }]}
	selectedValue={this.state.checkBtn}
	onChange={(val) => {this.setState({ checkBtn: val })}} />

GetCodeBtn(表单中特殊按钮)

• props

<GetCodeBtn 
      text={ '获取验证码'}
      countNum={60}
      onClick={() => {}} />

Button

• props

<Button
	size='small'
	btnType='primary'
	onClick={(e)=>{this.callbackFun(e)}}
>开关按钮</Button>

Icon

• desc

  普通icon，可自定义添加属性className,style，或在中添加任意inline或inline-block元素。

  默认inline-block区域大小：20px*20px

• props

其他属性(eg: className等未在文档中声明的属性)，也可加到当前元素上

<Icon className="demo-icon-test" style={{color: 'red'}}>
   <img />
   ...
</Icon>

SvgIcon

• desc

  svgIcon

  默认svg区域大小：20px*20px

• props

其他属性(eg: className等未在文档中声明的属性)，也可加到当前元素上

<SvgIcon className="test" color="#333" viewBox="0 0 20 20">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</SvgIcon>

Tab标签切换

• Tabs props

其他属性(eg: className等未在文档中声明的属性)，也可加到当前元素上

• Tab props

其他属性(eg: className等未在文档中声明的属性)，也可加到当前元素上

<Tabs value='a' initSelectedIndex={0}>
    <Tab value='a'>
        <p>content</p>
    </Tab>
    <Tab value='b'/>
        ...
    <Tab value='c'/>
</Tabs>

TabsFooter标签切换

• props 与 Tabs props一致

List

• List props

• ListItem props

其他属性(eg: className等未在文档中声明的属性)，也可加到当前元素上

当ListItem设置children，则primaryText, secondaryText失效

<List>
    <ListItem primaryText="内容" secondaryText="其他内容"/>
    ...
</List>


<ListItem onClick={ () => {} }>
    <div>
       自定义内容
    </div>
</ListItem>

Sort排序

• SortGroup props

• SortLabel、SortList、SortToggle props

filterItem说明：对于SortList可为函数，且返回promise，用于异步获取list

• SortMulti props

const onSortInfoUpdate = (ret) => {
    console.log(ret)
    // {
    //    sort_0:  {label: 'xx', value: '1'},
    //    sort_1: {xxxxx}
    // }
}

<SortGroup onSortInfoUpdate={onSortInfoUpdate}>
    <SortLabel filterItem={[{label: '筛选', value: '1'}]}/>
    <SortList filterItem={
       [
          label: '条件1',
          vlaue: '1',
          isDefault: true
       ],
       [
          label: '条件2',
          value: '2'
       ]
    }/>
</SortGroup>

SelectableListHOC

• desc

  给列表提供可选择的功能

• params

const SelectableList = SelectableListHOC({
      selectedClassName: 'active'
  })(List);

<SelectableList value='a' onSelectedChange={ (event, value, item) => {} }>
   <ListItem value="a" onClick={ () => {} } >
      <自定义内容/>
   </ListItem>
   <ListItem value="a" >
      <自定义内容/>
   </ListItem>
</SelectableList>

ActionSheet

• desc

  功能操作弹层

• params

const handleActionChange = (item) => {
    // {label: 'xx', key: 'xxx'}
};

<ActionSheet
	showState={ true }
	list={ [
           			{
           				label: '确定',
           				key: 'ok',
           			},
           			{
           				label: '其他操作',
           				key: 'other',
           			}
           		]
           }
	bottom={ [{
             			label: '取消',
             			key: 'cancel'
             		}]
             }
	onActionChange={ handleActionChange }
	className="choose-type-modal"
/>

NotifyLabel props

• desc

  通知标签，一版般用在列表右侧，默认20x20圆形图标

• params

<NotifyLabel content={1} style={{color: 'red'}}/>

Carousel

• desc

  跑马灯

• params

<Carousel autoplay={true}>

	<div className="test-page1">1</div>
	<div className="test-page2">2</div>
	<div className="test-page3">3</div>
	<div className="test-page4">4</div>

</Carousel>

Slider

• desc

  slider 横向滚动

• params

<Slider>

	<div style={{width: 200, height: 150, backgroundColor: '#cccccc'}}></div>
	<div style={{width: 200, height: 150, backgroundColor: 'pink'}}></div>
	<div style={{width: 200, height: 150, backgroundColor: '#8a2be2'}}></div>
	<div style={{width: 200, height: 150, backgroundColor: '#FF9912'}}></div>

</Slider>

Divider props

• desc

  分割线，一般用于列表之间

• params

<List>
    <ListItem />
    <Divider />
    <ListItem />
</List>