工做記錄：不定寬度展開收起卡片

寫在前面的嘮

簡單記錄一下工做中出現的需求和常見的問題，時常記錄總結，但願能在以後的工做中吸收經驗教訓，提升工做效率。若是能夠幫助有一樣問題的同窗我會很開心的，有的方法多是能夠解決問題，可是必定還有更好的辦法。但願路過的同窗能夠多交流思路，多多指教。

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...