工做记录：不定宽度展开收起卡片

写在前面的唠

简单记录一下工做中出现的需求和常见的问题，时常记录总结，但愿能在以后的工做中吸收经验教训，提升工做效率。若是能够帮助有一样问题的同窗我会很开心的，有的方法多是能够解决问题，可是必定还有更好的办法。但愿路过的同窗能够多交流思路，多多指教。

1、情景描述

1.展现一行卡片，默认显示一行，若是一行没法显示全部卡片，则出现收起／展开按钮；
2.点击展开：显示全部卡片，按钮文字变成“收起”
3.点击收起：如默认状态，仅显示一行卡片，且按钮文字变成“展开”

2、个人困难

以前作过相似的需求，是从节点的角度实现展开和收起的，可是在这个场景下不太适合，由于卡片的个数和屏幕的大小是不肯定的，也就是说，一行能显示多少个卡片是不肯定的。

3、解决方法

1.其实css就能够实现这个效果，思路以下：由于卡片的高度是必定的，那么一行卡片的高度是肯定的，这样的话对height属性作变化就能够了，而且不须要对DOM和数据进行操做。

const hideStyle = {
    height: '62px', // 只展现一行数据的时候给固定高度
    overflow: 'hidden'
}

const strechStyle = {
    height: 'auto'
｝

2.为了显示展开／收起按钮，由于设定分辨率是来回变的，思来想去仍是使用了resize监听事件。

componentDidMount() {
this.showOrHideModelExpandButton('listWrap');
window.addEventListener('resize', this.onResizeHandle);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.onResizeHandle);
}

4、还在困扰个人问题

使用resize事件性能太差，因此在不使用resize的状况下是否能够完成这个功能呢？或者说如何提升resize的性能又成为了另外一个问题。

代码地址：https://github.com/SycamoreYC...